記載いただいているコードでは、ご要望通りの挙動にならないため、どうしたら良いか、という趣旨でのご質問と理解しました。
使用しているテーマが不明なため、ShopifyのDawnテーマを元に説明させていただきます。
Dawnテーマではバリエーションを選択した際、JavaScriptのpushStateでURLを変更し、ページ遷移しているように見せかけているだけで、実際にはページ遷移が発生していません。
記載いただいている「product.selected_or_first_available_variant.available」はページ遷移した際に動作するため、バリエーションを選択した際ページ遷移を伴わないテーマですと、商品ページへアクセスした時のみ期待通りに動作します。
ですので、バリエーションを選択した際に情報を取得しボタンを書き換えるには、JavaScriptで、変更されたvariantの情報を取得し内容を変更する必要があります。
サンプルのコードとして、Dawnテーマで動作するコードを記載させていただきます。
下記コートは、{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}より下に記載ください。
<script>
const json = [
{%- for variant in product.variants -%}
{"variantId":{{ variant.id }} , "variantMetaStock": "{{ variant.metafields.custom.out_of_stock.value }}"},
{%- endfor -%}
];
const variantRadios = document.querySelector("variant-radios");
variantRadios.addEventListener("click", function() {
setTimeout(function() {
const currentUrl = window.location.href;
const nowUrl = new URL(currentUrl);
const variantData = nowUrl.searchParams.get("variant");
const urlvariantId = variantData;
const jsonVariant = json.find(data => data.variantId == urlvariantId);
const out_of_stock = jsonVariant.variantMetaStock;
const button = document.getElementById("myButton");
if( out_of_stock == '0' ){
button.innerHTML = "入荷待ち";
button.classList.remove("button--primary");
button.classList.add("button--disabled");
button.disabled = true;
button.removeAttribute("data-action");
} else if( out_of_stock ) {
button.innerHTML = out_of_stock;
button.classList.add("button--disabled");
button.classList.remove("button--primary");
button.disabled = true;
button.removeAttribute("data-action");
} else {
button.innerHTML = "{{ 'products.product.add_to_cart' | t }}";
button.classList.add("button--primary");
button.classList.remove("button--disabled");
button.disabled = false;
button.setAttribute("data-action", "add-to-cart");
}
}, 10);
});
</script>
{%- if product.selected_or_first_available_variant.available -%}
{%- assign now_variant_id = product.selected_or_first_available_variant.id -%}
{%- for variant in product.variants -%}
{% if variant.id == now_variant_id %}
{%- assign out_of_stock = variant.metafields.custom.out_of_stock.value -%}
{% endif %}
{%- endfor -%}
{%- if out_of_stock == '0' -%}
<button type="submit" id="myButton" class="product-form__add-button button button--full-width button--disabled" disabled>入荷待ち</button>
{%- elsif out_of_stock != blank -%}
<button type="submit" id="myButton" class="product-form__add-button button button--full-width button--disabled" disabled>
{{ out_of_stock }}
</button>
{%- else -%}
<button type="submit" id="myButton" class="product-form__add-button button button--full-width button--primary" data-action="add-to-cart">{{ 'products.product.add_to_cart' | t }}</button>
{%- endif -%}
{%- endif -%}
ご使用のテーマによっては仕様が違う可能性もあり、動かない場合もございます。
動作しない場合、テーマ名と表示したい箇所をお教えいただけましたら、具体的な回答ができるかもしれません。
(しかし、解決のお約束はできません。特に有料テーマの場合は回答できない可能性が高いです。)
ご参考まで。
(キュー小坂)
