Pacific theme : Terms and conditions checkbox at checkout

New Member
1 0 0

Hi there, I have search multiple forms about this using the unsupported Shopify guide :

 

https://help.shopify.com/en/themes/customization/cart/add-terms-and-conditions-checkbox

 

The solutions are all based on specific themes used, so I thought someone will be able to help me out.

 

I have followed the instructions but on my page and it only appears to be a tick-able box on the far right with no text.

 

Code attached: 

 

This is added at the bottom of theme.js.liquid, with a few lines before it.

 

  return ThemeView;

})(Backbone.View);

$(function() {
  window.theme = new ThemeView();
  return theme.render();
});

  $(document).ready(function() {
    $('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
      if ($('#agree').is(':checked')) {
        $(this).submit();
      }
      else {
        alert("You must agree with the terms and conditions of sales to check out.");
        return false;
      }
    });
  });

 Then this code is added before the button code I can find at page-cart.liquid, (with button code attached).

 

<p style="float: none; text-align: right; clear: both; margin: 10px 0;">
  <input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
  <label style="display:inline; float:none" for="agree">
    I agree with the <a href="/pages/terms-and-conditions">terms and conditions</a>.
  </label>
</p>
         
<div class="cart-checkout">
        <p class="cart-price"><span class="money">{{ cart.total_price | money }}</span></p>
        <p class="cart-message"><em>{{ 'cart.tax_and_shipping' | t }}</em></p>
        {% if settings.enable_currency_switcher %}
          <input type="submit" name="update" value="{{ 'cart.update' | t }}" class="secondary">
          <input type="submit" name="checkout" value="{{ 'cart.submit' | t }}">
        {% else %}
          <a class="cart-checkout-button button" href="/checkout">{{ 'cart.submit' | t }}</a>
        {% endif %}

        {% if additional_checkout_buttons %}
          <div class="cart-additional-buttons">
            {{ content_for_additional_checkout_buttons }}
          </div>
        {% endif %}
      </div>
    </form>
  {% else %}
    <p class="cart-empty-message">{{ 'cart.empty' | t }}</p>
  {% endif %}

  <script>
    window.sectionJSON = {{ section.settings | json }};
  </script>

</div>

Please help out. Thank you in advance!

0 Likes
Pathfinder
77 8 9

@BE_Marketing

 

I think it require some CSS tweak. Please share your store URL so, I can take a look and assist you better.

 

Thank you,

Tejas

Shopify Expert | for any help regarding Shopify contact at: support@hexaecommerce.com
0 Likes