Re: check box not working

muteebnasir · ‎05-29-2022

Hello everyone,

I made checkbox in this page https://thebusyparentco.com/cart

so any one who will checkout must tick on checkbox

but its now working

we can checkout without even tick the box

i check the code every thing is good

kindly need help

my website link https://thebusyparentco.com/

SheetalZadfiya · ‎05-31-2022

Hi @muteebnasir,

Please follow the below steps for developing the functionality.

1: From your Shopify admin, go to Online Store > Themes.

2: Find the theme you want to edit, and then click Actions > Edit code.

3: In the Layout directory, click theme.liquid.

4: Find the closing </body> tag near the bottom of the file.

5: Above the closing </body> tag, paste the following code:

<script>
$('body').on('click', '[name="checkout"], [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 check out.");
    return false;
  }
});
</script>

6: Click Save.

After this, In the Templates directory, click cart.liquid.

1: Find the following code:

  {% if additional_checkout_buttons %}
    <div>{{ content_for_additional_checkout_buttons }}</div>
  {% endif %}

2: When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later. Your code should look like this:

 {% comment %}
  {% if additional_checkout_buttons %}
    <div>{{ content_for_additional_checkout_buttons }}</div>
  {% endif %}
  {% endcomment %}

3: Click Save.

Add the jquery file’s latest version to your theme.

1: In the Layout directory, click theme.liquid.

2: Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

3: Click Save.

Let me know how it goes.

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

View solution in original post

DitalTek · ‎05-30-2022

hi @muteebnasir ,

i checked your site need import jQuery library on site, because you doing used the jQuery method handle the DOM, but on your site still haven't include yet that library.
You can paste the link below in under footer section on your site.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer="defer"></script>

Hope can helpful to you!

- You can please Like and Accepted Solution if my suggestion helpful.
- And you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatApp

muteebnasir · ‎05-30-2022

it still not working kindly fix it

i been trying this over a week

SheetalZadfiya · ‎05-31-2022

Hi @muteebnasir,

Please follow the below steps for developing the functionality.

1: From your Shopify admin, go to Online Store > Themes.

2: Find the theme you want to edit, and then click Actions > Edit code.

3: In the Layout directory, click theme.liquid.

4: Find the closing </body> tag near the bottom of the file.

5: Above the closing </body> tag, paste the following code:

<script>
$('body').on('click', '[name="checkout"], [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 check out.");
    return false;
  }
});
</script>

6: Click Save.

After this, In the Templates directory, click cart.liquid.

1: Find the following code:

  {% if additional_checkout_buttons %}
    <div>{{ content_for_additional_checkout_buttons }}</div>
  {% endif %}

2: When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later. Your code should look like this:

 {% comment %}
  {% if additional_checkout_buttons %}
    <div>{{ content_for_additional_checkout_buttons }}</div>
  {% endif %}
  {% endcomment %}

3: Click Save.

Add the jquery file’s latest version to your theme.

1: In the Layout directory, click theme.liquid.

2: Within the <head> element, find a script tag that references your theme's jQuery source. The src attribute for the script tag contains a URL that includes /jquery/, followed by the version number. The tag looks something like this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

3: Click Save.

Let me know how it goes.

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

SheetalZadfiya · ‎05-30-2022

Hi @muteebnasir,

I have checked the code and found that there is no jquery script injected in the theme and also add the given jquery code to run the functionality.

Please follow the below steps:

In your theme.js or theme.js.liquid file add the below code

$(document).ready(function() {
$('body').on('click', '[name="checkout"], function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("You must agree with the terms and conditions of sales to check out.");
return false;
}
});
});

After that,

In your theme.liquid file, find </head> and On a new line above </head>, paste the following code:

<link rel="preload" href="https://code.jquery.com/jquery-2.2.4.min.js" as="script">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

Click Save for both the files and then please check if it is working or not.

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

muteebnasir · ‎05-30-2022

i put this code in theme.editor.js bcz there is no theme.js file or theme.js.liquid file

$(document).ready(function() {
$('body').on('click', '[name="checkout"], function() {
if ($('#agree').is(':checked')) {
$(this).submit();
}
else {
alert("You must agree with the terms and conditions of sales to check out.");
return false;
}
});
});

and them then i put this on my head in theme.liquid file and still there is no results

Re: check box not working

Why is my checkout checkbox not functioning correctly?

Community Blog Articles