Product Page Checkbox not functioning properly (Streamline Theme)

Highlighted
Excursionist
58 0 6

Hi,

I added a checkbox to my product pages that customers are required to check before purchasing.
It's working, except I just noticed that when selecting a different size, customers are able to purchase without ticking the box.
I'm using different terms for different providers, so using the standard cart page option instead doesn't work for what I'm doing.
Here is my code (I found it in this forum awhile back, and used to use it on a previous theme)

// Pre-order Checkbox
    $(function() {
    $('input.acceptTerms').click(function() {
        var unchecked = $('input.acceptTerms:not(:checked)').length;
        if (unchecked == 0) {
            $('#addToCart').removeAttr('disabled');
        }
        else {
            $('#addToCart').attr('disabled', 'disabled');
        }
    });
});

 

Here is an excerpt of the product page html where the code is:

{%- if enable_dynamic_buttons -%}
    <div class="payment-buttons">
  {%- endif -%}

    {%- assign default_text = 'products.product.add_to_cart' | t -%}
    {%- assign button_text = 'products.product.add_to_cart' | t -%}
    {%- if current_variant.available -%}
      {%- if template == 'product.preorder' -%}
        {%- assign default_text = 'products.product.add_to_cart' | t -%}
        {%- assign button_text = 'products.product.preorder' | t -%}
      {%- endif -%}
    {%- else -%}
      {%- assign button_text = 'products.product.sold_out' | t -%}
    {%- endif -%}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      data-add-to-cart
      class="{% if enable_dynamic_buttons %}btn btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      disabled id="addToCart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span data-add-to-cart-text data-default-text="{{ default_text }}">
        {{ button_text }}
      </span>
    </button>

    {%- if enable_dynamic_buttons -%}
      {{ form | payment_button }}
    {%- endif -%}

  {%- if enable_dynamic_buttons -%}
    </div>
  {%- endif -%}

  {%- unless product.empty? -%}
    <textarea class="hide" aria-hidden="true" data-variant-json>
      {{ product.variants | json }}
    </textarea>
    {%- if product.options.size > 1 -%}
      <textarea class="hide" aria-hidden="true" data-current-variant-json>
        {{ current_variant | json }}
      </textarea>
    {%- endif -%}
  {%- endunless -%}

<div class="checkbox">
    <input type="checkbox" value="" class="acceptTerms"> <span style="color: #000000; font-size: 10pt; letter-spacing: 0.2em;">THIS PRODUCT IS MADE-TO-ORDER. PLEASE ALLOW 2-3 WEEKS FOR DELIVERY. ADDITIONAL DELAYS MAY OCCUR DUE TO COVID-19. CONSULT SIZE CHART BEFORE ORDERING, AS YOUR NORMAL SIZE MAY DIFFER FROM THIS CUT & SEW GARMENT. CHECK BOX TO AGREE TO THESE TERMS AND CONTINUE WITH YOUR PURCHASE.</span>
  </div>

 
Here is an example product: https://www.killyourgod.net/collections/t-shirts/products/shattered-reality-all-over-sublimated-t-sh...
Can anybody help?

0 Likes
Highlighted
Excursionist
58 0 6

So, I came across the UI Elements Generator: https://ui-elements-generator.myshopify.com/pages/line-item-property

My terms text is displayed under the checkbox though, and not next to it (as it appears in the above link).
Anyway to fix this? (Again, using https://www.killyourgod.net/collections/t-shirts/products/shattered-reality-all-over-sublimated-t-sh... as an example).

Also, it doesn't work with the Dynamic Checkout button. Is there a fix for that or another option I can use?

I'm aware of Bold Product Options, but I uninstalled it for 5 minutes to troubleshoot and now they're asking that I pay full price again.

0 Likes