shopifyでオプションを選択するとテキストを表示させるようにしたい。オプションが3つあり、メタフィールドでテキストを設定して、それを商品ページに3つ表示させ、displaynoneで非表示にして、オプションを選択すると、そのオプションだけを表示させるように実装したいです。
手順ややり方やコードなどを教えていただきたいです。
ご質問いただいている、3つのオプション説明文を表示し非表示するやり方ですが、
下記のように設定いただけましたら、ご希望の設定になるかと思われます。
ページが開いた際に選択されているオプションの説明文が表示されます。
ご使用のテーマが不明なため、ShopifyのDawnテーマを元にした説明となります。
テーマによっては仕様が違う可能性もあり、動かない場合もございます。
動作しない場合、プライベートメッセージなどで、ストアの情報を頂戴できればもう少し具体的な回答ができるかもしれませんので、差し支えないようでしたらご連絡ください。
(しかし、解決のお約束はできません。特に有料テーマの場合は回答できない可能性が高いです。)
設定方法
1.
説明文用にバリエーションのメタフィールドを作成してください。
ネームスペースとキーは任意のモノに変更してください。
2.
管理画面でテーマのカスタマイズ > デフォルトの商品を選んでいただき、
左メニューの商品情報内にあるブロックを追加をクリックし「カスタムLiquid」を追加し
表示したい位置に順番を変更してください。
3.
カスタムLiquidの入力欄に下記コードを追加し、保存するボタンをクリックしてください。
「variant.metafields.custom.optiontext.value」の「custom.optiontext」は1で作成したメタフィールドのネームスペースとキーに変更してください。
{%- assign nowVariantId = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
{%- assign optionText = variant.metafields.custom.optiontext.value | newline_to_br -%}
{% if variant.id == nowVariantId %}
{{ optionText }}
{% else %}
{{ optionText }}
{% endif %}
{%- endfor -%}
4.
管理画面でテーマのカスタマイズ > デフォルトの商品を選んでいただき、
左メニューの商品情報をクリックし「カスタムCSS」を選択し下記CSSを追加してください。
.text-data {
display:none;
}
.text-data.on-display {
display:block;
}
5.
各バリエーション商品でメタフィールドに説明文を追加してください。
以上で、下記画像のオプションを選択した際、下記赤枠のテキストが変更されます。
ご参考まで。
(キュー小坂)