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:

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


Next look for the line:
and add this right after it:


Next find the section that looks like:

and change it to read:

: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:

It should read:

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

to be


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

Skin1\customer\main\checkout.tpl:

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!!!

Submit buttons not working
 

I put this code in place as mentioned.. Everything seems to work except the submit button becomes non-functional. It appears after you click I agree to the terms, but you cannot click the submit order button. What could be causing that?



I am using version 3.5.14


Thanks in advance!

After placing the code as suggested although i had a smarty error this was caused by another mod, once complete the check button works absolutely fine, check yes SUBMIT ORDER button appears, CHECK NO submit button dissapears just like it should.......im using vers 4.13

goto www.realsecurity.co.uk try the checkout and you will see it works just fine!!!

Problem solved
 

Okay...my problem was because there is different syntax for version 3.5.10 thent he 4.x version. This is what I needed inside the <div>



It works great now...Thanks for a nice mod!

I have tried both of these methods and no Submit button shows up for me when I click on I Agree. (Checkbox div & radio button). I have 4.0.17 & I am also on a Mac using Safari. That is most likely the reason, but wanted to let you know that this method is preventing Mac users on Safari from purchasing your product. I have too many mac customers to cut them out. Have to find another method of doing this.

Re: Click "I agree" checkbox before allowing purchase.
 

Here is another solution.

Display the "I agree" text with a checkbox and the submit button initially. When the customer goes to click the submit button the script below checks to see if the checkbox was checked or not. If so the order goes through else a popup box is displayed telling the customer he/she must agree to the terms and conditons before placing the order.


And place this code in the submit button link.


I've seen most websites operate in this matter. Check out the UPS website to see this in action. Try clicking the 'Track' button without filling out the form and you'll see what happens.

Re: Click "I agree" checkbox before allowing purchase.
 

Hey there all,

I need to have this or a similar mod to run on my site. I've tried all the variations and none would even display a button of any sort. I think x-cart has evolved past where this mod works as is. I'm hoping that there are some out there that would enjoy reopening this mod for it to work with the latest stable version 4.1.8. I don't necessarily need it to hide/display just a javascript check to verify that a check box is checked.(with an alert box)

hope this catches someones interest!:P

-hroth

Re: Click "I agree" checkbox before allowing purchase.
 

check out this thread. I was able to implement this code in just a few minutes.

http://forum.x-cart.com/viewtopic.php?p=129976


If you want to change the text, you can find it in the languages section of your admin.

Re: Click "I agree" checkbox before allowing purchase.
 

Thanks Dave,
I went through the mod and it works perfectly!
Much much obliged!

-hroth

Re: Click "I agree" checkbox before allowing purchase.
 

I wish I had seen this before the custom modification we purchased with our script.

Re: Click "I agree" checkbox before allowing purchase.
 

Hello!
I recently tried to implement a date picker within "checkout_notes.tpl". It works perfectly in html but apparently not within tpl. Do I make a very obvious mistake? Attached is the file. Thank you for any hint!! ~Jahn



{* $Id: checkout_notes.tpl,v 1.6 2005/12/07 14:07:21 max Exp $ *}
{include file="customer/main/subheader.tpl" title=$lng.txt_notes class="grey"}

<head>


<link rel="stylesheet" href="{$SkinDir}/cal-2/demos.css" media="screen" type="text/css">

<script type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-common.js"></script>
<script language="javascript" type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-calendar.js"></script>
<script language="javascript" type="text/javascript" src="{$SkinDir}/cal-2/dhtmlSuite-dragDropSimple.js"></script>
<link type="text/css" media="screen" rel="stylesheet" href="{$SkinDir}/cal-2/calendar.css">

</head>
<body>

<!-- A DATE PICKER FOR FORMS -->
{literal}
<script type="text/javascript">
var calendarObjForForm = new DHTMLSuite.calendar({minuteDropDownInterval:10,num berOfRowsInHourDropDown:5,callbackFunctionOnDayCli ck:'getDateFromCalendar',isDragable:true,displayTi meBar:true});
calendarObjForForm.setCallbackFunctionOnClose('myO therFunction');

function myOtherFunction()
{
}
function pickDate(buttonObj,inputObject)
{
calendarObjForForm.setCalendarPositionByHTMLElemen t(inputObject,0,inputObject.offsetHeight+2); // Position the calendar right below the form input
calendarObjForForm.setInitialDateFromInput(inputOb ject,'yyyy-mm-dd hh:ii'); // Specify that the calendar should set it's initial date from the value of the input field.
calendarObjForForm.addHtmlElementReference('myDate ',inputObject); // Adding a reference to this element so that I can pick it up in the getDateFromCalendar below(myInput is a unique key)
if(calendarObjForForm.isVisible()){
calendarObjForForm.hide();
}else{
calendarObjForForm.resetViewDisplayedMonth(); // This line resets the view back to the inital display, i.e. it displays the inital month and not the month it displayed the last time it was open.
calendarObjForForm.display();
}
}
/* inputArray is an associative array with the properties
year
month
day
hour
minute
calendarRef - Reference to the DHTMLSuite.calendar object.
*/
function getDateFromCalendar(inputArray)
{
var references = calendarObjForForm.getHtmlElementReferences(); // Get back reference to form field.
references.myDate.value = inputArray.year + '-' + inputArray.month + '-' + inputArray.day + ' ' + inputArray.hour + ':' + inputArray.minute;
calendarObjForForm.hide();

}
</script>{/literal}



<form name="myForm">
<table cellspacing="0" cellpadding="2">
<tr valign="top">
<td>{$lng.lbl_customer_notes}:</td>
<td>&nbsp;</td>
<td nowrap="nowrap"><textarea cols="70" rows="3" name="Customer_Notes" value="2007-12-24 12:00" onclick="" ></textarea></td>
<td><input value="Pick-up date/time" onclick="pickDate(this,document.forms[0].myDate);" type="button"></td>
</tr>


</table></form>
</body>