ShopifyやEコマースに関連することを話してみよう
カートページに (チェックアウトページではなく)「利用規約に同意する」チェックボックスを追加設定したいのですが、具体的な設定方法を教えていただきたいです。
下記にヘルプドキュメントを参照に、、、とあるのですが、見つけられておりません。
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> <input type="checkbox" id="optin"> <label for="optin">同意します</label> <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 %} <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>
成功
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> <input type="checkbox" id="optin"> <label for="optin">同意します</label> <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 %} <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>
カートのスクリーンショットです
補足:
モーダルモードのカートでは動きません。
教えていただいた通りに試してみたところ、問題なく実装できました。
わかりやすく教えていただきありがとうございます!!
教えていただいた通りに試してみたところ、問題なく実装できました。
わかりやすく教えていただきありがとうございます!!助かりました!
初めまして。
以前の投稿を参考に設定してみましたがうまくいきません。
突然で申し訳ないのですが、解決方法お分かりでしょうか。
知識ないままに進めているので解決できません。
よろしくお願いします。
{% 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 を切り替えるとか。
ご返信ありがとうございます。
テーマはDebutにて作成しています。
本当に無知で、テーマごとに違うことすら気づかずで
お恥ずかしい限りです。
ご返信いただいた内容で、検索とうしながら出来るよう頑張ってみます。
ありがとうございました。
2023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024APIに関するShopifyサポートShopifyのデフォルト機能では特定の目標を達成するために外部アプリケーションの使用を検討していますか? そんな時はプログラミングの専...
By JapanGuru Sep 22, 2024