futureshop の連携設定と運用

futureshop をお使いのストアでは、futureshop で管理している商品・在庫を AnyGift に自動で取り込めます。「eギフト用に商品を二重登録したくない」「価格や在庫の変更を AnyGift にも反映し忘れたくない」という手間をなくせます。

このページでは、futureshop との API 連携の設定、商品 CSV のダウンロード、eギフト説明ページの作り方、コマースクリエイターの商品一覧ページへのeギフトボタンの表示方法を説明します。商品ページへのタグ設置は futureshop へのタグ設置方法 をご覧ください。

連携でできること

取込の動きは次のとおりです。

• 商品名と商品説明は、futureshop の「商品名(連携用)」「商品説明(連携用)」を使います。「商品名(連携用)」が空のときは通常の商品名を使います
• バリエーション（サイズ・色など）がある商品は、バリエーションごとに価格と在庫数を取り込みます
• futureshop で在庫数を管理しない設定にしている商品は、AnyGift でも在庫切れにならない扱いになります
• futureshop にない商品は、取込のたびに AnyGift から削除されます。AnyGift の管理画面やCSVで追加しただけの商品も、futureshop になければ削除されます。例外は、選べるギフトの親商品として設定済みの商品（選べるギフトを作成したあとの親商品）だけです。受取者が選ぶ候補の子商品は、futureshop になければ削除されます（詳しくは選べるギフトのCSV登録を参照）
• 逆に、AnyGift 管理画面で商品を削除しても、futureshop に商品が残っていれば次の取込で再び登録されます

• 新しく取り込んだ商品をはじめから eギフトの対象にするかどうかは、ストアの設定に従います。設定を変えたい場合は AnyGift 担当窓口へご相談ください

API 連携の設定手順

futureshop との連携には、futureshop への API 利用申請が必要です。追加の費用はかかりません。

ステップ1: 店舗KEY を確認する

futureshop の管理画面にログインし、画面右上の人のアイコンをクリックすると「店舗KEY」が表示されます。値を控えておきます。

ステップ2: futureshop へ API 利用を申請する

futureshop の API 利用申請フォーム から申請します。API を利用するサービスには「AnyGift（AnyReach株式会社）」を選んでください。

ステップ3: futureshop からの連絡を待つ

申請が完了すると、futureshop から次の情報が届きます。

• クライアントID
• クライアントシークレット

ステップ4: AnyGift 担当窓口へ共有する

次の3点を AnyGift 担当窓口へ共有してください。共有の方法は担当窓口が案内します。

• 店舗KEY（ステップ1）
• クライアントID（ステップ3）
• クライアントシークレット（ステップ3）

AnyGift 側で連携の設定を行い、完了したらご連絡します。

商品 CSV のダウンロード方法

CSV で商品をまとめて登録する ときなど、futureshop の商品データが必要な場合は、futureshop の管理画面から次の手順でダウンロードできます。

商品データ

1. 運用 > 商品データ一括取得 > 商品一括登録用ファイル を開きます
2. 「商品一括登録用ファイル」を選びます
3. 「ダウンロード」をクリックします

バリエーションデータ

バリエーション（サイズ・色など）がある商品は、バリエーションのデータもあわせて用意してください。

1. 運用 > 商品データ一括取得 > バリエーション登録用ファイル を開きます
2. 「ダウンロード」をクリックします

画面の名前や場所は futureshop の更新で変わることがあります。見つからない場合は futureshop のマニュアルをご確認ください。

eギフト説明ページの設定方法

eギフトを初めて使うお客様は、「住所を知らない相手にどう贈るのか」「相手は何をすればよいのか」がわからず、購入をためらいがちです。eギフトの贈り方・受け取り方をまとめた説明ページを用意しておくと、安心して購入してもらえます。説明ページに使える画像は デザインキット からダウンロードできます。

ここでは、futureshop の「独自コメント」を使って、商品グループのページに説明を載せる方法を紹介します。

• よい点: 説明と一緒に、商品グループの商品一覧を表示できます
• 注意点: 独自コメントでは置換文字が使えません。スライダーなどを使いたい場合は、HTML・CSS で作り込む必要があります

ステップ1: 商品グループの「コメント設定」を開く

futureshop の管理画面で 運用 > 商品管理 > 商品グループ を開き、説明を載せたい商品グループの「コメント設定」を開きます。

ステップ2: 独自コメントに説明ページの HTML を書く

独自コメントの欄に、eギフト説明ページの HTML を入力します。

ステップ3: フリーパーツで独自コメントを読み込む

コマースクリエイターでフリーパーツを新しく作り、置換文字 {% category.comment_1 %} を入力します。番号は、ステップ2で使った独自コメントの番号に合わせてください。

ステップ4: フリーパーツをレイアウトに配置する

コマースクリエイター > テーマ > レイアウト から商品グループのレイアウトを開き、レイアウト変更で、ステップ3のフリーパーツを配置します。スタートアップテーマの場合は、パーツ配置エリアで「メインエリア」→「コンテンツエリア」→「商品グループエリア」の順に開き、表示したい位置に置きます。

独自コメントの使い方は、futureshop のマニュアル（独自コメントの使い方）もあわせてご覧ください。

フリーページやパーツを使って説明ページを作ることもできます。作り方の相談は AnyGift 担当窓口へご連絡ください。

コマースクリエイターの商品一覧ページにeギフトボタンを表示する

コマースクリエイターをお使いの場合は、商品一覧ページの各商品にもeギフトボタンを表示できます。お客様が商品を探している段階でeギフトに気づけるため、ギフト購入のきっかけが増えます。

仕組みは 商品一覧ページへのeギフトボタン設置 と同じで、futureshop では2つのフリーパーツを作って配置します。

ステップ1: フリーパーツを2つ作る

futureshop の管理画面で commerce creator を開き、パーツ > パーツを追加する > フリーパーツ から、次の2つを作って保存します。

1つめ: AnyGift商品一覧マーカー（商品ごとにボタンを表示する位置の目印）

• パーツ名: AnyGift商品一覧マーカー
• 置換文字: anygift-product-list
• 内容:

<div class="anygift-product-list-marker" data-product-url="{% product.url %}" data-anygift-product-code=""></div>
<script>
    var elements = document.querySelectorAll('.anygift-product-list-marker');
    elements.forEach(function(element) {
        var productUrl = element.getAttribute('data-product-url');
        function getLastSegment(url) {
            var segments = url.split('/');
            return segments.pop() || segments.pop();
        }

        var lastSegment = getLastSegment(productUrl);

        element.setAttribute('data-anygift-product-code', lastSegment);
    });
</script>

2つめ: AnyGift商品一覧ページタグ（AnyGift を読み込むタグ）

• パーツ名: AnyGift商品一覧ページタグ
• 置換文字: anygift-product-list-button
• 内容（YOUR_STORE_ID は AnyGift から発行されたストアIDに置き換えてください）:

<script type="text/javascript">
    window.AnyGift = {
      storeId: 'YOUR_STORE_ID',
    };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js"></script>

パーツ一覧に2つのパーツが表示されていれば完了です。

ステップ2: レイアウトに配置する

1. テーマ > 利用中のテーマ > レイアウト を開き、eギフトボタンを表示したい商品一覧があるレイアウトの「レイアウトを変更する」をクリックします
2. body設定 で「メインエリア」→「コンテンツエリア」→「商品グループエリア」→「商品一覧」の順に開きます
3. 「AnyGift商品一覧マーカー」を、eギフトボタンを表示したい位置にドラッグ&ドロップします（例：カートボタンの下）。画面右下から保存します
4. <head設定>内を変更する を開き、「AnyGift商品一覧ページタグ」を HEAD にドラッグ&ドロップして保存します

同じページにすでに AnyGift のタグを入れている場合は、タグを重ねて入れないでください。

ステップ3: プレビューで確認する

プレビュー > プレビューを表示する から、商品一覧の各商品にeギフトボタンが表示されることを確認します。

スマートフォン用のテーマ（スタートアップテーマのレスポンシブ／スマートフォン）にも表示したい場合は、そのテーマのレイアウトで同じ手順を繰り返してください。

ボタンのデザインを変える

商品一覧のボタンだけデザインを変えたいときは、CSS のセレクターの先頭に必ず .anygift-product-list-marker を付けます。付けないと、商品ページのeギフトボタンにも同じ変更がかかります。

CSS は、commerce creator > テーマ > 利用中のテーマ > オリジナルCSS設定 に書くか、「AnyGift商品一覧マーカー」パーツの末尾に <style></style> を追加してその中に書きます。

/* 「AnyGiftのeギフトとは」のボタンを非表示にする */
.anygift-product-list-marker .anygift-about-button__container {
    display: none !important;
}

/* eギフトボタンの上に余白を空ける */
.anygift-product-list-marker .anygift-gift-ui__container {
    margin: 10px 0 0 0 !important;
}

/* 間違った例：商品ページのボタンにも反映されてしまう */
.anygift-gift-ui__container {
    margin: 10px 0 0 0 !important;
}

ほかのデザイン変更の方法は デザインカスタマイズ をご覧ください。

関連ページ

• futureshop へのタグ設置方法
• 商品・在庫の管理
• 商品一覧ページへのeギフトボタン設置
• 通常購入ボタンの表示制御