FROM CACHE - jp_header

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

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

akiyo
訪問者
1 0 0

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

 

在庫がある場合…

「カートに入れる」

 

在庫があり、商品タグに「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>

 

 

 

 

 

 

 

1件の返信1

Qcoltd
Shopify Partner
1059 435 427

@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>

 

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

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

参考になれば幸いです。

 

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

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

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

 

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/