概要

Produce_1.mp4

設定方法

{%- unless product.has_only_default_variant -%}
  <div id="selected-variant-info">
    <h3>選択中の商品（バリエーション）</h3>
    <p></p>
  </div>
  <script>
  (()=>{
    // デフォルトで生成されている↑のvariants jsonの中身を取得
    const variationData = JSON.parse(document.querySelector('variant-radios [type="application/json"], variant-selects [type="application/json"]').textContent);

    // 表示中のバリアントIDを取得
    const getCurrentVariantIdFromUrl = () => {
      const defaultVariantId = {{ product.first_available_variant.id }};
      const params = new URLSearchParams(window.location.search);
      const variantId = params.get('variant');
      return variantId ? parseInt(variantId) : defaultVariantId;
    }

    // 表示中のバリアントIDの内容を表示
    const setSelectedVariantInfo = () => {
      const currentVariant = variationData.find((variant) => variant.id === getCurrentVariantIdFromUrl());
      let selectedVariantInfoHTML = '';
      if (currentVariant.option1) {
        selectedVariantInfoHTML += `{{ product.options_with_values[0].name }}：` + currentVariant.option1;
      }
      if (currentVariant.option2) {
        selectedVariantInfoHTML += `<br>{{ product.options_with_values[1].name }}：` + currentVariant.option2;
      }
      if (currentVariant.option3) {
        selectedVariantInfoHTML += `<br>{{ product.options_with_values[2].name }}：` + currentVariant.option3;
      }
      const selectedVariantInfo = document.querySelector('#selected-variant-info p');
      selectedVariantInfo.innerHTML = selectedVariantInfoHTML;
    }
    window.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('variant-radios input[type="radio"], variant-selects select')
      .forEach(input => input.addEventListener('change', () => {
        setTimeout(setSelectedVariantInfo, 0);
      }));
      setSelectedVariantInfo();
    });
  })();
  </script>
  <style>
    #selected-variant-info {
      margin: 1.5em 0;
    }
    #selected-variant-info h3 {
      margin: 0;
      font-size: 12px;
    }
    #selected-variant-info p {
      margin: 0.5em 0 0;
      background-color: #EEE;
      padding: 10px;
      font-weight: 600;
      font-size: 13px;
    }
  </style>
{%- endunless -%}