<aside> 💡 退会ボタンをテーマに導入する場合、お客様アカウントの設定が「従来のお客様アカウント」に設定されている必要があります。「新しいお客様アカウント」へは今後対応予定です。（2024年9月）

</aside>

テーマブロックでの追加（推奨）

テーマエディタでアカウントページにテーマアプリ拡張機能を追加するには、以下の手順に従ってください：

• 「テーマを選択」ボタンをクリックしてテーマを選択します。

• 選択したテーマの「エディタを開く」ボタンをクリックしてテーマエディタを開きます。

• テーマエディタで、「customers/account」テンプレートを選択します。

• 「セクションを追加」から「アプリ」をクリックし、「退会ボタン App Unity Safe Delete」を選択します。

  

必要に応じてブロックの設定からCSSを調整してください。

コードでの追加（アプリブロックで追加できない場合のみ）

テーマエディタでアカウントページにテーマアプリ拡張機能を追加するには、以下のボタンをクリックしてください：

※アカウントページ（例：sections/main-account.liquid）への実装を想定しています

コード例(以下のコードをアカウントページの任意の場所に追加してください。スタイルなどは自由に変更可能です。)：

<style>
  #au-confirm-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 40px;
    border: 1px solid black;
    border-radius: 5px;
    z-index: 1000;
    text-align: center;
    width: 300px;
    height: 200px;
    font-size: 1.6rem;
  }
  #au-confirm-popup button {
    font-size: 16px;
    padding: 5px 20px;
    margin: 10px;
    cursor: pointer;
    width: 85px;
    display: inline-block;
    font-size: 1.2rem;
  }
  #au-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
  }
  </style>

  <div id="au-customer-disactivate">
    <p class="customer"><a href="#" onclick="confirmDisactivate(); return false;">退会する</a></p>
  </div>

  <div id="au-confirm-popup">
    <p>本当に退会しますか？</p>
    <button onclick="disactivate(); closePopup();">はい</button>
    <button onclick="closePopup();">いいえ</button>
  </div>

  <div id="au-popup-overlay"></div>

  <script>
  function confirmDisactivate() {
    document.getElementById('au-confirm-popup').style.display = 'block';
    document.getElementById('au-popup-overlay').style.display = 'block';
  }

  function closePopup() {
    document.getElementById('au-confirm-popup').style.display = 'none';
    document.getElementById('au-popup-overlay').style.display = 'none';
  }

  function disactivate() {
    fetch('apps/customer/disactivate?customer_id={{customer.id}}', {
      method: 'GET'
    })
    .then(response => {
      if (response.status === 200) {
        window.location.href = '/account/logout';
      } else {
        alert('退会処理に失敗しました');
        throw new Error('退会処理に失敗しました');
      }
    })
    .catch(error => {
      alert('退会処理に失敗しました');
      console.error('エラーが発生しました:', error);
    });
  }
  </script>