表題の件で質問させてください。
現在、テーマ「Dawn」を利用しています。
下記のように新しく公式で追加された、「バリエーションメタフィールドの定義」にて下記のように作成しています。
- 名前：色見本
- ネームスペースとキー：my_fields._color-list
- variant.metafields.my_fields._color-list
例えば、商品に下記のような「Red」「Green」「Blue」のバリエーションがあったとします。
商品詳細ページのバリエーションオプションの「Red」の画面に行くとページ一番下に、「色」のメタフィールドが存在しています。
そちらを添付のように仮に#ff0000に設定しました。
その設定した色を商品詳細ページのバリエーションボタンの背景色やborder等に設定したいのですが、
どのように設定をすればよいでしょうか？
labelタグに紐づける方法が知りたいです。
商品のメタフィールドは有難いことに色々な方が説明してくれていて便利に組み込めているのですが、
バリエーションのメタフィールドの実装方法が分かりません。
お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。
どうぞよろしくお願いします。
mrtc
2
新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。
ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。
正しい方法なのかわかりませんが、以下のコードを{%- for value in option.values -%}内に入れることで紐付けることは可能です。
{%- capture variant_color -%}
{%- for variant in product.variants -%}
{%- if variant.title contains value -%}
{{ variant.metafields.my_fields._color-list }}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{% assign vc = variant_color | split: ’ ’ | first %}
ちょっと複雑なのですが、{%- capture variant_color -%}にてバリエーションの一覧からオプション名（カラー）を含んだバリエーションのみを選定、そのメタフィールドのカラー値を出力させ、{{ vc }}で出力できるようにする仕組みです。
これをやらないと、1カラーに対し全バリエーションが出力されてしまいますので…。
そして{{ vc }}で出力されるカラー値を、タグにオプション名が「Color」の時だけ出力されるよう設定することで、ご希望の仕様が実現できるかと思います。
{% if option.name == ‘Color’ %} style=“background-color: {{ vc }};”{% endif %}
詳しい設定方法や説明は私のブログにまとめてありますので、是非読んでみて下さい。
Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法
1 Like
ブログの記事を参考に対応した所、無事に実装が出来ました。
回答を頂きとても感謝しています。
この度は本当に有難うございました。
またこちらが質問を挙げていた際に機会がありましら、どうぞよろしくお願いいたします。
1 Like
mrtc
4
いえいえ、こちらこそ。
ブログを読んでいただき、ありがとうございました。
日本のShopifyがもっともっと盛り上がってくれればと願っております。
