概要

設定方法

{
  "type": "variant_comment",
  "name": "t:sections.main-product.blocks.variant_comment.name",
  "limit": 1
},

"variant_comment": {
  "name": "バリエーションコメント"
},

{%- when 'variant_comment' -%}
  {%- unless product.has_only_default_variant -%}
    <div id="variant-comment"></div>
    <script>
    (()=>{
      const variationComments = 
      [{%- for variant in product.variants -%}
        {id:{{ variant.id }}, comment: '{{ variant.metafields.custom.comment | newline_to_br | strip_newlines }}'},
      {%- endfor -%}];
      // URLパラメータからvariant idを取得（無ければデフォルトidを設定）
      const defaultVariantId = {{ product.first_available_variant.id }};
      const extractVariantIdFromUrl = () => {
        const params = new URLSearchParams(window.location.search);
        const variantId = params.get('variant');
        return variantId ? parseInt(variantId) : defaultVariantId;
      }
      // variant id に合致するコメントを取得
      const findCommentByVariantId = (id) => {
          const variant = variationComments.find(variant => variant.id === id);
          return variant ? variant.comment : '';
      };
      // バリアントコメントを更新
      const updateVariantComment = () => {
        const current_variantId = extractVariantIdFromUrl();
        const comment = findCommentByVariantId(current_variantId);
        const commentElement = document.getElementById('variant-comment');
        commentElement.innerHTML = comment;
      }
      window.addEventListener('DOMContentLoaded', (event) => {
        // バリアントピッカーの変更イベントをトリガーにバリアントコメントを更新
        document.querySelectorAll('variant-radios input[type="radio"], variant-selects select')
        .forEach(input => input.addEventListener('change', () => {
          setTimeout(updateVariantComment, 100);
        }));
        updateVariantComment();
      });
    })();
    </script>
  {%- endunless -%}