FROM CACHE - jp_header

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

mira0
Shopify Partner
116 0 3

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

1件の返信1

Qcoltd
Shopify Partner
1057 434 422

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

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

 

設定方法

1.

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

Qcoltd_0-1679655162228.png

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

 

2.

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

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

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

Qcoltd_1-1679655162223.png

 

3.

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

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

Qcoltd_2-1679655162165.png

<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.

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

Qcoltd_3-1679655162195.png

 

 

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

Qcoltd_4-1679655162172.png

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/