カートページに (チェックアウトページではなく)「利用規約に同意する」チェックボックスを追加設定したいのですが、具体的な設定方法を教えていただきたいです。
下記にヘルプドキュメントを参照に、、、とあるのですが、見つけられておりません。
https://help.shopify.com/ja/manual/your-account/GDPR/gdpr-faq
ご教示よろしくお願いいたします。
Supplyのテーマで確認しました。
カートでチェックアウトをする前にカートページで「同意します」にチェックを入れないと、チェックアウトできません。
cart.liquidを以下の”cart.liquid 全てのコード ”でコードを置き換えて下さい。
1.HTMLの追加
<input type="checkbox" id="optin">
<label for="optin">同意します</label>
2.HTMLの修正
チェックアウトボタンに、id=“checkout_btn” を追加する
<button type="submit" name="checkout" id="checkout_btn" class="btn">
3.JavaScriptを追加
<script>
$(function() {
$('#checkout_btn').prop("disabled", true);
$('#optin').change(function() {
if ($(this).prop("checked")) {
$('#checkout_btn').prop("disabled", false);
} else {
$('#checkout_btn').prop("disabled", true);
}
});
});
</script>
cart.liquid 全てのコード
{% if cart.item_count > 0 %}
<form action="/cart" method="post" class="cart-form" novalidate>
<h1 class="h2">{{ 'cart.general.title' | t }}</h1>
{% for item in cart.items %}
<div class="cart-row" data-line="{{ forloop.index }}">
<div class="grid">
<div class="grid-item large--seven-twelfths">
<div class="grid">
<div class="grid-item one-third large--one-quarter">
<a href="{{ item.url }}" class="cart-image">
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid-item two-thirds large--three-quarters">
<a href="{{ item.url }}">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}
{% if settings.product_quantity_message and item.variant.inventory_management and item.variant.inventory_quantity <= 0 and item.variant.incoming %}
{% assign date = item.variant.next_incoming_date | date: format: 'month_day_year' %}
<p><small>{{ 'products.product.will_not_ship_until' | t: date: date }}</small></p>
{% endif %}
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% if forloop.first %}<br>{% endif %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
</div>
</div>
</div>
<div class="grid-item large--five-twelfths medium--two-thirds push--medium--one-third">
<div class="grid">
<div class="grid-item one-half medium-down--one-third text-right">
<input type="number" name="updates[]" id="updates_{{ item.key }}" data-id="{{ item.key }}" value="{{ item.quantity }}" min="0" data-line="{{ forloop.index }}">
</div>
<div class="grid-item one-third medium-down--one-third medium-down--text-left text-right">
{% if item.original_line_price != item.line_price %}
<small class="cart-item--original-price"><s>{{ item.original_price | money }}</s></small>
{% endif %}
<span class="h2">
{% include 'price' with item.price %}
</span>
</div>
<div class="grid-item one-sixth medium-down--one-third text-right">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" data-line="{{ forloop.index }}" class="icon-fallback-text btn-secondary remove">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="fallback-text">{{ 'cart.general.remove' | t }}</span>
</a>
</div>
<div class="grid-item one-whole text-right small--text-left">
{% for discount in item.discounts %}
<small class="cart-item--discount">{{ discount.title }}</small>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart-row">
<div class="grid">
{% if settings.cart_notes_enable %}
<div class="grid-item large--one-half">
<label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="cartSpecialInstructions">{{ cart.note }}</textarea>
</div>
{% endif %}
<div class="grid-item text-right{% if settings.cart_notes_enable %} large--one-half{% endif %}">
<div class="cart-subtotal{% if settings.cart_notes_enable %} cart-subtotal--notes-enabled{% endif %}">
{{ 'cart.general.subtotal' | t }}
<span class="h1 cart-subtotal--price">
{% include 'price' with cart.total_price %}
</span>
{% if cart.total_discounts > 0 %}
{% assign savings = cart.total_discounts | money %}
<small class="cart-subtotal--savings">{{ 'cart.general.savings_html' | t: price: savings }}</small>
{% endif %}
</div>
{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>
<strong> <input type="checkbox" id="optin">
<label for="optin">同意します</label> </strong>
<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">
<button type="submit" name="checkout" **id="checkout_btn"** class="btn">
<span class="icon icon-cart"></span>
{{ 'cart.general.checkout' | t }}
</button>
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</div>
</form>
{% else %}
<div id="EmptyCart">
<h1 class="h2">{{ 'cart.general.title' | t }}</h1>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<p class="cart--continue-message">{{ 'cart.general.continue_browsing_html' | t }}</p>
<p class="cart--cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
</div>
{% endif %}
<strong><script>
$(function() {
$('#checkout_btn').prop("disabled", true);
$('#optin').change(function() {
if ($(this).prop("checked")) {
$('#checkout_btn').prop("disabled", false);
} else {
$('#checkout_btn').prop("disabled", true);
}
});
});
</script></strong>
3 Likes
カートのスクリーンショットです
補足：
モーダルモードのカートでは動きません。
1 Like
教えていただいた通りに試してみたところ、問題なく実装できました。
わかりやすく教えていただきありがとうございます！！
教えていただいた通りに試してみたところ、問題なく実装できました。
わかりやすく教えていただきありがとうございます！！助かりました！
1 Like
{% include 'price' with cart.total_price %}
{% include 'price' with item.price %
上記2箇所の部分で ‘price’ liquidを参照してますが
それが有りませんってエラーです。
テーマは同じものをご使用でしょうか？
テーマが異なるとファイルの構成も異なるため、同じように使用できない場合があります。
また同じテーマでもアップデートなどでコードの内容が変わっているかもしれません。
基本的に、必要最小限のコードカスタムをおすすめします。
ぶっちゃけオプトインしたいだけなら
cart画面のliquidに適当にボタンを追加して
Javascriptで Checkout のボタンを無効化/有効化するだけでいいと思うので
非常に短いコードで実現できると思います。
JavascriptでなくてもHTML/CSSだけでも実現しようと思えば可能です。隣接セレクターなどでラジオボタンのCheckedの有無でCSSのDisplay:none を切り替えるとか。
1 Like
ご返信ありがとうございます。
テーマはDebutにて作成しています。
本当に無知で、テーマごとに違うことすら気づかずで
お恥ずかしい限りです。
ご返信いただいた内容で、検索とうしながら出来るよう頑張ってみます。
ありがとうございました。
1 Like