トラブルシューティング

現在ご利用のテーマがOnline Store 2.0に対応していない、またはオリジナルのテーマをお使いの場合、テーマエディタからID連携追加・連携解除ブロックやソーシャルログインボタンの設置ができない場合があります。

テーマエディタから設置が出来ない場合に、コードエディタから手動で設置する方法をご案内します。

‍

テーマファイル内にスニペットを追加する

販売チャネルのオンラインストア > テーマから「現在のテーマ」または「テーマライブラリー」のテーマでアクションボタンを押して、「コードを編集」を選択します。

‍

‍

コードエディタの左側に表示されるディレクトリの中からディレクトリ名「スニペット」を押し、展開された項目の中の「新しいスニペットを追加する」を押して、socialplus-association.liquidの名前でファイルを作成します。

‍

‍

作成したファイル内に以下のコードを貼り付けます。貼り付け後「保存する」ボタンを押してください。

{% comment %}
  このファイルの編集や削除は行わないでください。CRM PLUS on LINEが正常に動作しなくなります。
{% endcomment %}

<script
  defer
  src="https://shop.socialplus.jp/storefront/bundle.js"
></script>
<div
  class="socialplus-association"
  data-locale="{{ request.locale.iso_code }}"
  data-root-url="{{ request.locale.root_url }}"
  data-customer-id="{{ customer.id }}"
  data-providers="{{ providers }}"
  data-callback-url="{{ callback_url }}"
  data-not-alert-when-dissociate-all-providers="{{ not_alert_when_dissociate_all_providers }}"
></div>

‍

‍

同様の方法で、「socialplus-error-banner.liquid」「socialplus-login-button.liquid」のスニペットを作成します。

「socialplus-error-banner.liquid」は以下のコードを貼り付け、保存してください。

{% comment %}
このファイルの編集や削除は行わないでください。CRM PLUS on LINEが正常に動作しなくなります。
{% endcomment %}

<script
  defer
  src="https://shop.socialplus.jp/storefront/bundle.js"
></script>
<div
  class="socialplus-error-banner"
  data-locale="{{ request.locale.iso_code }}"
  data-root-url="{{ request.locale.root_url }}"
></div>

‍

「socialplus-login-button.liquid」は以下のコードを貼り付け、保存してください。

{% comment %}
このファイルの編集や削除は行わないでください。CRM PLUS on LINEが正常に動作しなくなります。
{% endcomment %}

<script
  defer
  src="https://shop.socialplus.jp/storefront/bundle.js"
></script>
<div
  class="socialplus-login-button"
  data-locale="{{ request.locale.iso_code }}"
  data-root-url="{{ request.locale.root_url }}"
  data-kind="{{ kind }}"
  data-provider="{{ provider }}"
  data-callback-url="{{ callback_url }}"
  data-highlight-last-login="{{ highlight_last_login }}"
></div>

‍

以上でスニペットの追加は完了です。

‍

‍

マイページにID連携ボタン・連携解除ボタンを追加する

マイページ（お客様アカウントページ）にLINEなどのアカウントのID連携追加・連携解除ボタンを表示する方法です。
コードエディタ内のディレクトリ名「セクション」を押し、展開されたファイルの中からmain-account.liquidを開きます。

ID連携追加・連携解除ボタンを表示する箇所に以下の表示用タグを貼り付けます。下記の画像では{{ 'customer.log_out' | t }}を囲っているaタグの終了タグ</a>の後の行にコードを追加しています。 コードを追加後「保存」ボタンを押してください。

{% render 'socialplus-association', providers: 'line' %}

‍

※【Advancedプランのみ】providers に含まれる line,apple などのパラメーターを変更することで、特定の連携追加・連携解除ボタン表示したり、表示順をカスタマイズすることが可能です。

^{パラーメーター一覧}

• ^{LINE : line}
• ^{Apple : apple}
• ^{Yahoo! JAPAN : yahoo}
• ^{Google : google}
• ^{Facebook : facebook}
• ^{X（旧Twitter） : twitter}

※ご利用になるアカウントは、あらかじめアカウント情報を設定する必要があります。

‍

エラーバナーを追加する

何らかの原因でID連携追加・連携解除が出来なかった場合に表示するエラーバナーを追加します。
main-account.liquid内に以下の表示用タグを貼り付けます。下記の画像では{{ 'customer.account.title' | t }}を囲っているh1タグの終了タグ</h1>の後の行にコードを追加しています。コードを追加後「保存」ボタンを押してください。

{% render 'socialplus-error-banner' %}

‍

ID連携ボタン・連携解除ボタンの追加は以上です。

‍

‍

アカウント作成ページにソーシャルログインボタンを追加する（Advancedプランのみ対象）

新規のお客様がアカウントを作成するためのソーシャルログインボタンを表示する方法です。
※Advancedプランのみが実装可能な機能になります。

コードエディタ内のディレクトリ名「セクション」を押し、展開されたファイルの中からmain-register.liquidを開きます。
ソーシャルログインボタンを表示する箇所に以下の表示タグを貼り付けます。下記の画像では{{ 'customer.register.title' | t }}を囲っているh1タグの終了タグ</h1>の後の行にコードを追加しています。 コードを追加後「保存」ボタンを押してください。

{% render 'socialplus-error-banner' %}
{% render 'socialplus-login-button', kind: 'signup', provider: 'line' %}

‍

‍

※ providers に含まれる line,apple などのパラメーターを変更することで、特定のソーシャルログインボタンを表示したり、表示順をカスタマイズすることが可能です。

^{パラーメーター一覧}

• ^{LINE : line}
• ^{Apple : apple}
• ^{Yahoo! JAPAN : yahoo}
• ^{Google : google}
• ^{Facebook : facebook}
• ^{X（旧Twitter） : twitter}

※ご利用になるアカウントは、あらかじめアカウント情報を設定する必要があります。

‍

ソーシャルログイン後に表示するページを変更する

通常はソーシャルログイン後はマイページ（お客様アカウント）を表示しますが、ソーシャルログイン後に表示するページを変更することができます。
先程追加したコードにパラメーター名callback_urlを追加して、パラメーターの値にURLを入力してください。

コードの記述例
{% render 'socialplus-login-button', kind: 'signup', provider: 'line', callback_url: 'https://example.com/' %}

※ストア内の他のページを表示する場合は、ストアと同じドメインのURLを、言語コードを除いた状態で指定してください。
※外部ドメインのページを表示する場合は、事前にCRM PLUS on LINE内の設定「アプリに接続するドメイン設定」より接続を許可するドメインを登録してください。

‍

‍

ログインページにソーシャルログインボタンを追加する（Advancedプランのみ対象）

既存のお客様がログインするためのソーシャルログインボタンを表示する方法です。※Advancedプランのみが実装可能な機能になります。

コードエディタ内のディレクトリ名「セクション」を押し、展開されたファイルの中からmain-login.liquidを開きます。

ソーシャルログインボタンを表示する箇所に以下の表示タグを貼り付けます。下記の画像では{{ 'customer.login_page.title' | t }}を囲っているh1タグの終了タグ</h1>の後の行にコードを追加しています。コードを追加後「保存」ボタンを押してください。

{% render 'socialplus-error-banner' %}
{% render 'socialplus-login-button', kind: 'signin', provider: 'line' %}

‍

‍

※ providers に含まれる line,apple などのパラメーターを変更することで、特定のソーシャルログインボタンを表示したり、表示順をカスタマイズすることが可能です。

^{パラーメーター一覧}

• ^{LINE : line}
• ^{Apple : apple}
• ^{Yahoo! JAPAN : yahoo}
• ^{Google : google}
• ^{Facebook : facebook}
• ^{X（旧Twitter） : twitter}

※ご利用になるアカウントは、あらかじめアカウント情報を設定する必要があります。

‍

ソーシャルログイン後に表示するページを変更する

通常はソーシャルログイン後はマイページ（お客様アカウント）を表示しますが、ソーシャルログイン後に表示するページを変更することができます。
先程追加したコードにパラメーター名callback_urlを追加して、パラメーターの値にURLを入力してください。

コードの記述例
{% render 'socialplus-login-button', kind: 'signin', provider: 'line', callback_url: 'https://example.com/' %}

※ストア内の他のページを表示する場合は、ストアと同じドメインのURLを、言語コードを除いた状態で指定してください。
※外部ドメインのページを表示する場合は、事前にCRM PLUS on LINE内の設定「アプリに接続するドメイン設定」より接続を許可するドメインを登録してください。