X-Cart forums

[stickygoblin]

Hi all,

I'm trying to integrate the Kwicks moo tools function into the front of my store and I'm having a few issues with it.

First of all i got a test page with the items working in it and setup all the html and everything that i needed.

I have modified my home.tpl file to include the mootools.tpl, this then calls the stylesheet, the fx javascript and adds the functions.

In my welcome message i have added the html that is exactly what works fine on the html file.

So to my questions -

Has anyone managed to get mootools functionality working in thier cart - if so is there any rules i am missing?

What IF statment can i use to only load the mootools.tpl file into the welcome page (it slows the cart down in subsequent pages if it loads throughout)?

The Code:
home.tpl

{include file="mootools.tpl"}

mootools.tpl

<link rel="stylesheet" type="text/css" href="/skin1/splash_css.css" />
<!-- load fx.elements for mootools -->
	<script type="text/javascript" src="/skin1/elements.js" /> 
<script type="text/javascript" >
	window.addEvent('domready', function(){
			var szNormal = 280, szSmall  = 220, szFull   = 385;
			
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 800, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
			
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
			
		}); 
</script>

splash_css.css

#kwicks_container {
	width:854px;
	background-color: white;
	height: 450px;
	padding:0;
	margin:0;
}
#kwicks {
	position: relative;
}
 
#kwicks_container .kwick {
	float: left;
	display: block;
	width: 280px;
	height: 450px;
}
 
#kwick_blue {background-image: url('/skin1/front/blue.jpg');}
#kwick_orange {background-image: url('/skin1/front/orange.jpg');}
#kwick_green {background-image: url('/skin1/front/green.jpg');}

#kwicks_container ul {list-style-type:none;margin:0;padding:0;}
#kwicks_container li {margin:0;padding:0;display:block;}
#kwicks_container li {border-left:5px solid white;}

.content{float:left;padding:10px;margin:0;/*border:1px dotted white;*/width:250px;color:white;font-family:tahoma, sans;font-size:12px;}

#kwicks_container h2{margin-top:2em;font-family:Arial-Black;font-weight:bolder;font-size:25px;}
#kwicks_container h3{margin-top:1em;margin-bottom:0.5em;}


.content .button{width:100%;height:45px;position:relative;text-align:center;}

#kwicks_container table.tab{height:450px;margin:0;padding:0;}
td.top21{height:400px;display:block;vertical-align:top;}
td.bottom21{text-align:center;font-size:12px;display:block;height:30px;}
td.bottom21 a{width:150px;text-align:center;border:1px solid white;padding:5px;text-decoration:none;color:white;}
td.bottom21 a:hover{background-image:url('/skin1/front/whiteb.jpg');opacity:0.5;filter: alpha(opacity=50) ;}

And finally of course the welcome html actually in the languages in the cart

<table width="864"><tr><td>
<div id="kwicks_container">
	<ul id="kwicks">
		<li id="kwick_blue" class="kwick">
				<table class="tab"><tr><td class="top21">
					<div class="content">
						<h2>Shower Enclosures</h2>
						<h3>Shower Trays</h3>
						 - Completely Level Access<br />
					</div><!-- content 1 -->
				</td></tr><tr><td class="bottom21">
					<div class="button"><a href="#">find out more >></a></div>
				</td></tr></table>
		</li>
		<li id="kwick_orange" class="kwick">
				<table class="tab"><tr><td class="top21">
					<div class="content">
						<h2>Seating</h2>
						<h3>Bathroom Products</h3>
						 - Bath Stools<br />
					</div><!-- content 3 -->
				</td></tr><tr><td class="bottom21">
					<div class="button"><a href="#">find out more >></a></div>
				</td></tr></table>
		</li>
		<li id="kwick_green" class="kwick">
				<table class="tab"><tr><td class="top21">
					<div class="content">
						<h2>Grab Rails</h2>
						  - Straight or Angled<br />
					</div><!-- content 2 -->
				</td></tr><tr><td class="bottom21">
					<div class="button"><a href="#">find out more >></a></div>
				</td></tr></table>
		</li>

	</ul><span class="clr"><!-- spanner --></span>
</div>
</td></tr></table>

All help gratefully recieved.

Cheers

Sticky

[pauldodman]

Hi Douglas

To put this on the home page only, wrap your include in the following if statement:
{if $main eq "catalog" and $current_category.category eq ""}

And wrap your script in {literal} tags {/literal}

[stickygoblin]

With the addition of the {literal} tags around the javascript {/literal} and the if statement from above the mootools kwicks effect plugs in really nicley, needs a bit of hacking to work in ie6 though so watch the css.

If you have any suggestions as to how to get the css working in ei6 i would be grateful

cheers

Sticky