Liquid、JavaScriptなどに関する質問
表題の件で質問させてください。
現在、テーマ「Dawn」を利用しています。
下記のように新しく公式で追加された、「バリエーションメタフィールドの定義」にて下記のように作成しています。
例えば、商品に下記のような「Red」「Green」「Blue」のバリエーションがあったとします。
商品詳細ページのバリエーションオプションの「Red」の画面に行くとページ一番下に、「色」のメタフィールドが存在しています。
そちらを添付のように仮に#ff0000に設定しました。
その設定した色を商品詳細ページのバリエーションボタンの背景色やborder等に設定したいのですが、
どのように設定をすればよいでしょうか?
labelタグに紐づける方法が知りたいです。
商品のメタフィールドは有難いことに色々な方が説明してくれていて便利に組み込めているのですが、
バリエーションのメタフィールドの実装方法が分かりません。
お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。
どうぞよろしくお願いします。
解決済! ベストソリューションを見る。
成功
新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。
ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。
正しい方法なのかわかりませんが、以下のコードを{%- 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 }}で出力されるカラー値を、<label>タグにオプション名が「Color」の時だけ出力されるよう設定することで、ご希望の仕様が実現できるかと思います。
{% if option.name == 'Color' %} style="background-color: {{ vc }};"{% endif %}
詳しい設定方法や説明は私のブログにまとめてありますので、是非読んでみて下さい。
Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法
成功
新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。
ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。
正しい方法なのかわかりませんが、以下のコードを{%- 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 }}で出力されるカラー値を、<label>タグにオプション名が「Color」の時だけ出力されるよう設定することで、ご希望の仕様が実現できるかと思います。
{% if option.name == 'Color' %} style="background-color: {{ vc }};"{% endif %}
詳しい設定方法や説明は私のブログにまとめてありますので、是非読んでみて下さい。
Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法
ブログの記事を参考に対応した所、無事に実装が出来ました。
回答を頂きとても感謝しています。
この度は本当に有難うございました。
またこちらが質問を挙げていた際に機会がありましら、どうぞよろしくお願いいたします。
いえいえ、こちらこそ。
ブログを読んでいただき、ありがとうございました。
日本のShopifyがもっともっと盛り上がってくれればと願っております。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024