X-Cart forums - Click "I agree" checkbox before allowing purchase.

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Click "I agree" checkbox before allowing purchase. (https://forum.x-cart.com/showthread.php?t=15144)

Click "I agree" checkbox before allowing purchase.

A client has asked me to implement some code whereby a customer must agree that they have read, and agree to, their Terms and conditions, otherwise they are not able to continue with a purchase. The customer has to tick the "I agree" checkbox etc.

Has anyone done a similar thing? If so, can you give me some guidance as to how to do this please?

Note: FWIW, there is nothing dodgy about the client or the products they want to sell, they just want to be a little cautious is all! :)

Many thanks.

Any ideas or suggestions anyone :?:

...edited to reflect changes made later on in this post...

Here is a mod that will hide the submit button until they check the box that they agree.

Step 1
Create the file /skin1/hide_block_script.tpl with this contents:

Code:

{literal}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

// Function to flip visibility of certain div objects

function flipdiv(el,state) {

   if(state=="show"){

      status="block";

   }else{

      status="none";

   }

   document.getElementById(el).style.display = status;

}

</SCRIPT>

{/literal}

Step 2
Open the file /skin1/customer/main/checkout.tpl for editing.
At top of the file right before the first {capture} insert the line

Code:

{include file="hide_block_script.tpl"}

Next look for the line:

Code:

{$lng.txt_you_are_agree} "{$lng.lbl_terms_n_conditions}" {$lng.lbl_and} "{$lng.lbl_privacy_statement}".

and add this right after it:

Code:






No<input type="radio" name="agree" checked="checked" onclick="flipdiv('checkoutbutton','hide')" /> Yes<input type="radio" name="agree" onclick="flipdiv('checkoutbutton','show')">I Agree to the Terms and Conditions

Next find the section that looks like:

Code:

{include file="buttons/button.tpl" button_title=$lng.lbl_submit_order style="button" href=$button_href}

{else}

{include file="submit_wo_js.tpl" value=$lng.lbl_submit_order}

{/if}

and change it to read:

Code:

<div align="center">

<table border=0 cellpadding="0" cellspacing="0" id="checkoutbutton" style="display: none;">

<tr><td>

{include file="buttons/button.tpl" button_title=$lng.lbl_submit_order style="button" href=$button_href}

{else}

{include file="submit_wo_js.tpl" value=$lng.lbl_submit_order}

{/if}

</td></tr>

</table>

</div>

:D Superb idea TelaFirma. Thanks for taking the time to compile the solution, I'm sure this will be useful to others too.

Only 1 little problem with the final piece of code:

Code:

<div align="center"> 

<table border=0 cellpadding="0" cellspacing="0" id="checkoutbutton" style="display: none;"> 

<tr><td> 

{include file="buttons/button2.tpl" button_title=$lng.lbl_submit_order style="button" href=$button_href} 

{else} 

{include file="submit_wo_js.tpl" value=$lng.lbl_submit_order} 

{/if} 

</td></tr> 

</table> 

</div>

It should read:

Code:

<div align="center"> 

<table border=0 cellpadding="0" cellspacing="0" id="checkoutbutton" style="display: none;"> 

<tr><td> 

{include file="buttons/button.tpl" button_title=$lng.lbl_submit_order style="button" href=$button_href} 

{else} 

{include file="submit_wo_js.tpl" value=$lng.lbl_submit_order} 

{/if} 

</td></tr> 

</table> 

</div>

The only difference is the button template called by the include code, it should be "button.tpl" and not "button2.tpl". Once I changed that your code work perfectly.

Thank you!

Oops... my fault! That is a secondary button template that I am using on one of my sites.. LOL

I will correct the post.

Cool.

I've noticed that if you tick the checkbox, everything is fine. But if you untick the checkbox, the submit order button is still displayed.

I've done something similar with show/hide using DIVs, and I've been comparing code etc to find the solution for this, but no luck so far with my tests.

Can you see why it doesn't toggle the order button?

Thanks.

I think that it will be best to use a radio button here rather than a checkbox. Since it is using the onclick method to call the function there is not a good way to check for a second click on the checkbox. Otherwise you would need to submit the form and check the state of the box and that would defeate the purpose of the script. So, lets use the radio buttons instead...

Change

Code:



<input type="checkbox" onclick="flipdiv('checkoutbutton','show')"> I Agree to the Terms and Conditions

to be

Code:






No<input type="radio" name="agree" checked="checked" onclick="flipdiv('checkoutbutton','hide')" /> Yes<input type="radio" name="agree" onclick="flipdiv('checkoutbutton','show')">I Agree to the Terms and Conditions

I will update the original post again to reflect this...

Thanks, that works really well. Whilst you were doing that, I had a go at using some other code I'd used in the past to show/hide layers and got it to work with the checkbox. I used your code in the end, but this also works:

Here is the code:

hide_block_script.tpl

Code:

{literal} 

<script>

function toggle(theImg, divName){

  if(theImg.value!='on'){

    theImg.value='on'

  } else {

    theImg.value='off'

  }

  divStyle = document.getElementById(divName).style;

  if(theImg.value=='on'){

    divStyle.display='block';

  } else {

    divStyle.display='none';

  }

}

</script>

{/literal}

Skin1\customer\main\checkout.tpl:

Code:

{include file="hide_block_script.tpl"}

Code:

 

<input type="checkbox" name="checkbox" value="checkbox" onclick="toggle(this,'wrapper');"> I Agree to the Terms and Conditions

Code:

<div id="wrapper" style="display:none">{include file="buttons/button.tpl" button_title=$lng.lbl_submit_order style="button" href=$button_href} 

{else} 

{include file="submit_wo_js.tpl" value=$lng.lbl_submit_order} 

{/if} </div>

This is great, thanks. I am having a problem however. I used the code from TelaFirma --now I get the radio buttons and when the customer clicks the Yes radio button the submit button appears. My problem is that the radio button for No continues to be checked as well. It is confusing to have both the Yes and No buttons checked at the same time. Is there a way to turn off the No button when the Yes button is checked?

Thanks for your help.

X-cart Pro 4.0.13 with lots of modifications

After changing the code as suggested i now have this error message wich displays on site next to the бё signs?

Warning: Smarty error: unable to read resource: "customer/main/alter_currency_value.tpl" in /home/realsecu/public_html/Smarty-2.6.3/Smarty.class.php on line 1082

Any ideas!!!! the check boxes appear where they should!!!