無料体験を始める

売り切れたバリエーションを非表示にする

商品ページでそれらのバリエーションを削除するか、無効にすることで、お客様が売り切れたバリエーションを選択しないようにできます。

目次

制限事項

このページで説明されているカスタマイズは、以下の場合には機能しません。

商品に複数の商品オプションがある。
Expressテーマを使用し、商品ページの商品をオーバーレイで表示するように設定している。

メモ

このチュートリアルの手順は、「セクション対応」または「セクション非対応」のテーマのどちらを使用しているかによって異なります。セクション対応のテーマを使用している場合は、ドラッグアンドドロップでホームページのレイアウトを配置できます。セクション非対応のテーマを使用している場合は、ドラッグアンドドロップができません。

お使いのテーマがセクションに対応しているかを確認するには、テーマのコードを編集するのページに移動します。セクションディレクトリーにファイルがある場合、セクション対応のテーマを使用していることになります。セクション非対応のテーマは、2016年10月より前にリリースされており、[セクション] ディレクトリにはファイルがありません。

セクション対応のテーマを使用している場合は、[セクション対応のテーマ] ボタンをクリックして表示される手順に従ってください。セクション非対応の古いテーマを使用している場合は、[セクション非対応のテーマ] ボタンをクリックして表示される手順に従ってください。

セクション対応のテーマの手順

テーマの選択

テーマによってカスタマイズの手順は異なります。以下の指示に従う前にテーマのボタンをクリックしてください。

Boundless

Boundless

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Brooklyn

Brooklyn

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.remove();
                    }

                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const radioButtons = section.querySelector('.single-option-radio');
            let variantOptions;

            if (radioButtons) {
              variantOptions = section.querySelectorAll('.single-option-radio input');
            } else {
              variantOptions = section.querySelectorAll('.single-option-selector__radio option');
            }

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    if (radioButtons) {
                      option.nextElementSibling.option.setAttribute('disabled', 'disabled');
                    }

                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Debut

Debut

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Express

Express

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
レイアウトディレクトリーで、theme.liquidをクリックします。
</body>のコードを探します。その上の行に次のコードのみを貼り付けます。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.remove();
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const productJson = document.querySelectorAll('[data-product-json]');

    if (productJson.length > 0) {
      for (let i = 0; i < productJson.length; i++) {
        const current = productJson[i];
        const section = current.closest('[data-section-id]');
        const currentJson = JSON.parse(current.text);

        if (currentJson.options.length === 1) {
          const unavailableVariants = [];

          for (let j = 0; j < currentJson.variants.length; j++) {
            const variant = currentJson.variants[j];

            if (!variant.available) {
              unavailableVariants.push(variant);
            }
          }

          if (unavailableVariants.length > 0) {
            const mutationCallback = function() {
              const variantOptions = section.querySelectorAll('.form__input--select option');

              if (variantOptions.length > 0) {
                for (let k = 0; k < unavailableVariants.length; k++) {
                  const unavailableVariant = unavailableVariants[k];

                  for (let l = 0; l < variantOptions.length; l++) {
                    const option = variantOptions[l];

                    if (unavailableVariant.title === option.value) {
                      option.setAttribute('disabled', 'disabled');
                    }
                  }
                }

                if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                  observer.disconnect();
                }
              }
            }

            const observer = new MutationObserver(mutationCallback);
            const addToCartForm = document.querySelector('form[action*="/cart/add"]');

            mutationCallback();

            if (window.MutationObserver && addToCartForm.length) {
              const config = { childList: true, subtree: true };

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }

              observer.observe(addToCartForm, config);
            }
          }
        }
      }
    }
  });
</script>

[保存] をクリックします。

Minimal

Minimal

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Narrative

Narrative

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、custom.jsをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[data-product-json]');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const section = current.closest('[data-section-id]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Simple

Simple

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Supply

Supply

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

Venture

Venture

このカスタマイズの手順は、売り切れたバリエーションを完全に非表示にするか、それとも単に無効にするかによって異なります。

売り切れたバリエーションを非表示にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.remove();
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

売り切れたバリエーションを無効にする

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
アセットディレクトリーで、theme.jsまたはtheme.js.liquidをクリックします。
ファイルの下部に以下のコードを貼り付けます。

document.addEventListener('DOMContentLoaded', function() {
  const productJson = document.querySelectorAll('[id^=ProductJson-');

  if (productJson.length > 0) {
    for (let i = 0; i < productJson.length; i++) {
      const current = productJson[i];
      const sectionId = current.id.replace('ProductJson-', '');
      const section = document.querySelector('[data-section-id="' + sectionId + '"]');
      const product = JSON.parse(current.text);

      if (product.options.length === 1) {
        const unavailableVariants = [];

        for (let j = 0; j < product.variants.length; j++) {
          const variant = product.variants[j];

          if (!variant.available) {
            unavailableVariants.push(variant);
          }
        }

        if (unavailableVariants.length > 0) {
          const mutationCallback = function() {
            const variantOptions = section.querySelectorAll('.single-option-selector option');

            if (variantOptions.length > 0) {
              for (let k = 0; k < unavailableVariants.length; k++) {
                const unavailableVariant = unavailableVariants[k];

                for (let l = 0; l < variantOptions.length; l++) {
                  const option = variantOptions[l];

                  if (unavailableVariant.title === option.value) {
                    option.setAttribute('disabled', 'disabled');
                  }
                }
              }

              if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
                observer.disconnect();
              }
            }
          }

          const observer = new MutationObserver(mutationCallback);
          const addToCartForm = document.querySelector('form[action*="/cart/add"]');

          mutationCallback();

          if (window.MutationObserver && addToCartForm.length) {
            const config = { childList: true, subtree: true };

            if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
              observer.disconnect();
            }

            observer.observe(addToCartForm, config);
          }
        }
      }
    }
  }
});

[保存] をクリックします。

セクション非対応のテーマの手順

売り切れたバリエーションを非表示にする

セクション非対応のテーマを使用している場合、これらの手順に従って商品ページで売り切れたバリエーションを非表示にします。

手順：

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
新しいスニペットにremove-sold-outと名付けます。
新しいスニペットファイルに、次のコードを貼り付けます。

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.remove();
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

[保存] をクリックします。
レイアウトディレクトリーで、theme.liquidをクリックします。
ファイルの末尾近くで、</body>終了タグの直前に、次のコードを貼り付けます。

{% render 'remove-sold-out' %}

[保存] をクリックします。

売り切れたバリエーションを無効にする

セクション非対応のテーマを使用している場合、これらの手順に従って売り切れたバリエーションを無効にします。バリエーションは商品ページに引き続き表示されますが、選択できません。

手順：

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
スニペットディレクトリーで、[新しいスニペットを追加する] をクリックします。
新しいスニペットにdisable-sold-outと名付けます。
新しいスニペットファイルに、次のコードを貼り付けます。

{% if product.options.size == 1 %}
<script>
  const addToCartForm = document.querySelector('form[action="/cart/add"]');
  if (window.MutationObserver && addToCartForm !== null) {
    if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
      observer.disconnect();
    }
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function() {
      let variantOptions = Array.from(document.querySelectorAll('.single-option-selector option'));
      {% for variant in product.variants %}
      {% unless variant.available %}
      variantOptions.forEach(function(element) {
        if (element.value === {{ variant.title | json }}) {
            element.setAttribute('disabled', '');
        }
      });
      {% endunless %}
      {% endfor %}
      observer.disconnect();
    });
    observer.observe(addToCartForm, config);
  }
</script>
{% endif %}

[保存] をクリックします。
レイアウトディレクトリーで、theme.liquidをクリックします。
ファイルの末尾近くで、</body>終了タグの直前に、次のコードを貼り付けます。

{% render 'disable-sold-out' %}

[保存] をクリックします。

お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。

ログインしてパーソナライズされた回答を得る