View Single Post
  #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