コンテンツにスキップ

ecforce へのタグ設置方法（タグ連携）

概要

ecforce（タグ連携）では、テーマのコード編集機能を使って AnyGift タグを設置します。スクリプトタグとマーカータグの2つを、それぞれ異なるファイルに追加します。

設置手順

ステップ1: スクリプトタグを挿入する

  1. ecforce の管理画面で ショップ管理 > テーマ管理 > アクション > コードを編集 を開く
  2. ec_force/shop/products/show.html.liquid ファイルをクリック
  3. 以下のコードを挿入する

storeId の値（YOUR_STORE_ID）は、AnyGift から発行されたストアIDに置き換えてください。

{%- comment -%}AnyGift用スクリプト追加{%- endcomment -%}
<script type="text/javascript">
  let _AnyGiftProductSettingTemp = window.AnyGift || {};
  let _AnyGiftProductSettings = {
    productCode: "{{ product.number }}",
  };
  Object.assign(_AnyGiftProductSettingTemp, _AnyGiftProductSettings);
  window.AnyGift = _AnyGiftProductSettingTemp;
</script>
<script type="text/javascript">
    window.AnyGift = {
      storeId: 'YOUR_STORE_ID',
    };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
{%- comment -%}AnyGift用スクリプト追加ここまで{%- endcomment -%}

ステップ2: マーカータグを挿入する

  1. 同じく ショップ管理 > テーマ管理 > アクション > コードを編集 を開く
  2. ec_force/shop/sections/products_show_content.liquid ファイルをクリック
  3. AnyGift のボタンを表示させたい箇所に以下のコードを挿入する
{% comment %} anygiftマーカー {% endcomment %}
  <div data-anygift></div>

ステップ3: デザインの調整（任意）

ボタンのデザインをストアのデザインに合わせて調整する場合は、CSS でカスタマイズできます。以下はカスタマイズの例です。

.ag-text-left.ag-w-\[345px\].anygift-gift-ui__container {
    width: 100% !important;
    margin-top: 20px;
}

.anygift-gift-ui__main-button {
    border-radius: 999px !important;
}

動作確認

設置が完了したら、ストアの商品詳細ページにアクセスし、「ギフトとして贈る」ボタンが表示されていることを確認してください。