FROM CACHE - jp_header

メタフィールドのバリエーションの表示

解決済

メタフィールドのバリエーションの表示

noi
Shopify Expert
21 0 5

お世話になります。

既出の問題かもしれませんが、解決に至らなかったため質問させていただきます。

バリエーションにメタフィールドを追加することができますが、その表示はどのように行うことができるのでしょうか?

 

サイズのバリエーションがS、M、Lとあり、サイズによって重さ(g)や大きさ(cm)のメタフィールドを作成しています。それらをバリエーションに合わせて表示することができますでしょうか?

1 件の受理された解決策

Qcoltd
Shopify Partner
1058 435 427

成功

@noi 様

 

例えば、大きさ(cm)のメタフィールドを下記のように設定したとします。

namaspace: custom

key: length

 

この時、選択中のバリエーションの大きさのメタフィールドを出力するには、下記のようにします。

{{ product.selected_variant.metafields.custom.length }}

 

しかし、

Shopifyの最近のテーマは、商品詳細ページで、バリエーションを切り替えた際に、

そのバリエーションのページに遷移するのではなく、

JavaScriptでレンダリングし直すのが主流になっています。

 

そのため、上記のliquidタグを記載しただけでは、

バリエーションを切り替えた際に、

切り替え先のバリエーションのメタフィールドの情報は表示されす、

最初にランディングした際のバリエーションのメタフィールドの情報が表示され続けます。

(バリエーションを切り替えた後、再読み込みをすれば、切り替え先のバリエーションのメタフィールドの情報が表示されます。)

 

これを解決するには、

JavaScriptで、

「バリエーション切り替えを検知し、切り替え先のバリエーションの情報に入れ替える」処理、

を作る必要があります。

 

ご参考まで。

(キュー田辺)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1058 435 427

成功

@noi 様

 

例えば、大きさ(cm)のメタフィールドを下記のように設定したとします。

namaspace: custom

key: length

 

この時、選択中のバリエーションの大きさのメタフィールドを出力するには、下記のようにします。

{{ product.selected_variant.metafields.custom.length }}

 

しかし、

Shopifyの最近のテーマは、商品詳細ページで、バリエーションを切り替えた際に、

そのバリエーションのページに遷移するのではなく、

JavaScriptでレンダリングし直すのが主流になっています。

 

そのため、上記のliquidタグを記載しただけでは、

バリエーションを切り替えた際に、

切り替え先のバリエーションのメタフィールドの情報は表示されす、

最初にランディングした際のバリエーションのメタフィールドの情報が表示され続けます。

(バリエーションを切り替えた後、再読み込みをすれば、切り替え先のバリエーションのメタフィールドの情報が表示されます。)

 

これを解決するには、

JavaScriptで、

「バリエーション切り替えを検知し、切り替え先のバリエーションの情報に入れ替える」処理、

を作る必要があります。

 

ご参考まで。

(キュー田辺)

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

田辺さま

 

JavaScriptが必要になるとのことありがとうございます。

 

残念ながらノーコードでは難しそうですね。

お忙しい中、ご回答ありがとうございます。