Liquid, JavaScript, themes, sales channels
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>
Solved! Go to the solution
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;
}
});
});
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;
}
});
});
Perfect! I really appreciate it Nick. Amazing that I can post on here and get help like this.
@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.
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
});
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?
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.
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.... : /
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 -%}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024