商品タグに応じて「カートに入れる」ボタンの文字を変更したい

[akiyo]

商品ページにおいて、特定の商品タグを持った商品の「カートに入れる」ボタンの文字を変更したいと考えています。

在庫がある場合…

「カートに入れる」

在庫があり、商品タグに「Pre Order」が含まれる場合…

「予約購入」

在庫がない場合…

「Sold Out」

というように表示させたいと思います。使用しているテーマはLorenza、以下のコードはproduct-buy-buttons.liquidの一部です。

<div class="product-form__controls-group product-form__controls-group--submit">
  <div class="product-form__variants">
    <select
      name="id"
      class="input"
      id="variant-selector-{{ product.id }}"
      data-variant-select
    >
      {% for variant in product.variants %}
        <option value="{{ variant.id }}"
          {%- if variant == current_variant %} selected="selected" {%- endif -%}
        >
          {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
        </option>
      {% endfor %}
    </select>
  </div>

  <div class="product-form__item product-form__item--submit
    {%- if show_dynamic_checkout %} product-form__item--payment-button {%- endif -%}
    {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
  >

    
    <div class="product-form__submit-button-wrapper">

      <button type="submit" name="add"
        {% unless current_variant.available %} aria-disabled="true"{% endunless %}
        aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
        class="bttn product-form__cart-submit{% if show_dynamic_checkout %} bttn--secondary{% endif %}"
        data-lang-available="{{ 'products.product.add_to_cart' | t }}"
        data-lang-unavailable="{{ 'products.product.unavailable' | t }}"
        data-lang-sold-out="{{ 'products.product.sold_out' | t }}"
        data-add-to-cart
        {% unless current_variant.available %}
          disabled="disabled"
        {% endunless %}
      >

        <span data-add-to-cart-text>
          {% unless current_variant.available %}
            {{ 'products.product.sold_out' | t }}
          {% else %}
            {{ 'products.product.add_to_cart' | t }}
          {% endunless %}
        </span>
      </button>
    </div>

    {%- if product.selling_plan_groups.size == 0 -%}
      {% if show_dynamic_checkout and current_variant.available %}
        {{ form | payment_button }}
      {% endif %}
    {%- endif -%}
  </div>
</div>

[Qcoltd]

@akiyo 様

前提条件として、

複数のバリエーションを持つ商品を登録されていない場合に限り、

下記のコードはうまく動作するかと思います。

1つの商品が複数のバリエーションを持つ場合は、

バリエーションを商品詳細ページ上で変更してもうまく「カートに入れる」ボタンの文言が変化しない可能性が高いです。

記載いただいた下記のコードを、

        <span data-add-to-cart-text>
          {% unless current_variant.available %}
            {{ 'products.product.sold_out' | t }}
          {% else %}
            {{ 'products.product.add_to_cart' | t }}
          {% endunless %}
        </span>

下記のように変更してみてはどうでしょうか？

        <span data-add-to-cart-text>
          {% unless current_variant.available %}
            {{ 'products.product.sold_out' | t }}
          {% else %}
            {% if product.tags contains "Pre Order" %}
              予約購入
            {% else %}
              {{ 'products.product.add_to_cart' | t }}
            {% endif %}
          {% endunless %}
        </span>

有料のテーマなので動作検証もできておりませんし、

前述の通り、バリエーションを複数持つ商品の場合、おそらくバリエーション切り替えにうまく対応できないですが、

参考になれば幸いです。

なお、ベンダーにご相談いただくのが一番間違いないので、

もしまだ試していらっしゃらないようなら、

お問い合わせいただくと良いかもしれません。

(キュー田辺)