Liquid、JavaScriptなどに関する質問
現在、商品ページの「カートに追加」を押下すると、チェックアウト画面に遷移します。
これをカートページにと飛ぶように変更したいと考えております。
ご教示いただけますと幸いです。
よろしくお願いいたします。
▽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>
解決済! ベストソリューションを見る。
成功
質問者様と同じテーマを使用しているわけではないので、
十分な調査ができたとは言い難いのですが、
下記のコードが怪しそうです。
{% 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の海外コミュニティに投稿された質問です。
質問者様とは逆に、カートをスキップして購入画面に行きたいという質問ですね。
その方法として、下記のコードを挿入する、と言っています。
<input type="hidden" name="return_to" value="/checkout/" />
同様のコードが質問者様のテンプレートにもあるようです。
解決策としては、下記いずれかになるかと思います。
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" />
を削除したコードの代わりに設置すると良いです。
このコードについては、同じく海外のコミュニティで言及されていますのでご興味あればご確認ください。
ご参考までに。
(キュー田辺)
成功
質問者様と同じテーマを使用しているわけではないので、
十分な調査ができたとは言い難いのですが、
下記のコードが怪しそうです。
{% 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の海外コミュニティに投稿された質問です。
質問者様とは逆に、カートをスキップして購入画面に行きたいという質問ですね。
その方法として、下記のコードを挿入する、と言っています。
<input type="hidden" name="return_to" value="/checkout/" />
同様のコードが質問者様のテンプレートにもあるようです。
解決策としては、下記いずれかになるかと思います。
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" />
を削除したコードの代わりに設置すると良いです。
このコードについては、同じく海外のコミュニティで言及されていますのでご興味あればご確認ください。
ご参考までに。
(キュー田辺)
ご丁寧にありがとうございます!上記で解決しました!
ベストソリューションに選ばせていただきます!
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024