Add age confirm checkbox to Product page

Solved
Tourist
4 1 0

On my shop I sell some alcoholic products. If the user lands on one of these product page I would like to disable the "Add to cart" button until they tick a checkbox that says: "I can confirm I'm over 18". I don't want to add an app/plugin to do this. 

 

I've got the checkbox within the `products-template.liquid` page:

 

{% if product.tags contains 'alcohol' %}
  <p class="line-item-property__field">
  <input type="hidden" name="properties[_confirm-age]" value="No">
  <input id="confirm-age" required class="required acceptTerms" type="checkbox" name="properties[_confirm-age]" value="Yes">
    <label for="confirm-age">I can confirm I'm over 18.</label>
  </p>
{% endif %}

But just need figure out how to disable/show/hide the "Add to card" button depending on this checkbox.

0 Likes
Highlighted
Shopify Expert
220 9 46
Hi ,
Please provide your store url !
Regards

Sudipta 
MS Web Designer | Task4Store
20,000+ Tasks Completed | 1000+ Happy Clients

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: sudipta@mswebdesigner.com
Want to get Free review and advice for sale on store ?? just text me here


 Shopify Help on Demand from 19$ -  https://www.task4store.com/
150 + Shopify Small Tasks for Shopify & Shopify Plus Store


 Useful Free appCart2sale-Sales Booster 
11 in one App to Maximize your sales and Conversion  

Shopify Free one by one Tutorial for Beginners in 2020 

0 Likes
Highlighted

Success.

Tourist
4 1 0

Update: I managed to figure this out, I added the above code for the input. 

 

Then added a short bit of JavaScript to enable and disable the submit button. It works really well. 

(function () {
  const addToCardBtnEl = document.getElementById('addToCardBtn');
  const confirmAgeCheckboxEl = document.getElementById('confirmAge');
  addToCardBtnEl.setAttribute('disabled', true);

  confirmAgeCheckboxEl.addEventListener('change', (event) => {
    if (confirmAgeCheckboxEl.checked) {
      addToCardBtnEl.removeAttribute ('disabled');
    } else {
      addToCardBtnEl.setAttribute('disabled', true);
    }
  });
})()
0 Likes
Highlighted
Tourist
4 1 0

Thanks for the message Sudipta but I managed to figure it out and get it working. I've added the code below.

0 Likes
Highlighted
Shopify Expert
220 9 46
Hi Drydenwilliams,
Thanks for the update !
If you need any help In future 😉 please let me know .

Good luck 👍

Regards
Sudipta

Sudipta 
MS Web Designer | Task4Store
20,000+ Tasks Completed | 1000+ Happy Clients

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: sudipta@mswebdesigner.com
Want to get Free review and advice for sale on store ?? just text me here


 Shopify Help on Demand from 19$ -  https://www.task4store.com/
150 + Shopify Small Tasks for Shopify & Shopify Plus Store


 Useful Free appCart2sale-Sales Booster 
11 in one App to Maximize your sales and Conversion  

Shopify Free one by one Tutorial for Beginners in 2020 

0 Likes