新しく追加されたメタフィールドのバリエーションで、コンテンツタイプ「色」を商品詳細ページのバリエーションに紐づけたい

解決済
next_kota
観光客
12 1 3

表題の件で質問させてください。

現在、テーマ「Dawn」を利用しています。

下記のように新しく公式で追加された、「バリエーションメタフィールドの定義」にて下記のように作成しています。

  • 名前:色見本
  • ネームスペースとキー:my_fields._color-list
  • variant.metafields.my_fields._color-list

next_kota_0-1630944401150.png

例えば、商品に下記のような「Red」「Green」「Blue」のバリエーションがあったとします。

next_kota_1-1630944658863.png

商品詳細ページのバリエーションオプションの「Red」の画面に行くとページ一番下に、「色」のメタフィールドが存在しています。

そちらを添付のように仮に#ff0000に設定しました。

next_kota_2-1630944826523.png

その設定した色を商品詳細ページのバリエーションボタンの背景色やborder等に設定したいのですが、

どのように設定をすればよいでしょうか?

labelタグに紐づける方法が知りたいです。

next_kota_3-1630944954307.png

 

商品のメタフィールドは有難いことに色々な方が説明してくれていて便利に組み込めているのですが、

バリエーションのメタフィールドの実装方法が分かりません。

お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。

どうぞよろしくお願いします。

 

1 件の受理された解決策

ベストソリューション
mrtc
探検家
42 19 21

成功

新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。

ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。

正しい方法なのかわかりませんが、以下のコードを{%- 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商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法

元の投稿で解決策を見る

3件の返信3
mrtc
探検家
42 19 21

成功

新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。

ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。

正しい方法なのかわかりませんが、以下のコードを{%- 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商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法

元の投稿で解決策を見る

next_kota
観光客
12 1 3

ブログの記事を参考に対応した所、無事に実装が出来ました。

回答を頂きとても感謝しています。

この度は本当に有難うございました。

またこちらが質問を挙げていた際に機会がありましら、どうぞよろしくお願いいたします。

mrtc
探検家
42 19 21

いえいえ、こちらこそ。
ブログを読んでいただき、ありがとうございました。

日本のShopifyがもっともっと盛り上がってくれればと願っております。