通常の「カートに追加」ボタンを非表示にする

eギフト専用商品や選べるギフトの親商品では、通常購入とeギフト購入が混在しないよう、対象商品だけ通常の「カートに追加」ボタンを非表示にする場合があります。

この設定を検討する商品

選べるギフトの親商品
eギフト専用商品
金券型ギフト商品
店舗型ギフト商品

紙のチケットなど、通常購入も提供する商品では非表示にする必要がない場合があります。

商品ごとの販売方法を決めてから設定してください。

設定前に確認すること

確認項目	確認する内容
対象商品	通常購入を停止する商品を商品コード単位で整理する
購入導線	商品ページ、商品一覧、クイック購入、追従ボタンなどを洗い出す
バリエーション	色・サイズ変更後も対象商品を正しく識別できるか確認する
テーマ管理	複製テーマまたはテスト環境で変更できるか確認する
運用担当	商品追加やテーマ更新時に再確認する担当者を決める

公開中のテーマを直接変更しないでください

通常購入ボタンの表示方法はECカートとテーマによって異なります。変更前にテーマやテンプレートを複製し、テスト環境で通常購入とeギフト購入の両方を確認してください。

設定の進め方

対象商品を決める
通常購入を提供しない商品だけを一覧にします。
対象外の商品が誤って購入できなくならないよう、商品単位で管理します。
すべての通常購入導線を確認する
商品ページのメインボタンだけでなく、商品一覧、クイック購入、固定表示される購入ボタン、数量選択、定期購入なども確認します。
テーマ担当者が表示制御を設定する
ECサイトの構成に合わせて、対象商品だけ通常購入導線を非表示にします。
具体的な設定値と実装方法は、導入時に案内された構成別手順を使用してください。
通常購入とeギフト購入をテストする
対象商品ではeギフト購入だけが利用できます。
対象外の商品では通常購入が利用できることを確認します。

通常購入ボタンを非表示にすると、eギフト購入ボタンだけが表示されます。

本番公開後も再確認する
商品追加、テーマ更新、購入アプリの追加後は、同じテストを再実施します。

JavaScriptで非表示にする場合

以下は、商品コードに応じて通常の「カートに追加」ボタンを非表示にする例です。selectableGiftProductCodes に対象商品の商品コードを設定し、{{ Product.id }} はテーマで利用できる商品コードの変数に置き換えてください。

コードを適用する前に確認してください

以下のセレクター（.add-cart-button など）はテーマによって異なります。ブラウザの開発者ツールで実際のボタンのクラス名を確認し、テスト用の複製テーマで動作を確認してから公開してください。

カートに追加ボタンが1つの場合

const addCartButton = document.querySelector('.add-cart-button');
const selectableGiftProductCodes = [
  '商品コード1',
  '商品コード2'
];
const isSelectableGiftProduct = selectableGiftProductCodes.includes('{{ Product.id }}');

if (isSelectableGiftProduct && addCartButton) {
  addCartButton.style.display = 'none';
}

カートに追加ボタンが複数ある場合

商品ページの上部・下部などに通常購入ボタンが複数ある場合は、対象となるセレクターをカンマ区切りで指定します。

const addCartButtons = document.querySelectorAll(
  '.add-cart-button-top, .add-cart-button-bottom'
);
const selectableGiftProductCodes = [
  '商品コード1',
  '商品コード2'
];
const isSelectableGiftProduct = selectableGiftProductCodes.includes('{{ Product.id }}');

if (isSelectableGiftProduct) {
  addCartButtons.forEach((button) => {
    button.style.display = 'none';
  });
}

Futureshopをご利用の場合

Futureshopでは、商品URLの末尾から商品番号を取得して判定する例です。「親商品番号1」などを対象商品の親商品番号に置き換えてください。

<script>
document.addEventListener('DOMContentLoaded', function () {
  const productUrl = '{% product.url %}';
  const lastSlashIndex = productUrl.lastIndexOf('/');
  const productCode = lastSlashIndex !== -1
    ? productUrl.substring(lastSlashIndex + 1)
    : productUrl;
  const selectableGiftProductCodes = [
    '親商品番号1',
    '親商品番号2',
    '親商品番号3'
  ];

  if (selectableGiftProductCodes.includes(productCode)) {
    const purchaseArea = document.querySelector('.fs-c-variationAndActions');
    if (purchaseArea) {
      purchaseArea.style.display = 'none';
    }
  }
});
</script>

テーマのカスタマイズによって指定が必要なクラス名が異なる場合があります。

Futureshopで要素のクラス名が異なる場合は、.fs-c-variationAndActions の部分を対象の購入エリアのセレクターに変更してください。

この例では、通常購入ボタンとあわせて数量セレクターも非表示になります。

公開前チェックリスト

[ ] 対象商品では通常の「カートに追加」ボタンが表示されない
[ ] 対象商品ではeギフトボタンが表示される
[ ] 対象外の商品では通常購入ボタンが表示される
[ ] 商品一覧、クイック購入、追従ボタンなど別の購入導線を確認した
[ ] PCとスマートフォンの両方で確認した
[ ] 商品のバリエーションを切り替えても表示状態が正しい
[ ] 在庫切れ・販売停止時の表示を確認した
[ ] テーマ変更後に再確認する担当者が決まっている

想定どおりに表示されない場合

まず、対象商品と対象外商品の両方で再現条件を記録します。

テーマ名、ページURL、商品、バリエーション、PC・スマートフォンの別、発生時の画面を揃えてください。

次の点を確認してください。

商品コードが selectableGiftProductCodes に正しく設定されている
{{ Product.id }} が利用中のテーマで正しい商品コードに置き換わっている
ボタンが複数ある場合に、すべてのセレクターを指定している
Futureshopの場合、商品URL末尾の商品番号と対象商品番号が一致している
ブラウザの開発者ツールで確認したクラス名とコード内のセレクターが一致している
商品ページ以外の商品一覧、クイック購入、追従ボタンなどにも通常購入導線が残っていない

表示制御はECカートとテーマに依存します。

上記を確認しても解決しない場合は、公開中テーマへ直接変更を加えず、テーマを管理する制作会社または技術担当者へ相談してください。

必要に応じて、確認したテーマ名・ページURL・商品コード・画面キャプチャを添えてAnyGiftサポートへお問い合わせください。