自動化プラン、最適化プラン（有料）をご利用の場合、Delete Meの退会ボタンを設置することで、ストアーページにて、マイページへログイン後、マイページメニューより、"退会する"を選択することにより、自動的に退会手続きが可能となります。
🔶ストアフロントに設置された退会ボタンの例🔶
顧客が赤枠内のAccount Deletion（退会ボタン）を押下すると、退会処理されます。顧客管理から該当の顧客データは論理削除されます。
退会ボタンの設置は以下のステップで行います。
【Online Store 1.0をご利用の場合】
1. 管理画面のナビゲーションより、アプリ> Delete Me＞インストール手順を選択します。
2. テーマよりお使いのテーマを選択してください。
退会ボタン設置のコード、「HTML/Liquidコードスニペット」「Javascriptコードスニペット」「JSON theme schemaスニペット」をそれぞれコピーしてください。
3. 販売チャンネル＞オンラインストア＞テーマ＞3点リーダー＞コード編集よりcustomers/account.liquid内の任意の場所へSTEP2のコードをそれぞれ貼り付けます。
4. settings_schema.json コードは、お客様が自分のアカウントを削除する際にエラーが発生した場合に表示されるメッセージを示します。このメッセージは、好みに合わせて追加や編集が可能です。販売チャンネル＞オンラインストア＞テーマ＞3点リーダー＞コード編集＞JSON theme schemaスニペットを貼り付け設定してください。
左上の歯車マーク＞Delete Meを選択します。
この設定画面では、さまざまなエラーアラートをカスタマイズできます。例えば、アクティブなサブスクリプションを持つ顧客がアカウントを削除しようとした場合、削除を完了させるために使用されるリダイレクトURLを編集、確認メッセージを変更することができます。
5. マイページへの退会ボタンの設定は完了です。
退会機能のコード一覧
コードは以下をご利用ください。
無料プランをご利用の場合、コードを設置しても退会機能を使用することはできません。
HTML/LIQUIDスニペット:
<form action='{{settings.redirection_url}}' method='post' id='delete_me-button'>
<button
id='delete-account-button'
type='submit'
data-email='{{ customer.email }}'
data-customer-id='{{customer.id}}'>
<span>
退会する
</span>
</button>
</form>
Javascriptスニペット:
<script id='delete_me-js-script'>
document.addEventListener('DOMContentLoaded', function (event) {
const deleteAccountButton = document.getElementById('delete-account-button');
if (deleteAccountButton) {
deleteAccountButton.addEventListener('click', function (event) {
event.preventDefault();
const xmlHttp = new XMLHttpRequest();
const { email, customerId } = deleteAccountButton.dataset;
const x = confirm('{{ settings.customer_delete_confirmation }}');
if (x) {
const customerPayload = JSON.stringify({
delete_id: customerId,
delete_email: email
});
xmlHttp.onload = function () {
if (xmlHttp.status == 200) {
alert('{{ settings.customer_deleted_success }}');
var xmlhttpLogout = new XMLHttpRequest();
xmlhttpLogout.open("GET", "/account/logout", true);
xmlhttpLogout.onreadystatechange = function () {
if (xmlhttpLogout.readyState === XMLHttpRequest.DONE) {
if (xmlhttpLogout.status === 200) {
// customer logged out, redirecting to the specified url.
window.location.href = '{{ settings.redirection_url }}';
} else {
// Error logging out.
alert('{{ settings.customer_delete_global_error }}');
}
}
};
xmlhttpLogout.send();
} else {
if (xmlHttp.responseText.includes('Customer Subscribed')) {
alert('{{ settings.customer_subscribed_error }}');
} else {
alert('{{ settings.customer_delete_global_error }}');
}
}
}
let appProxyUrl = '{{ settings.app_proxy_url }}';
appProxyUrl.endsWith("/") ? appProxyUrl = appProxyUrl.slice(0, -1) : null;
!appProxyUrl.startsWith("/") ? appProxyUrl = "/" + appProxyUrl : null;
xmlHttp.open('post', '/apps/deleteme/customer-delete');
xmlHttp.setRequestHeader('Content-Type', 'application/json');
xmlHttp.send(customerPayload);
}
})
}
});
</script>JSON theme schemaスニペット:
{
"name": "Delete Me",
"settings": [
{
"type": "header",
"content": {
"ja": "アカウント削除後のリダイレクトURL",
"en": "After account Deletion Redirection URL",
"es": "URL de Redirección después de borrar cliente"
}
},
{
"type": "url",
"id": "redirection_url",
"default": "/",
"label": {
"ja": "リダイレクトのURL",
"en": "Redirection URL",
"es": "URL de redirección"
}
},
{
"type": "header",
"content": {
"ja": "エラーメッセージ",
"en": "Error Messages",
"es": "Mensajes de error"
}
},
{
"type": "text",
"id": "customer_delete_confirmation",
"label": {
"ja": "確認メッセージ",
"en": "Confirmation Message",
"es": "Mensaje de Confirmación"
},
"info": {
"ja": "顧客にアカウントを削除したいかどうか確認するメッセージとなります。ご設定ください。",
"en": "This error message is to confirm the customer want's to delete his/her account.",
"es": "Este mensaje de error es para confirmar que el cliente quiere eliminar su cuenta."
},
"default": "退会してよろしいですか？"
},
{
"type": "text",
"id": "customer_deleted_success",
"label": {
"ja": "顧客が削除されました（成功）",
"en": "Customer Deleted (Success)",
"es": "Cliente Eliminado (Éxitoso)"
},
"info": {
"ja": "顧客アカウントが削除されたことを確認するメッセージとなります。ご設定ください。",
"en": "This error message is to confirm the customer's account has been deleted.",
"es": "Este mensaje de error es para confirmar que la cuenta del cliente fué eliminada"
},
"default": "退会が完了しました!"
},
{
"type": "text",
"id": "customer_delete_global_error",
"label": {
"ja": "顧客は削除されていません（失敗）",
"en": "Customer Delete (Failed)",
"es": "Eliminar Cliente (Error)"
},
"info": {
"ja": "顧客アカウントの削除中にエラーが発生したことをお知らせするメッセージとなります。ご設定ください。",
"en": "This error message will show up when there is an unknown error deleting the account.",
"es": "Este mensaje de error aparecerá cuando hay un error eliminando la cuenta."
},
"default": "問題が起きたため、カスタマーサポートへご連絡ください。"
},
{
"type": "text",
"id": "customer_subscribed_error",
"label": {
"ja": "顧客は削除されていません（失敗、サブスクライブ中の顧客）",
"en": "Customer Delete (Failed, customer subscribed)",
"es": "Eliminación de cliente (Error, cliente suscrito)"
},
"info": {
"ja": "お客様がサブスクリプションに登録されている場合、こちらのエラーメッセージが表示されます。",
"en": "This error message will show up when the customer has an active subscription",
"es": "Este mensaje de error aparecerá cuando el cliente tiene una suscripcioón activa."
},
"default":
"お客様のアカウントは現在退会できません。ご不明点などございましたら、お問い合わせください。"
}
]
},
【その他のテーマをご利用の場合】
Delete Me起動＞インストール手順より、テーマを選択し、インストラクションビデオをご参照ください。
【退会ボタンの表示例】
マイページに退会ボタンが設置されると下記のように表示されます。
【退会するボタンクリック後のアラート表示例】
【退会後のメッセージ表示例】
【エコシステムプランの方が退会ボタンを設置した場合や、エラー発生時のメッセージの表示例】
💡マイページ以外のページに退会ボタンを設置する際の留意点💡
通常のマイページ以外の場所に「退会ボタン」を設置・カスタマイズされる場合は、以下の2点について事前にご確認ください。
ログイン状態のチェック（必須）
固定ページ（
/pages/*）は通常のマイページとは異なり、ログインしていない一般のユーザーもアクセスが可能です。退会処理を行うには「どのお客様のアカウントか」をアプリ側で識別する必要があるため、該当ページへのアクセス時、あるいはボタンの周辺にログイン状態を判別するロジック（例：Liquidの
{% if customer %}構文など）を必ず実装してください。カスタマイズにおける動作保証について
通常とは異なるページや方法でコードを直接編集・配置される場合、レイアウトの崩れやボタンが正常に動作しなくなった際、弊社での修正対応や技術的なサポートはご提供いたしかねます。
恐れ入りますが、コードのコピーおよび配置後の運用につきましては、ストア様の責任において実施していただきますようお願いいたします。