X-Cart forums - Mouseover Minicart

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Mouseover Minicart (https://forum.x-cart.com/showthread.php?t=41005)

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

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.

Re: Mouseover Minicart

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

Thanks

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;"

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

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.

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.

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?

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.

Re: Mouseover Minicart

Great Mod!

Is it possible to add a product thumbnail to this?

Quote:

Originally Posted by neaisha

Code:

{literal}

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

{/literal}

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.