Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Mouseover Minicart

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 07-09-2008, 07:12 PM
  neaisha's Avatar 
neaisha neaisha is offline
 

eXpert
  
Join Date: May 2006
Posts: 276
 

Default Mouseover Minicart

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

Code:
{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.

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

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

you can edit the display in the minicartdd.tpl file. that's pretty much it.
Attached Thumbnails
Click image for larger version

Name:	dropdownmini.jpg
Views:	231
Size:	33.0 KB
ID:	1034  
__________________
X-Cart Gold 4.4.3
--------------------------------------
Reply With Quote
  #2  
Old 07-10-2008, 06:35 AM
  photo's Avatar 
photo photo is offline
 

X-Wizard
  
Join Date: Feb 2006
Location: UK
Posts: 1,146
 

Default Re: Mouseover Minicart

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


Thanks
__________________
v4.1.10
In Dev v4.5.x


"If you don't keep an eye on your business, someone else will."
Reply With Quote
  #3  
Old 07-10-2008, 08:22 AM
  neaisha's Avatar 
neaisha neaisha is offline
 

eXpert
  
Join Date: May 2006
Posts: 276
 

Default Re: Mouseover Minicart

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

Code:
//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....

Code:
style="background-image: url(/xcart/images/sunflower02.gif); background-repeat: repeat;"
__________________
X-Cart Gold 4.4.3
--------------------------------------
Reply With Quote
  #4  
Old 07-10-2008, 08:49 AM
  photo's Avatar 
photo photo is offline
 

X-Wizard
  
Join Date: Feb 2006
Location: UK
Posts: 1,146
 

Default Re: Mouseover Minicart

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
__________________
v4.1.10
In Dev v4.5.x


"If you don't keep an eye on your business, someone else will."
Reply With Quote
  #5  
Old 07-10-2008, 09:06 AM
  neaisha's Avatar 
neaisha neaisha is offline
 

eXpert
  
Join Date: May 2006
Posts: 276
 

Default Re: Mouseover Minicart

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

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

Code:
<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.
__________________
X-Cart Gold 4.4.3
--------------------------------------
Reply With Quote
  #6  
Old 07-10-2008, 09:27 AM
  photo's Avatar 
photo photo is offline
 

X-Wizard
  
Join Date: Feb 2006
Location: UK
Posts: 1,146
 

Default Re: Mouseover Minicart

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

Code:
<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.
__________________
v4.1.10
In Dev v4.5.x


"If you don't keep an eye on your business, someone else will."
Reply With Quote
  #7  
Old 07-10-2008, 10:55 AM
  neaisha's Avatar 
neaisha neaisha is offline
 

eXpert
  
Join Date: May 2006
Posts: 276
 

Default Re: Mouseover Minicart

kewl
__________________
X-Cart Gold 4.4.3
--------------------------------------
Reply With Quote
  #8  
Old 07-14-2008, 12:59 PM
  WhiteDoveGifts's Avatar 
WhiteDoveGifts WhiteDoveGifts is offline
 

X-Adept
  
Join Date: Oct 2006
Location: Maarssen, The Netherlands
Posts: 474
 

Default Re: Mouseover Minicart

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?
__________________
____________________________
X-Cart Gold 4.1.10

EWD Hosting | CDSEO Pro | One Page Checkout | Smart Search | Telafirma Dynamic Images | X-AOM | Product Importer Pro and many custom mods and tweaks found here...
Reply With Quote
  #9  
Old 07-14-2008, 08:29 PM
  neaisha's Avatar 
neaisha neaisha is offline
 

eXpert
  
Join Date: May 2006
Posts: 276
 

Default Re: Mouseover Minicart

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.
__________________
X-Cart Gold 4.4.3
--------------------------------------
Reply With Quote
  #10  
Old 08-28-2008, 03:50 PM
 
effour effour is offline
 

Advanced Member
  
Join Date: May 2007
Posts: 96
 

Default Re: Mouseover Minicart

Great Mod!

Is it possible to add a product thumbnail to this?

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

Code:
{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.

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

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

you can edit the display in the minicartdd.tpl file. that's pretty much it.
__________________
4.1.7
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 06:55 PM.

   

 
X-Cart forums © 2001-2020