X-Cart forums

[neaisha]

yo,

this isn't really a custom mod...i "liberated" the idea from another site - http://www.carolsdaughter.com/ and "stumbled" upon a freebie code from good ole dynamicdrive - http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm ... i'm so creative

on the example site, when you hover over the shopping bag, it shows you the contents. of the cart. you can't remove items from your bag but given the existing x-cart minicart.tpl file, customers will have the option of removing an item without having to actually be on the shopping cart page. it's also a good option if you like the idea of a minicart but dont like the existing display.

create a js file called dropdown.js then upload dropdown.js file to the skin1/customer directory.

then add this before the head tag in /customer/home.tpl

{literal}
<script src="/xcart/skin1/customer/dropdown.js"></script>
{/literal}

then i created a file called minicartdd.tpl, inserted the following code and uploaded it to the /customer/main directory. notice that i actually have the shopping bag link in a table. you will have to adjust this according to your site. i removed the other columns that i had in my original code for this initial table to make things a bit simpler.

also, i did not change the original "id" for the dynamicdrive script so the id that's being referenced is id="searchlink". you of course can change this by replacing all instances of "searchlink" with "minicartdropdown" or whatever.

<table align="right">
<tr><td  border="0"><a href="cart.php" id="searchlink" rel="subcontent">shopping bag</a>
</td></tr></table><br />

<DIV>
{if $minicart_total_items > 0} 

<table width="185px" border="0" cellpadding="0" cellspacing="0" >
<tr>

	<td  class="MiniCartTextTiny">item</td>
	<td  class="MiniCartTextTiny" align="right">quantity</td>
</tr>

</table>


<table style="background-color: #ffcc00; margin-bottom:0; border: 1px solid #404040;" width="185" cellpadding="0" cellspacing="0" height="3">
<tr><td>&nbsp;</td></tr></table>



<table width="175px" border="0" cellpadding="5" cellspacing="0" style="background-image: url(/store/images/sunflower02.gif); background-repeat: repeat;"><tr><td>



{foreach from=$minicart_contents item=item} 
<table width="175px" border="0" cellpadding="5" cellspacing="0" style="background-image: url(/xcart/images/sunflower02.gif); background-repeat: repeat;">

<tr>
<td class="MiniCartTextTiny" width="100"><a href="product.php?productid={ $item.productid }" title="{$item.product}">{$item.product|truncate:45:"...":true}</a>
</td>
<td class="MiniCartTextTiny" align="right">
{$item.amount}</td></tr></table>



<table width="175px" border="0" cellpadding="1" cellspacing="0">
<tr>
<td class="MiniCartTextTiny">{include file="currency.tpl" value=$item.display_subtotal}</td>

<td align="right" class="MiniCartTextTiny">
{if $config.Adaptives.platform eq 'MacPPC' && $config.Adaptives.browser eq 'NN'}
  {assign var="js_to_href" value="Y"}
{/if}
{if $type eq 'input'}
  {assign var="img_type" value='input type="image" class="blank"'}
{else}
  {assign var="img_type" value='IMG'}
{/if}
{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}
{if $js_link eq $href}
  {assign var="js_link" value="javascript: self.location='cart.php?mode=delete&productindex=`$item.cartid`'"}
{else}
  {assign var="js_link" value=$href}
  {if $js_to_href ne 'Y'}
    {assign var="onclick" value=$href}
    {assign var="href" value="javascript: void(0);"}
  {/if}
{/if}

{if ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}<a href="{$js_link}">remove</a>
{else}
<A href="cart.php?mode=delete&productindex=`$item.cartid`"{if $onclick ne ''} onclick="{$onclick}"{/if}{if $title ne ''} title="{$title}"{/if}{if $target ne ''} target="{$target}"{/if}><FONT class="FormButton">{$button_title} </FONT></A>
{/if}
</td>

</tr>	<td height="5" colspan="2">&nbsp;</td></tr>
</table>

{/foreach} 



<table width="175px" border="0" cellpadding="5" cellspacing="0">
<tr>
<td  class="MiniCartTextTiny"><strong>total:</strong> </td>
{* calculate grand total including shipping cost*}
{math assign="grandtotal" equation="minicarttotalcost+minicartshipping" minicarttotalcost=$minicart_total_cost minicartshipping=$minicart_shipping}
{* end of grand total calculation *}
<td align="right"  class="MiniCartTextTiny">{include file="currency.tpl" value=$grandtotal}</td>
</tr>

<tr><td align="center"><a href="javascript:dropdowncontent.hidediv('subcontent')">hide bag</a></td>


<td align="center"><a href="cart.php">open bag</a></td></tr>

</table>

{else}
<table width="175px" border="0" cellpadding="5" cellspacing="0">
<tr>
	<td rowspan="2" width="23"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" /></td>
	<td class="VertMenuItems" align="center"><b>{$lng.lbl_cart_is_empty}</b></td>
</tr>

</table>

{/if} 


</td></tr>
</table>
</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "left-bottom", 500, 'mouseover')
</script>

</td></tr></table>

then in head_customer.tpl or head.tpl depending on which file your site uses, i added this to where i wanted the minicart to appear.

{include file="customer/main/minicartdd.tpl"}

you can edit the display in the minicartdd.tpl file. that's pretty much it.

[photo]

Looks pretty nifty. Exactly what did you put in your dropdown.js?


Thanks

[neaisha]

hmm...i actually reference the wrong link from dynamic drive. i edited the original post to reflect this. the code for dropdown.js can be accessed here...

http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

or this is what i have in my file...

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//**Updated: Dec 19th, 07': Added ability to dynamically populate a Drop Down content using an external file (Ajax feature)
//**Updated: Feb 29th, 08':
				//1) Added ability to reveal drop down content via "click" of anchor link (instead of default "mouseover")
				//2) Added ability to disable drop down content from auto hiding when mouse rolls out of it
				//3) Added hidediv(id) public function to directly hide drop down div dynamically

var dropdowncontent={
	disableanchorlink: true, //when user clicks on anchor link, should link itself be disabled (always true if "revealbehavior" above set to "click")
 hidedivmouseout: [true, 200], //Set hiding behavior within Drop Down DIV itself: [hide_div_onmouseover?, miliseconds_before_hiding]
	ajaxloadingmsg: "Loading content. Please wait...", //HTML to show while ajax page is being feched, if applicable
	ajaxbustcache: true, //Bust cache when fetching Ajax pages?

	getposOffset:function(what, offsettype){
		return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
	},

	isContained:function(m, e){
		var e=window.event || e
		var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
		while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
		if (c==m)
			return true
		else
			return false
	},

	show:function(anchorobj, subobj, e){
		if (!this.isContained(anchorobj, e)){
			var e=window.event || e
			if (e.type=="click" && subobj.style.visibility=="visible"){
				subobj.style.visibility="hidden"
				return
			}
			var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
			var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
			subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
			subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"px"
			subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
			subobj.style.visibility="visible"
			subobj.startTime=new Date().getTime()
			subobj.contentheight=parseInt(subobj.offsetHeight)
			if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
				clearTimeout(window["hidetimer_"+subobj.id])
			this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
		}
	},

	curveincrement:function(percent){
		return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
	},

	slideengine:function(obj, direction){
		var elapsed=new Date().getTime()-obj.startTime //get time animation has run
		if (elapsed<obj.glidetime){ //if time run is less than specified length
			var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 1-this.curveincrement(elapsed/obj.glidetime)
			var currentclip=(distancepercent*obj.contentheight)+"px"
			obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
			window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
		}
		else{ //if animation finished
			obj.style.clip="rect(0 auto auto 0)"
		}
	},

	hide:function(activeobj, subobj, e){
		if (!dropdowncontent.isContained(activeobj, e)){
			window["hidetimer_"+subobj.id]=setTimeout(function(){
				subobj.style.visibility="hidden"
				subobj.style.left=subobj.style.top=0
				clearTimeout(window["glidetimer_"+subobj.id])
			}, dropdowncontent.hidedivmouseout[1])
		}
	},

	hidediv:function(subobjid){
		document.getElementById(subobjid).style.visibility="hidden"
	},

	ajaxconnect:function(pageurl, divId){
		var page_request = false
		var bustcacheparameter=""
		if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
			page_request = new XMLHttpRequest()
		else if (window.ActiveXObject){ // if IE6 or below
			try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
			} 
			catch (e){
				try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch (e){}
			}
		}
		else
			return false
		document.getElementById(divId).innerHTML=this.ajaxloadingmsg //Display "fetching page message"
		page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
		if (this.ajaxbustcache) //if bust caching of external page
			bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
		page_request.open('GET', pageurl+bustcacheparameter, true)
		page_request.send(null)
	},

	loadpage:function(page_request, divId){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
			document.getElementById(divId).innerHTML=page_request.responseText
		}
	},

 init:function(anchorid, pos, glidetime, revealbehavior){
		var anchorobj=document.getElementById(anchorid)
		var subobj=document.getElementById(anchorobj.getAttribute("rel"))
		var subobjsource=anchorobj.getAttribute("rev")
		if (subobjsource!=null && subobjsource!="")
			this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
		subobj.dropposition=pos.split("-")
		subobj.glidetime=glidetime || 1000
		subobj.style.left=subobj.style.top=0
		if (typeof revealbehavior=="undefined" || revealbehavior=="mouseover"){
			anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
			anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
			if (this.disableanchorlink) anchorobj.onclick=function(){return false}
		}
		else
			anchorobj.onclick=function(e){dropdowncontent.show(this, subobj, e); return false}
		if (this.hidedivmouseout[0]==true) //hide drop down DIV when mouse rolls out of it?
			subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
	}
}

oh and just so you know, this script only allows for a specific orientation of the cart. either -"left-bottom", "right-bottom", "left-top", and "right-top." so unlike the sample site, where the shopping cart displays in-line and directly under the shopping bag table, this either justifies it to the left or right but it's a minor ick-factor.

also, i forgot to add that i reference a background image for my minicart which is noted as - /xcart/images/sunflower02.gif in the above code. you can either remove the background or add your own. OR remove the 2 instances of this code from minicartdd.tpl altogether....

style="background-image: url(/xcart/images/sunflower02.gif); background-repeat: repeat;"

[photo]

Ahh, that makes more sense. I am getting the following error on my local server.
"anchorobj has no properties"

Any idea what may be causing this?


Thanks

[neaisha]

yeah, my bad. i edited the original post...again.

the following code should have gone before the main DIV in minicartdd.tpl

<table align="right">
<tr><td  border="0"><a href="cart.php" id="searchlink" rel="subcontent">shopping bag</a>
</td></tr></table><br />

so in your case, just replace what you have in your minicartdd.tpl with what's now in the original post.

[photo]

Ah, finally got it to work! You forgot to add the id to the div in minicartdd.tpl

<DIV id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px;">

Now all have to do is tweek it to fit my layout!

Great mod Thanks.

[neaisha]

kewl

[WhiteDoveGifts]

Pretty cool mod! I tried installing it yesterday but it breaks my cart completely (only the header is shown, body is just empty) whenever I add minicartdd.tpl to my head.tpl. Any idea what could be causing this?

[neaisha]

not sure. could be a version thing. i'd start by replacing everything between the div tags in minicartdd.tpl with your the code in your minicart.tpl file OR, just delete all the stuff between the div tags and include the minicart.tpl file then see if that works.

[effour]

Great Mod!

Is it possible to add a product thumbnail to this?

Originally Posted by neaisha

yo,

this isn't really a custom mod...i "liberated" the idea from another site - http://www.carolsdaughter.com/ and "stumbled" upon a freebie code from good ole dynamicdrive - http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm ... i'm so creative

on the example site, when you hover over the shopping bag, it shows you the contents. of the cart. you can't remove items from your bag but given the existing x-cart minicart.tpl file, customers will have the option of removing an item without having to actually be on the shopping cart page. it's also a good option if you like the idea of a minicart but dont like the existing display.

create a js file called dropdown.js then upload dropdown.js file to the skin1/customer directory.

then add this before the head tag in /customer/home.tpl

{literal}
<script src="/xcart/skin1/customer/dropdown.js"></script>
{/literal}

then i created a file called minicartdd.tpl, inserted the following code and uploaded it to the /customer/main directory. notice that i actually have the shopping bag link in a table. you will have to adjust this according to your site. i removed the other columns that i had in my original code for this initial table to make things a bit simpler.

also, i did not change the original "id" for the dynamicdrive script so the id that's being referenced is id="searchlink". you of course can change this by replacing all instances of "searchlink" with "minicartdropdown" or whatever.

<table align="right">
<tr><td  border="0"><a href="cart.php" id="searchlink" rel="subcontent">shopping bag</a>
</td></tr></table><br />

<DIV>
{if $minicart_total_items > 0} 

<table width="185px" border="0" cellpadding="0" cellspacing="0" >
<tr>

    <td  class="MiniCartTextTiny">item</td>
    <td  class="MiniCartTextTiny" align="right">quantity</td>
</tr>

</table>


<table style="background-color: #ffcc00; margin-bottom:0; border: 1px solid #404040;" width="185" cellpadding="0" cellspacing="0" height="3">
<tr><td>&nbsp;</td></tr></table>



<table width="175px" border="0" cellpadding="5" cellspacing="0" style="background-image: url(/store/images/sunflower02.gif); background-repeat: repeat;"><tr><td>



{foreach from=$minicart_contents item=item} 
<table width="175px" border="0" cellpadding="5" cellspacing="0" style="background-image: url(/xcart/images/sunflower02.gif); background-repeat: repeat;">

<tr>
<td class="MiniCartTextTiny" width="100"><a href="product.php?productid={ $item.productid }" title="{$item.product}">{$item.product|truncate:45:"...":true}</a>
</td>
<td class="MiniCartTextTiny" align="right">
{$item.amount}</td></tr></table>



<table width="175px" border="0" cellpadding="1" cellspacing="0">
<tr>
<td class="MiniCartTextTiny">{include file="currency.tpl" value=$item.display_subtotal}</td>

<td align="right" class="MiniCartTextTiny">
{if $config.Adaptives.platform eq 'MacPPC' && $config.Adaptives.browser eq 'NN'}
  {assign var="js_to_href" value="Y"}
{/if}
{if $type eq 'input'}
  {assign var="img_type" value='input type="image" class="blank"'}
{else}
  {assign var="img_type" value='IMG'}
{/if}
{assign var="js_link" value=$href|regex_replace:"/^\s*javascript\s*:/Si":""}
{if $js_link eq $href}
  {assign var="js_link" value="javascript: self.location='cart.php?mode=delete&productindex=`$item.cartid`'"}
{else}
  {assign var="js_link" value=$href}
  {if $js_to_href ne 'Y'}
    {assign var="onclick" value=$href}
    {assign var="href" value="javascript: void(0);"}
  {/if}
{/if}

{if ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}<a href="{$js_link}">remove</a>
{else}
<A href="cart.php?mode=delete&productindex=`$item.cartid`"{if $onclick ne ''} onclick="{$onclick}"{/if}{if $title ne ''} title="{$title}"{/if}{if $target ne ''} target="{$target}"{/if}><FONT class="FormButton">{$button_title} </FONT></A>
{/if}
</td>

</tr>    <td height="5" colspan="2">&nbsp;</td></tr>
</table>

{/foreach} 



<table width="175px" border="0" cellpadding="5" cellspacing="0">
<tr>
<td  class="MiniCartTextTiny"><strong>total:</strong> </td>
{* calculate grand total including shipping cost*}
{math assign="grandtotal" equation="minicarttotalcost+minicartshipping" minicarttotalcost=$minicart_total_cost minicartshipping=$minicart_shipping}
{* end of grand total calculation *}
<td align="right"  class="MiniCartTextTiny">{include file="currency.tpl" value=$grandtotal}</td>
</tr>

<tr><td align="center"><a href="javascript:dropdowncontent.hidediv('subcontent')">hide bag</a></td>


<td align="center"><a href="cart.php">open bag</a></td></tr>

</table>

{else}
<table width="175px" border="0" cellpadding="5" cellspacing="0">
<tr>
    <td rowspan="2" width="23"><img src="{$ImagesDir}/cart_empty.gif" width="19" height="16" alt="" /></td>
    <td class="VertMenuItems" align="center"><b>{$lng.lbl_cart_is_empty}</b></td>
</tr>

</table>

{/if} 


</td></tr>
</table>
</DIV>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("searchlink", "left-bottom", 500, 'mouseover')
</script>

</td></tr></table>

then in head_customer.tpl or head.tpl depending on which file your site uses, i added this to where i wanted the minicart to appear.

{include file="customer/main/minicartdd.tpl"}

you can edit the display in the minicartdd.tpl file. that's pretty much it.