FROM CACHE - jp_header
解決済

カートに追加のボタンの飛び先を変更したい

Sho1
訪問者
2 0 0

現在、商品ページの「カートに追加」を押下すると、チェックアウト画面に遷移します。

これをカートページにと飛ぶように変更したいと考えております。

ご教示いただけますと幸いです。

よろしくお願いいたします。

 

▽product-form.liquid

  {% if type == 'block' and block.settings.show_payment_button %}
    {% assign show_payment_button = true %}
  {% elsif section.settings.show_payment_button %}
    {% assign show_payment_button = true %}
  {% elsif show_payment_button_quickshop %}
    {% assign show_payment_button = true %}
  {% else %}
    {% assign show_payment_button = false %}
  {% endif %}

  {% assign variant = product.selected_or_first_available_variant %}

  <div class="product_form init
        {% if product.variants.size > 1 or product.options.size > 1 %}product_form_options{% endif %}"
        id="product-form-{{ product.id }}{{ section.id }}{{ block.id }}"
        data-money-format="{{ shop.money_format | strip_html }}"
        data-shop-currency="{{ shop.currency }}"
        data-select-id="product-select-{{ product.id }}{{ context }}{{ section.id }}{{ block.id }}"
        data-enable-state="{% if template contains 'product' %}true{% else %}false{% endif %}"
        data-product="{{ product | json | escape }}"
        {% if settings.limit_quantity or settings.display_inventory_left %}
          data-variant-inventory='[{%- for v in product.variants -%}{"id":{{v.id}},"inventory_quantity":{{v.inventory_quantity}},"inventory_management":"{{v.inventory_management}}","inventory_policy":"{{v.inventory_policy}}"}{% if forloop.last == false %},{% endif %}{%- endfor -%}]'
        {% endif %}
        data-product-id="{{ product.id }}">
    {% form 'product', product %}

    {% if product.available %}
      {% if settings.display_inventory_left %}
        <div class="items_left">
          {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
            {% capture items_left_text %}
              {% if variant.inventory_quantity == 1 %}
                {{ 'products.product.items_left_count.one' | t }}
              {% else %}
                {{ 'products.product.items_left_count.other' | t }}
              {% endif %}
            {% endcapture %}
            {% if variant.inventory_quantity <= settings.inventory_threshold %}
              {{ variant.inventory_quantity }} {{ items_left_text }}
            {% endif %}
          {% endif %}
        </div>
      {% endif %}
    {% endif %}

    {% if product.options.size > 1 %}
      <div class="select">
        <select id="product-select-{{ product.id }}{{ context }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
      <div class="select">
        <label>{{ product.options[0] }}</label>
        <select id="product-select-{{ product.id }}{{ context }}{{ section.id }}{{ block.id }}" name="id">
          {% for v in product.variants %}
            <option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="id" value="{{ variant.id }}" />
    {% endif %}

    {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
      <div class="swatch_options">
        {% for option in product.options %}
          {% render 'product-swatch',
                  option: option,
                  product: product
          %}
        {% endfor %}
      </div>
    {% endif %}

    <div class="purchase-details smart-payment-button--{{ show_payment_button }}">
      {% if settings.display_product_quantity and product.available %}
        <div class="purchase-details-wrapper__first">
		  <label>購入数</label>
          <div class="purchase-details__quantity">
            <label class="visuallyhidden" for="quantity">{{ 'products.product.quantity' | t }}</label>
            <span class="product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span>
            <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" {% if settings.limit_quantity and variant.inventory_management != blank and variant.inventory_policy == "deny" %}max="{{ variant.inventory_quantity }}"{% endif %} />
            <span class="product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
          </div>
        </div>
      {% endif %}
      <div class="purchase-details-wrapper__second">
        <div class="{% if show_payment_button %}purchase-details__buttons{% else %}purchase-details__buttons full-width{% endif %}">
          {% if settings.cart_action == 'reload_page' %}
            <input type="hidden" name="return_to" value="back" />
          {% elsif settings.cart_action == 'redirect_checkout' %}
            <input type="hidden" name="return_to" value="/checkout" />
          {% endif %}

          {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{% if product.available %}{{ 'products.product.add_to_cart' | t }}{% else %}SOLD OUT{% endif %}{% endif %}{% endcapture %}

          <div class="atc-btn-container {% if product.available == false %}disabled{% endif %}">
            <button type="{% if settings.cart_action == 'ajax' %}button{% else %}submit{% endif %}" name="add" class="{% if settings.cart_action == 'ajax' %} ajax-submit {% endif %} action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
              <img class="add-to-cart__icon" src="{{ 'cart.svg' | asset_url }}"><span class="text">{{ add_to_cart_label }}</span>
            </button>
            {% if show_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endform %}
</div>

 

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1050 429 412

成功

質問者様と同じテーマを使用しているわけではないので、

十分な調査ができたとは言い難いのですが、

下記のコードが怪しそうです。

 

          {% if settings.cart_action == 'reload_page' %}
            <input type="hidden" name="return_to" value="back" />
          {% elsif settings.cart_action == 'redirect_checkout' %}
            <input type="hidden" name="return_to" value="/checkout" />
          {% endif %}

 

下記は、Shopifyの海外コミュニティに投稿された質問です。

https://community.shopify.com/c/shopify-discussions/solved-how-can-i-skip-the-cart-and-go-straight-t...

 

質問者様とは逆に、カートをスキップして購入画面に行きたいという質問ですね。

その方法として、下記のコードを挿入する、と言っています。

 

<input type="hidden" name="return_to" value="/checkout/" />

 

同様のコードが質問者様のテンプレートにもあるようです。

 

解決策としては、下記いずれかになるかと思います。

  1. 該当コードを削除する
  2. テンプレート全体を"settings.cart_action"で検索し、その値が"redirect_checkout"になっている場合、その値を空値にする。もし、カート追加と同時に、カートに遷移させず、商品情報ページに止まらせたい場合は、"settings.cart_action"を"reload_page"に変更すると良いです。

 

2の方が挙動をコントロールできるのでお勧めですが、

よく分からないという場合は、

下記を全て削除し、

          {% if settings.cart_action == 'reload_page' %}
            <input type="hidden" name="return_to" value="back" />
          {% elsif settings.cart_action == 'redirect_checkout' %}
            <input type="hidden" name="return_to" value="/checkout" />
          {% endif %}

カート追加と同時に、カートに遷移させたい場合はそれで完了。

 

カート追加時には、カートに遷移させたくない場合には、

<input type="hidden" name="return_to" value="back" />

を削除したコードの代わりに設置すると良いです。

このコードについては、同じく海外のコミュニティで言及されていますのでご興味あればご確認ください。

https://community.shopify.com/c/shopify-scripts/add-to-cart-button-redirects-to-cart-page-and-change...

 

ご参考までに。

(キュー田辺)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1050 429 412

成功

質問者様と同じテーマを使用しているわけではないので、

十分な調査ができたとは言い難いのですが、

下記のコードが怪しそうです。

 

          {% if settings.cart_action == 'reload_page' %}
            <input type="hidden" name="return_to" value="back" />
          {% elsif settings.cart_action == 'redirect_checkout' %}
            <input type="hidden" name="return_to" value="/checkout" />
          {% endif %}

 

下記は、Shopifyの海外コミュニティに投稿された質問です。

https://community.shopify.com/c/shopify-discussions/solved-how-can-i-skip-the-cart-and-go-straight-t...

 

質問者様とは逆に、カートをスキップして購入画面に行きたいという質問ですね。

その方法として、下記のコードを挿入する、と言っています。

 

<input type="hidden" name="return_to" value="/checkout/" />

 

同様のコードが質問者様のテンプレートにもあるようです。

 

解決策としては、下記いずれかになるかと思います。

  1. 該当コードを削除する
  2. テンプレート全体を"settings.cart_action"で検索し、その値が"redirect_checkout"になっている場合、その値を空値にする。もし、カート追加と同時に、カートに遷移させず、商品情報ページに止まらせたい場合は、"settings.cart_action"を"reload_page"に変更すると良いです。

 

2の方が挙動をコントロールできるのでお勧めですが、

よく分からないという場合は、

下記を全て削除し、

          {% if settings.cart_action == 'reload_page' %}
            <input type="hidden" name="return_to" value="back" />
          {% elsif settings.cart_action == 'redirect_checkout' %}
            <input type="hidden" name="return_to" value="/checkout" />
          {% endif %}

カート追加と同時に、カートに遷移させたい場合はそれで完了。

 

カート追加時には、カートに遷移させたくない場合には、

<input type="hidden" name="return_to" value="back" />

を削除したコードの代わりに設置すると良いです。

このコードについては、同じく海外のコミュニティで言及されていますのでご興味あればご確認ください。

https://community.shopify.com/c/shopify-scripts/add-to-cart-button-redirects-to-cart-page-and-change...

 

ご参考までに。

(キュー田辺)

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

ご丁寧にありがとうございます!上記で解決しました!

ベストソリューションに選ばせていただきます!