Shopifyの購入ボタンをWordPressに埋め込む際、バリエーションセレクタが初期表示で先頭のバリエーションを自動選択し、先頭が欠品だと「Out of stock」が出て全体が欠品と誤認される懸念。初期状態を未選択にし、文言を「（バリエーション名）を選択」、未選択時は「Add to cart」を押せないようにしたい。
既存のBuy Buttonの設定だけで実用的に実現するのは困難との見解。
代替案: 未選択用バリエーション（例: “Please select”）を在庫0で作り先頭に配置。JavaScriptでproduct.events.afterRenderを用い、iframe内のセレクタとボタンを取得し、未選択時にボタンラベルを「Please select a variation」に書き換える（コードスニペットが理解の中心）。
参考資料: Shopify Buy Button JSのカスタマイズドキュメント、MDNのiframeスクリプト解説。
現状の結論: 質問者は提案を試行予定で、後日報告見込み。確定解は未定で、他の解法提案も待機。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の読み書きが難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
また、他の方がより良い方法を回答される可能性もありますので待たれることもお勧めします。
返信が遅くなり申し訳ありません。ありがとうございます、アドバイスいただいた方法を試してみます！また改めてご報告させていただきます。