FROM CACHE - jp_header
解決済

カートページへの「利用規約に同意する」チェックボックスの追加方法

U_MA
観光客
5 0 1

カートページに (チェックアウトページではなく)「利用規約に同意する」チェックボックスを追加設定したいのですが、具体的な設定方法を教えていただきたいです。

下記にヘルプドキュメントを参照に、、、とあるのですが、見つけられておりません。

https://help.shopify.com/ja/manual/your-account/GDPR/gdpr-faq

 

ご教示よろしくお願いいたします。

1 件の受理された解決策

Takuma
Shopify Partner
44 7 25

成功

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 }}&amp;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>

 

 

 

 

元の投稿で解決策を見る

8件の返信8

Takuma
Shopify Partner
44 7 25

成功

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 }}&amp;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>

 

 

 

 

Takuma
Shopify Partner
44 7 25

カートのスクリーンショットです

Takuma
Shopify Partner
44 7 25

補足:

モーダルモードのカートでは動きません。

U_MA
観光客
5 0 1

教えていただいた通りに試してみたところ、問題なく実装できました。

わかりやすく教えていただきありがとうございます!!

U_MA
観光客
5 0 1

教えていただいた通りに試してみたところ、問題なく実装できました。

わかりやすく教えていただきありがとうございます!!助かりました!

goodimpact
訪問者
2 0 1

初めまして。

以前の投稿を参考に設定してみましたがうまくいきません。

 

突然で申し訳ないのですが、解決方法お分かりでしょうか。

知識ないままに進めているので解決できません。

 

よろしくお願いします。

スクリーンショット 2020-02-29 8.46.25.png

WEBUILD
Shopify Partner
39 11 41
{% 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 を切り替えるとか。


goodimpact
訪問者
2 0 1

ご返信ありがとうございます。

 

テーマはDebutにて作成しています。

 

本当に無知で、テーマごとに違うことすら気づかずで

お恥ずかしい限りです。

 

ご返信いただいた内容で、検索とうしながら出来るよう頑張ってみます。

 

ありがとうございました。