購入ボタンのセレクタの初期状態をバリエーション未選択にしたい。

[yanana]

現在開発中ですが、公開後（オーナー権限をクライアントに移行）は、Liteプランで購入ボタンを外部のwordpressサイトに埋め込んで利用します。

ボタンを埋め込んだ商品ページにアクセスした時、バリエーションのセレクタは、商品管理で一番上にあるバリエーションが選択された状態になりますが、このバリエーションが欠品していると「Add to cart」ボタンが「Out of stock」となるので、全バリエーションが欠品していると勘違いされてしまう可能性があります。

商品管理で在庫のあるバリエーションを一番上に持ってくることで、これを防止することもできますが、できれば、セレクタの初期状態をバリエーション未選択としたいです。

できれば、未選択の文言を「（バリエーション名）を選択」とし、また未選択のまま「Add to cart」を押せない工夫も必要だと思います。

どなたかお知恵を貸してください。宜しくお願いいたします。

[Jizo_Inagaki]

把握している限りではですが、実用に足る状態での実現は困難です。

そのため、該当商品のオプション名に未選択用の文言を設定して未選択用バリエーションを作成し、在庫を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の読み書きが難しい場合はエキスパートやパートナーに依頼されることをお勧めします。

また、他の方がより良い方法を回答される可能性もありますので待たれることもお勧めします。

[yanana]

返信が遅くなり申し訳ありません。ありがとうございます、アドバイスいただいた方法を試してみます！また改めてご報告させていただきます。