商品ページに商品説明を表示させたい

[mira0]

テーマはDawnを使用しています。商品ページで、商品のオプションを選択した際に、そのオプションの説明文を表示させたいです。方法などあれば教えていただきたいです。

[Qcoltd]

ご質問いただいている、オプションの説明文についてですが、

商品のバリエーションで登録した各商品の説明文を表示したいという認識で回答させていただきます。

設定方法

1.

説明文用にバリエーションのメタフィールドを作成してください。

ネームスペースとキーは任意のモノに変更してください。

2.

管理画面でテーマのカスタマイズ > デフォルトの商品を選んでいただき、

左メニューの商品情報内にあるブロックを追加をクリックし「カスタムLiquid」を追加し

表示したい位置に順番を変更してください。

3.

カスタムLiquidの入力欄に下記コードを追加し、保存するボタンをクリックしてください。

コード内に2箇所ある「variant.metafields.custom.optiontext.value」の「custom.optiontext」は1で作成したメタフィールドのネームスペースとキーに変更してください。

<script>
const json = [
  {%- for variant in product.variants -%}
    {%- assign customOptionText = variant.metafields.custom.optiontext.value | newline_to_br -%}
    {%- assign customOptionText = customOptionText | strip_newlines -%}
    {"variantId":{{ variant.id }} , "variantMetaStock": "{{ customOptionText }}"},
  {%- endfor -%}
];
const variantRadios = document.querySelector("variant-radios");
variantRadios.addEventListener("click", function() {
  setTimeout(function() {
    const currentUrl = window.location.href;
    const nowUrl = new URL(currentUrl);
    const variantData = nowUrl.searchParams.get("variant");
    const jsonVariant = json.find(data => data.variantId == variantData);
    const optionText = jsonVariant.variantMetaStock;
    const textData = document.getElementById("text-data");
    if( optionText ) {
        textData.innerHTML = optionText;
    }
  }, 10);
});
</script>
{%- assign nowVariantId = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
    {% if variant.id == nowVariantId %}
      {%- assign optionText = variant.metafields.custom.optiontext.value | newline_to_br -%}
    {% endif %}
{%- endfor -%}

<div id="text-data">
  {{ optionText }}
</div>

4.

各バリエーション商品でメタフィールドに説明文を追加してください。

以上で、下記画像のオプションを選択した際、下記赤枠のテキストが変更されます。

ご参考まで。

(キュー小坂)