[closed] shop checkout -> checkbox to accept therms

Wednesday 13 May 2009 11:31:49 pm

heya,

I want to have a checkbox to accept the therms before confirm order,
do you have an idea?

Thursday 14 May 2009 3:05:05 am

Another way of doing it is to override the shop checkout template and add a checkbox and the corresponding texts in a div, and use some Javascript to hide/show and validate the process:

I copied parts of my shop/confirmorder.tpl below:

shop/confirmorder.tpl:

this displays the checkbox and triggers a javascript: $tac and $tac_url are the text to be shown, and a link to the terms and conditions.

<input type="checkbox" id="tacCB" onclick="displayTACWarning()" name="tac" value="{$tac|wash}" {section show=$tac|eq(1)} checked="checked"{/section}/>

the text and link is just behind the checkbox, as shown here:

<label for="tacCB" style="display: inline;">{"I have read the"|i18n("bg_user/confirmorder")}</label> {if $tac_url}<a href={$tac_url|ezurl} target="_blank">{/if}{"terms and conditions"|i18n("bg_user/confirmorder")}{if $tac_url}</a>{/if} {"and I agree"|i18n("bg_user/confirmorder")}

the following part is a div that is sohwn only if the user tries to commit the order without clicking on the terms and conditions:

<div class="break"><!--  --></div>
<div id="noTACwarning" {section show=$showtac|eq(0)} style="display:none;" {/section} class="warning" "style="height:100px;">
{"You need to agree to the terms and conditions in order to proceed"|i18n("bg_user/confirmorder")}
</div>
<br />

and below, you'll find the Javascript that I use to trigger/change the visibility state of the warning, and the way the commit button works, depending on the ceckboxes' state.

{run-once}
{literal}

	<script language='javascript' type='text/javascript'>
	function submitform( ok )
	{
	  var obj = document.getElementById("jsfakebutton");
	  var tacCB = document.getElementById("tacCB");
	  var tac_agreed = tacCB.checked;
	  if ( ok )
	  {
		obj.name="ConfirmOrderButton";
		{/literal}
		obj.value="{'Confirm'|i18n('design/standard/shop')}";
		{literal}
	  }
	  else
	  {
		obj.name="CancelButton"; 
		{/literal}
		obj.value="{'Cancel'|i18n('design/standard/shop')}";
		{literal}
	  }

	  if (ok && !tac_agreed )
	  {
	     displayTACWarning();
	  }
	  else
	  {
		document.ConfirmOrder.submit();
	  }
	}

	var existingOnload = null;
	if (window.onload) { existingOnload = window.onload; }

	window.onload = function (ev) {
		if (existingOnload) { existingOnload(ev); }
        showjavascriptbuttons();
	}
	
	function displayTACWarning() {
	   var tacCB = document.getElementById("tacCB");
	   var tac_agreed = tacCB.checked;
	   var vis = (tac_agreed) ? "none" : "block";
	   document.getElementById( 'noTACwarning' ).style.display = vis;
	}

	function showjavascriptbuttons() {
		document.getElementById( 'javabuttons' ).style.display = "block";
	}
    
   </script>
{/literal}
{/run-once}

I hope this helps you getting the code quickly on the rails,

</Pascal>