Liquid、JavaScriptなどに関する質問
現在開発中ですが、公開後(オーナー権限をクライアントに移行)は、Liteプランで購入ボタンを外部のwordpressサイトに埋め込んで利用します。
ボタンを埋め込んだ商品ページにアクセスした時、バリエーションのセレクタは、商品管理で一番上にあるバリエーションが選択された状態になりますが、このバリエーションが欠品していると「Add to cart」ボタンが「Out of stock」となるので、全バリエーションが欠品していると勘違いされてしまう可能性があります。
商品管理で在庫のあるバリエーションを一番上に持ってくることで、これを防止することもできますが、できれば、セレクタの初期状態をバリエーション未選択としたいです。
できれば、未選択の文言を「(バリエーション名)を選択」とし、また未選択のまま「Add to cart」を押せない工夫も必要だと思います。
どなたかお知恵を貸してください。宜しくお願いいたします。
把握している限りではですが、実用に足る状態での実現は困難です。
そのため、該当商品のオプション名に未選択用の文言を設定して未選択用バリエーションを作成し、在庫を0にして、順序を一番上にするのが現実的かなと思います。
その上で、用意されているボタンのラベル変更方法では対応できないので、一例としては以下のようにproductにeventsを設定しラベルを書き換える形が検討できると思います。
※未選択用バリエーション名を「Please select」で設定したと想定
"product": {
"events": {
"afterRender": function(component){
const iframe = component.view.iframe.el;
const iframeDocument = iframe.contentWindow.document;
const select = iframeDocument.querySelector(".shopify-buy__option-select__select");
const button = iframeDocument.querySelector(".shopify-buy__btn");
//Please select は未選択用バリエーション名を設定
if(select.value === 'Please select'){
//Please select Variant は未選択用バリエーション選択時に表示させたいボタンラベルを設定
button.textContent = 'Please select a variation';
}
},
参考:
https://shopify.github.io/buy-button-js/customization/
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe#scripting
以上ですが、サンプルは試作なので不具合があるかもしれずその点はご了承ください。
JavaScriptの読み書きが難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
また、他の方がより良い方法を回答される可能性もありますので待たれることもお勧めします。
返信が遅くなり申し訳ありません。ありがとうございます、アドバイスいただいた方法を試してみます!また改めてご報告させていただきます。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025