FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

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 42
{% 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にて作成しています。

 

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

お恥ずかしい限りです。

 

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

 

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