To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

check box not working

Solved
muteebnasir
Tourist
10 0 2

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/

Accepted Solution (1)

Accepted Solutions
SheetalZadfiya
Explorer
70 15 17

This is an accepted solution.

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

Replies 5 (5)
PHAVIA
Shopify Partner
384 54 62

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 if you want to do feature development or customize the store => Let Hire Us. And will have a small fee for us when finished work.
- Contact Support : Slack Channel | Email: phaviaecommerce@gmail.com
SheetalZadfiya
Explorer
70 15 17

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
Tourist
10 0 2

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

muteebnasir
Tourist
10 0 2

it still not working kindly fix it 

i been trying this over a week

 

SheetalZadfiya
Explorer
70 15 17

This is an accepted solution.

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