LINE ID連携時のデフォルトボタンを表示させる方法

テーマガイドに記載しているLINEN ID連携用のコンポーネントは必須項目のみを記載いたしておりますため、このまま記述いただいても「LINE ID 連携」部分がテキストリンクになります。

本コンポーネントはショップ様ごとにデザインいただくことが前提ですが、標準デザインがございますので、記述方法を案内いたします。

対象画面

コード

必須コンポーネント（例）

{% if line_settings['display_btn'] == '1' and encrypted_line_id == nil %}
  <!-- LINE ID 説明ポップアップ -->
  {{ line_settings['information_context'] }}
  <!-- LINE ID 連携ボタン（クラス） -->
  <a class="line-token-set-btn" href="#">LINE ID 連携</a>
{% endif %}

標準デザインを適用する場合（例） ※必要コンポーネントは各画面のものとあわせて記載してください。

{% if line_settings['display_btn'] == '1' and encrypted_line_id == nil %}
    <div class="alert">
      {{ line_settings['information_context'] }}
    </div>
    <div class="line_ec" style="display: block;">
      <div class="button-container" style="margin: auto;">
        <a class="button btn-line line-token-set-btn" href="#">LINE ID 連携</a>
      </div>
    </div>
  {% endif %}

注意事項

LINE ID連携用のパーツは、各画面で定義されているコンテナの内部に含める必要がございます。
コンテナ外に設置した場合は、href="#" が正常に展開されません。
またリンク先を固定で設定した場合、LINE側の仕様・設定が変わった場合に正常に動作しなくなる可能性がございますため、リンク先は固定値にしないでください。