購入ボタンをメタフィールド情報によって条件分岐して表示したい

[Anonymous_9f4f53df85bfb29647607c6f95f4eafd]

メタフィールドでの条件分岐の書き方に関してアドバイス頂けましたら幸いです。

現在、メタフィールドの情報を用いて購入ボタンの表示が切り替わるようにLiquidのコード編集を行なっております。

前提情報

・「在庫切れの場合でも販売を続ける」にチェックを入れた状態で在庫は管理しない

・メタフィールドはバリエーションメタフィールドを使用しています。

→色ごとにバリエーションのある商品があるため

・メタフィールドのコンテンツタイプは「単一行のテキスト」を使用

条件分岐の内容

・メタフィールドに「0」と入力した場合

"入荷待ち"と表示、購入ボタンは無効化(購入できない)

・メタフィールドに任意のテキストを入力した場合

“任意のテキスト表示” 購入ボタン無効化(購入できない)

・メタフィールドに入力がない場合

購入ボタンを通常通り表示。 購入可能

現在書いているコード

 {%- if product.selected_or_first_available_variant.available -%}
    
      {%- assign out_of_stock = variant.metafields.custom.out_of_stock.value | metafield_tag -%}

      {%- if product.template_suffix == 'pre-order' -%}
      <button type="submit" class="product-form__add-button button button--primary" data-action="add-to-cart">{{ 'product.form.pre_order' | t }}</button>
      
      {%- elsif out_of_stock == '0' -%}
        <button type="submit" class="product-form__add-button button button--disabled" disabled>入荷待ち</button>

      {%- elsif variant.metafields.custom.out_of_stock != blank -%}
        <button type="submit" class="product-form__add-button button button--disabled" disabled>
            {{ variant.metafields.custom.out_of_stock }}
        </button>
      {%- else -%}
        <button type="submit" class="product-form__add-button button button--primary" data-action="add-to-cart">{{ 'product.form.add_to_cart' | t }}</button>

      {%- endif -%

    {%- else -%}

[Qcoltd]

記載いただいているコードでは、ご要望通りの挙動にならないため、どうしたら良いか、という趣旨でのご質問と理解しました。

使用しているテーマが不明なため、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’ -%}より下に記載ください。

{%- 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' -%}
    
  {%- elsif out_of_stock != blank -%}
    
  {%- else -%}
    
  {%- endif -%}
{%- endif -%}

ご使用のテーマによっては仕様が違う可能性もあり、動かない場合もございます。

動作しない場合、テーマ名と表示したい箇所をお教えいただけましたら、具体的な回答ができるかもしれません。

(しかし、解決のお約束はできません。特に有料テーマの場合は回答できない可能性が高いです。)

ご参考まで。

(キュー小坂)