[Empire]バリエーション毎で内容の違う商品情報を表示させたい

[構築担当A]

テーマ[Empire]で商品ページのオプションのバリエーション選択から、それぞれのバリエーションでの商品情報が表示されるように実装したいです。

画像のような商品ページのカラーを選択した時にそれぞれのカラーに存在する重量やサイズなどのテキスト情報のエリアが出し分けて出るような実装をしたいのですが、私の勉強不足でイマイチ実装までたどりつくことができません。

アプリを使用しての実装か、メタフィールドを使用しての実装かいづれかの方法でできればと思っているのですが、知見のある方がいらっしゃればご教授いただきたいです。

↓参考に見たURL

Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法 

[Jizo_Inagaki · Accepted solution]

それぞれのカラーに存在する重量やサイズなどのテキスト情報のエリアが出し分けて出る

上記の「出し分け」という部分がどういう状態なのかわかりかねますが、メタフィールドに入れた情報を2箇所に分けて出力するのであれば、以下のような出力方法で記載場所を任意の複数箇所にすれば対応できるかと思います。

https://www.shopify.com/partners/blog/metafields

または「バリエーション選択時に表示を切り替える」ということであれば以下などが考えらると思います。

初期状態が2種類考えられ、それぞれに対して２種類の切り替え方法が考えられるという状態です。

■初期状態

• 最初から全て出力しておき、不要なものはCSSで隠した状態にしておく
• JSON形式などで情報をどこかに出力しておき、必要な情報だけJSで出力した状態にしておく

■バリエーション選択時

• JSを自作し、バリエーション選択のアクションをトリガーにして表示を切り替える
• テーマ内蔵のJSを利用して表示を切り替える

自作する場合、Googleなどで検索いただければ類似の動作をするサンプルコードが見つかると思いますので、そちらを参考にされるとよいかと思います。

テーマ内蔵のJSはコードを読めれば利用できる場合が多いと思います。

「どういう仕組みでバリエーション選択時に価格などを変更しているのか」というあたりを調べていただくと得るものが多いはずです。

■アプリ

https://apps.shopify.com/dynamic-variant-description?locale=ja

出し分けという部分が該当するのかわかりませんが、上記のようなアプリは見つかりました。

要件を満たさない場合はアプリストア内を探していただければと思います。

以上ですが、ご自身で対応が難しい場合はエキスパートやパートナーに依頼されることをお勧めします。

またはテーマのサポートに相談されるのも良いかと思います。

[構築担当A]

Jizo_Inagaki様

返事が遅くなってしまいすみません。

また、色んな実装方法の検討いただきありがとうございます！

ご提案いただいたアプリの動きがかなり自分のイメージしていた動きのものに近く、実際に試してみようと思います！

また、JSでの実装方法も頑張って見れば何がしかの形になりそうな気がいたしましたので、

ぜひ試してみようかと思いました。

ご意見くださり、誠にありがとうございました。