Sanjoy Roy

[MCM, MCP, SCJP] – Senior PHP Programmer

Magento – Terms & Condition Popup for Category Page Link


jQuery Library include:
CSS:
css/ui-lightness/jquery-ui-1.8.16.custom.css

JS:
js/jquery-1.6.2.min.js
js/jquery-ui-1.8.16.custom.min.js

Javascript code:

$(document).ready(function(){		
	
	TERMS_CONDT_CNT = 0;
	
	$('.category-box a').click(function() {					
		//$( "#dialog:ui-dialog" ).dialog( "destroy" );	
		console.log(this);
		vlink = this.href;
		console.log(vlink);
		if (TERMS_CONDT_CNT == 0){		
		$( "#dialog-confirm" ).dialog({
			resizable: false,
			height:500,
			width:500,
			modal: true,
			buttons: {
				"Accept": function() {
					TERMS_CONDT_CNT++;
					debugger;
					$( this ).dialog( "close" );
					document.location = vlink;
				},
				"Decline": function() {
					$( this ).dialog( "close" );
					TERMS_CONDT_CNT = 0;
					return false;
				}
			}
		});
		}//if TERMS_CONDT_CNT
		console.log(TERMS_CONDT_CNT);
		if (TERMS_CONDT_CNT == 0) return false; else return true;
		
	});
	});

HTML Code:
<!– popup –>
<div id="dialog-confirm" title="Accept Terms and Conditions: " style="display:none;">
<p style="overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!– popup –>
<!– front-end link page –>
<div id="categories">
<div class="col_full">
<div class="listing">

<div class="category-box">
<a href="#trucks.html"><div class="category-image-box">
<img height="97" border="0" src="media/catalog/category/cat-image_1.jpg">
</div>
<div class="category-name">
<p>Trucks</p>
</div></a>
</div>

<div class="category-box">
<div class="category-image-box">
<a href="#/workmate.html"><img height="97" border="0" src="/media/catalog/category/cat-image_25.jpg"></a>
</div>
<div class="category-name">
<p><a href="#/workmate.html"> Workmate</a></p>
</div>
</div>
</div>
<!– front-end link page –>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: