Solved

What is the JS logic for two required checkboxes on Shopify?

MKrantz
Excursionist
17 0 4

I have successfully implemented two check boxes on the product page using JS found in a Shopify discussion. 

However, I want the function to be so that both boxes need to be checked in order to add product to cart. As it stand right now, only the first box needs to be checked. 

Give the two check boxes a unique ID and write some logic to make sure both boxes are checked? I am comfortable in theme.liquid but just don't know the right code to make happen. Here is the current code....

JS:

$(theme.init);

  $(document).ready(function() {
    $('body').on('click', '[name="add"], [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 add to cart.");
        return false;
      }
    });
  });

 

HTML: 

<p style="float: none; text-align: left; clear: both; margin: 10px 0;"> 
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="agree">
I have read and agree to the terms of service.
</label>
</p>

      
<p style="float: none; text-align: left; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="agree">
I understand that I have checked my options.
</label>
</p>

 

Accepted Solution (1)

NickHeath
Excursionist
11 1 3

This is an accepted solution.

Hi MKrantz,

You are correct. Update the second id to something like "understand".

HTML:

<p style="float: none; text-align: left; clear: both; margin: 10px 0;"> 
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="agree">
I have read and agree to the terms of service.
</label>
</p>

      
<p style="float: none; text-align: left; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="understand" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="understand">
I understand that I have checked my options.
</label>
</p>



Then update the JS function to the following:

 

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

 

View solution in original post

Replies 8 (8)

NickHeath
Excursionist
11 1 3

This is an accepted solution.

Hi MKrantz,

You are correct. Update the second id to something like "understand".

HTML:

<p style="float: none; text-align: left; clear: both; margin: 10px 0;"> 
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="agree">
I have read and agree to the terms of service.
</label>
</p>

      
<p style="float: none; text-align: left; clear: both; margin: 10px 0;">
<input style="float:none; vertical-align: middle;" type="checkbox" id="understand" required="required" />
<label style="display:inline; float:none; text-transform:none; margin-left: 10px" for="understand">
I understand that I have checked my options.
</label>
</p>



Then update the JS function to the following:

 

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

 

MKrantz
Excursionist
17 0 4

Perfect! I really appreciate it Nick. Amazing that I can post on here and get help like this. 

MKrantz
Excursionist
17 0 4

@NickHeath one more question if you don't mind.

 Is there anyway to easily customize the prompt title that comes from the browser? Right now it says, "website url says: and then my message". I was hoping to change the website url says part to just the brand name. 

NickHeath
Excursionist
11 1 3

Hi again MKrantz,

As you're using the standard alert you cannot change the title. This is a security feature, as alerts and prompts are often used by spam, ads and phishing sites, so knowing exactly where they came from is useful.

Here are the official docs on the alert call, so you can read exactly what you can do with it, and any limitations it has:
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert

I'm not sure of your coding experience, but with some work you could use the jQuery UI dialog to customise it a lot more:
https://jqueryui.com/dialog/

It would look something like this:

$("<div></div>").html("message").dialog({
	title: "title",
	resizable: false,
	draggable: false,
	modal: true
}); 

 

MKrantz
Excursionist
17 0 4

Thanks! Super helpful. I get it. Coding experience is minimal but learning. 

The default alert is fine for now. 

However, I have a new issue. I am only trying to apply the check boxes to particular products and I have done so using tag conditions on the product-template.liquid but unfortunately the JS is applying to all products. I am getting the alert on all products (ones that are not tagged) when trying to add to cart. I assume this is because I am targeting [name="add"], and since add exist on all product pages it is wanting to run the check box script.

How do you only apply the JS to certain products?

NickHeath
Excursionist
11 1 3

Hi MKrantz,

It's best to make a new post for each issue you run into, as once they are marked as "Solved" then others won't know that you still need help.

There's a few different ways you could do it depending on where you have access to check the tags.
One would be to extend the JS and check to see if the tag is set before running any of the other JS.
Another would be to check for the tag in the product-template.liquid file and only include the JS file if that tag matches.

MKrantz
Excursionist
17 0 4

OK will do, makes sense on starting new topic. 

this seems to be the route "Another would be to check for the tag in the product-template.liquid file and only include the JS file if that tag matches."

I just need some direction on how you would only include the JS file if that tag matches.... : /

NickHeath
Excursionist
11 1 3

Something like this should work, but might need a little adapting:

{%- if product.tags contains 'my_tag' -%}
    {{ 'your-script.js' | asset_url | script_tag }}
{%- endif -%}