不要パーツを非表示にする

本ページでは、ギフト設定時に不要なパーツを非表示にする方法をご案内します。

本設定を行うことで、以下のことが実現できます。

• ギフト設定時に、テーマの数量カウンターやメモ欄を非表示にできる

• 購入ページの不要なウィジェット（他社の日時指定アプリなど）を非表示にできる

All in gift経由の注文では、テーマの数量カウンターやメモ欄の内容は注文管理画面に取り込まれません。ギフト設定時は、テーマ側の数量カウンターやメモ欄を非表示にしてください。

eギフトの日時指定は受取者が行うため、他社の日時指定アプリを使用している場合、購入ページでのウィジェットを非表示にしてください。

設定方法は2通りあります。アプリの実装方法に合わせて選んでください。

1. テーマエディタから設定する：All in giftブロックを設置している場合

2. テーマのコードから設定する：LiquidファイルにAll in giftタグを追加している場合

1. 非表示にしたい要素（メモ欄・数量カウンターなど）のクラス名・ID名を、ブラウザの検証ツール（Google Chromeなど）で確認する

   • クラス名やID名は、テーマ等によって異なります

2. オンラインストア > テーマ > カスタマイズ に進む

3. All in giftを実装しているページを選択する

4. All in giftブロックをクリックする

5. アプリ編集画面の一番下にあるeギフト選択時に非表示にする要素のIDやクラス名（複数可、カンマ区切り）に、手順1で確認したクラス名やID名を入力

6. 保存をクリックして完了

◾️参考情報

前提

この方法は、リキッドファイルにAll in giftタグを追加してウィジェットを実装している店舗様向けです。

1. オンラインストア > テーマ > ・・・ > コードを編集をクリック

2. All in giftタグを追加したliquidファイルを開く

3. タグに data-hidden-elements 属性を追加する

data-hidden-elements="ここに非表示にしたい要素のクラス名やID名を入れる"

<!-- 例：商品詳細ページで、テーマの数量カウンター（クラス名 product-form__quantity）を非表示にする -->
<div class="sns-gift-product-container"
     data-hidden-elements=".product-form__quantity">
</div>

4. 画面右上の Save をクリックして完了

これらのパーツを非表示にする場合は、テーマのコード編集が必要です。

1. オンラインストア > テーマ > ・・・ > コードを編集をクリック

2. All in giftタグを追加したliquidファイルを開く

3. 対象のパーツに応じた属性（data-hide-cancel-button など）を追加する

4. 画面右上の Save をクリックして完了

◾️参考情報

仕様

指定したクラス・IDには visibility: hidden が適用されます。要素は画面上で見えなくなりますが、空白（スペース）は残ります。

空白も含めて完全に非表示にしたい場合は、テーマ側でJavaScriptを使い、visibility: hidden が適用された要素に display: none を追加してください。

以下は、.product-form__submit を対象にした例です。

.product-form__submit の部分を、非表示にしたい要素のクラス名・ID名に置き換えてください。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const submitButton = document.querySelector('.product-form__submit');

    if (submitButton) {
      // MutationObserverのコールバック関数
      const callback = (mutationsList) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const styles = window.getComputedStyle(submitButton);
            if (styles.visibility === 'hidden') {
              submitButton.style.display = 'none';
            }else{
              submitButton.style.display = 'block';
            }
          }
        }
      };

      // オブザーバのインスタンスを作成
      const observer = new MutationObserver(callback);
      observer.observe(submitButton, { attributes: true, attributeFilter: ['style'] });
    }
  });
</script>