FROM CACHE - jp_header
解決済

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

構築担当A
Shopify Partner
14 0 0

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

 

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

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

スクリーンショット 2023-03-14 18.54.23.png

↓参考に見たURL

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

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1033 387 704

成功

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

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

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

 

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

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

 

■初期状態

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

■バリエーション選択時

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

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

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

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

 

■アプリ

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

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

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

 

 

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Jizo_Inagaki
Shopify Partner
1033 387 704

成功

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

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

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

 

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

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

 

■初期状態

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

■バリエーション選択時

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

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

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

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

 

■アプリ

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

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

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

 

 

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
構築担当A
Shopify Partner
14 0 0

Jizo_Inagaki様

 

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

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

 

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

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

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

 

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