Product Page Checkbox not functioning properly (Streamline Theme)

Highlighted
Excursionist
57 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.
It also doesn't work with the Dynamic Checkout button.

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 the HTML from the product page:

 

{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product', product, id: form_id, class: 'product-single__form small--text-center' %}
  <input type="hidden" name="data-product-id" value="{{ product.id }}">
  {%- unless product.has_only_default_variant -%}
    {%- for option in product.options_with_values -%}
      {%- if settings.product_color_swatches -%}
        {%- assign is_color = false -%}
        {%- assign color_option_index = 0 -%}
        {%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase-%}
        {%- assign color_option_index = forloop.index0 -%}
        {%- assign downcased_option = option.name | downcase -%}
        {%- if downcased_option contains swatch_trigger -%}
          {%- assign is_color = true -%}
        {%- elsif swatch_trigger == 'color' and downcased_option contains 'colour' -%}
          {%- assign is_color = true -%}
        {%- endif -%}
      {%- endif -%}

      {%- if variant_type == 'button' -%}
        {%- render 'variant-button',
          section_id: section_id,
          variant_labels_enable: variant_labels_enable,
          option: option,
          forloop: forloop,
          is_color: is_color,
          color_option_index: color_option_index
        -%}
      {%- else -%}
        {%- render 'variant-dropdown',
          section_id: section_id,
          variant_labels_enable: variant_labels_enable,
          option: option,
          forloop: forloop
        -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endunless -%}

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js" data-product-select>
    {%- for variant in product.variants -%}
      {%- if variant.available -%}
        <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %}
          selected="selected"{% endif %}>
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {%- else -%}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {%- endif -%}
    {%- endfor -%}
  </select>

  {%- if quantity_enable -%}
    <div class="product__quantity product__quantity--{{ variant_type }}">
      <label for="Quantity-{{ section_id }}" class="variant__label">{{ 'products.product.quantity' | t }}</label>
      <input type="number" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1">
    </div>
  {%- endif -%}

  {%- liquid
    assign enable_dynamic_buttons = false
    if enable_payment_button and template != 'product.preorder'
      assign enable_dynamic_buttons = true
    endif
  -%}

  {%- 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 -%}
<br>
<div class="checkbox">
    <input type="checkbox" value="" class="acceptTerms"> <span style="color: #E91B39; font-size: 8pt; letter-spacing: 0.2em;">THIS PRODUCT IS HANDMADE IN THE UK AND SHIPS WITHIN 2-3 DAYS VIA FEDEX. PLEASE ALLOW ADDITIONAL DELAYS THAT MAY OCCUR DUE TO COVID-19. MEASURE YOURSELF AND CONSULT SIZE CHART BEFORE ORDERING, AS YOUR NORMAL SIZE MAY DIFFER FROM THESE CUT & SEW GARMENTS. THESE ARE CUSTOM MADE AND THERE ARE NO RETURNS. CHECK BOX TO AGREE TO THESE TERMS AND CONTINUE WITH YOUR PURCHASE.</span>
  </div>

{% endform %}

 

 

Here is an example product from my store:

https://www.killyourgod.net/collections/t-shirts/products/shattered-reality-all-over-sublimated-t-sh...

Can anybody help?

0 Likes
Highlighted

Hi @Blaine :

It is a stopper to avoid users adding items to cart, but, this would do the trick:

You can change the alert by any other stuff for example.

Also I suggest you to avoid using a class for the checkbox and use an ID or something that identifies that specific box.

$('#addToCart').on('click',function(e){
if(!$('.acceptTerms').prop('checked')){
e.preventDefault();
   alert("Please accept terms first");

}
});

 

Thanks, 

Ricardo | Founder @ VN Studios
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
1 Like
Highlighted
Excursionist
57 0 6

Hi @ricardoceci 

Unfortunately, that didn’t work. I’ve reached out to the developer to hopefully solve this. I appreciate your response though.

0 Likes
Highlighted

Hi @Blaine sorry to hear about that.

I have tested it on your site and actually it worked.

Where did you place the javascript?

 

Let me know if you need any other help.

 

Thanks,

Ricardo | Founder @ VN Studios
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
1 Like
Highlighted
Excursionist
57 0 6

@ricardoceci 

Ah, it does work. I thought I had to replace the original script I was using.
I would prefer to have the original implementation working, but this helps a lot until I can get it figured out.
Thank you for the help.

0 Likes