Liquid、JavaScriptなどに関する質問
テーマ[Empire]で商品ページのオプションのバリエーション選択から、それぞれのバリエーションでの商品情報が表示されるように実装したいです。
画像のような商品ページのカラーを選択した時にそれぞれのカラーに存在する重量やサイズなどのテキスト情報のエリアが出し分けて出るような実装をしたいのですが、私の勉強不足でイマイチ実装までたどりつくことができません。
アプリを使用しての実装か、メタフィールドを使用しての実装かいづれかの方法でできればと思っているのですが、知見のある方がいらっしゃればご教授いただきたいです。
↓参考に見たURL
Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法
解決済! ベストソリューションを見る。
成功
それぞれのカラーに存在する重量やサイズなどのテキスト情報のエリアが出し分けて出る
上記の「出し分け」という部分がどういう状態なのかわかりかねますが、メタフィールドに入れた情報を2箇所に分けて出力するのであれば、以下のような出力方法で記載場所を任意の複数箇所にすれば対応できるかと思います。
https://www.shopify.com/partners/blog/metafields
または「バリエーション選択時に表示を切り替える」ということであれば以下などが考えらると思います。
初期状態が2種類考えられ、それぞれに対して2種類の切り替え方法が考えられるという状態です。
■初期状態
■バリエーション選択時
自作する場合、Googleなどで検索いただければ類似の動作をするサンプルコードが見つかると思いますので、そちらを参考にされるとよいかと思います。
テーマ内蔵のJSはコードを読めれば利用できる場合が多いと思います。
「どういう仕組みでバリエーション選択時に価格などを変更しているのか」というあたりを調べていただくと得るものが多いはずです。
■アプリ
https://apps.shopify.com/dynamic-variant-description?locale=ja
出し分けという部分が該当するのかわかりませんが、上記のようなアプリは見つかりました。
要件を満たさない場合はアプリストア内を探していただければと思います。
以上ですが、ご自身で対応が難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
またはテーマのサポートに相談されるのも良いかと思います。
成功
それぞれのカラーに存在する重量やサイズなどのテキスト情報のエリアが出し分けて出る
上記の「出し分け」という部分がどういう状態なのかわかりかねますが、メタフィールドに入れた情報を2箇所に分けて出力するのであれば、以下のような出力方法で記載場所を任意の複数箇所にすれば対応できるかと思います。
https://www.shopify.com/partners/blog/metafields
または「バリエーション選択時に表示を切り替える」ということであれば以下などが考えらると思います。
初期状態が2種類考えられ、それぞれに対して2種類の切り替え方法が考えられるという状態です。
■初期状態
■バリエーション選択時
自作する場合、Googleなどで検索いただければ類似の動作をするサンプルコードが見つかると思いますので、そちらを参考にされるとよいかと思います。
テーマ内蔵のJSはコードを読めれば利用できる場合が多いと思います。
「どういう仕組みでバリエーション選択時に価格などを変更しているのか」というあたりを調べていただくと得るものが多いはずです。
■アプリ
https://apps.shopify.com/dynamic-variant-description?locale=ja
出し分けという部分が該当するのかわかりませんが、上記のようなアプリは見つかりました。
要件を満たさない場合はアプリストア内を探していただければと思います。
以上ですが、ご自身で対応が難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
またはテーマのサポートに相談されるのも良いかと思います。
Jizo_Inagaki様
返事が遅くなってしまいすみません。
また、色んな実装方法の検討いただきありがとうございます!
ご提案いただいたアプリの動きがかなり自分のイメージしていた動きのものに近く、実際に試してみようと思います!
また、JSでの実装方法も頑張って見れば何がしかの形になりそうな気がいたしましたので、
ぜひ試してみようかと思いました。
ご意見くださり、誠にありがとうございました。
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023