Aufgeklappter warenkorb

Deutsches Forum
1

Möchte gerne, dass nur ein “kleiner Warenkorb” im Shop oben rechts angezeigt wird, ohne Produkteliste, die sich im Warenkorb befinden.

Geht man aber mit der Maus drüber klappt sich der Warenkob aus und die darin befindindlichen Artikel werden angezeigt, gibts sowas schon oder wie setz ich das um?

Vielen dank

Grüsse

2

Hi Rene,

ich habe das schon mal umgesetzt. Das Template sieht dann folgendermaßen aus:


<div id="topminibasket">
	[{oxhasrights ident="TOBASKET"}]
	[{if $oxcmp_basket->getContents()}]
	[{assign var="currency" value=$oView->getActCurrency() }]
	<a href="[{ oxgetseourl ident=$oViewConf->getSslSelfLink()|cat:"cl=basket" }]" rel="nofollow" title="[{ oxmultilang ident="TO_BASKET_TITLE" }]" onfocus="this.blur();">
	<span id="minibasket">
	    <span class="quantity">[{ $oxcmp_basket->getItemsCount()}] [{ oxmultilang ident="BASKET_ARTICLES" }]</span> - <span class="order">[{ $oxcmp_basket->getFProductsPrice()}] [{ $currency->sign}]</span>
	</span>
	</a>
	
	<div id="topbasketlist">
		<div class="wrapper">
		[{foreach from=$oxcmp_basket->getContents() name=rightlist item=_product}]
			<div class="listitem">
			[{ assign var="sRightListArtTitle" value=$_product->getTitle() }]
			<a href="[{$_product->getLink()}]" class="picture">
			<img src="[{$_product->getIconUrl()}]" alt="[{ $sRightListArtTitle|strip_tags }]">
			</a>
			<a href="[{$_product->getLink()}]">[{ $sRightListArtTitle|strip_tags }]</a><br>
			([{$_product->getAmount()}] [{ oxmultilang ident="INC_CMP_BASKET_QTY" }])
			</div>
		[{/foreach}]
		</div>
	</div>
	
	[{else}]
	<a href="[{ oxgetseourl ident=$oViewConf->getSslSelfLink()|cat:"cl=basket" }]" rel="nofollow" title="[{ oxmultilang ident="TO_BASKET_TITLE" }]" onfocus="this.blur();">
	<span id="minibasket">
	    <span class="quantity">Warenkorb ist leer</span>
	</span>
	</a>
	[{/if}]
	[{/oxhasrights}]
</div>

JQuery:



$(document).ready(function()
{
 initMiniBasket()
});

function initMiniBasket(){

var basketTimeout = false;

	$("#topminibasket").hover(
	  function () {
	    if(!$("#topbasketlist").is(":animated"))
			$("#topbasketlist").slideDown();
	  },
	  function () {
	  
	  if(basketTimeout)
		{ window.clearTimeout(basketTimeout); }
	  
	  	if(!$("#topbasketlist").is(":animated"))
	    $("#topbasketlist").slideUp();
	    
	    basketTimeout = window.setTimeout(function(){ $("#topbasketlist").slideUp(); }, 10);
	  }
	);
}

Der Rest sind dann CSS Anpassungen.

Viele Grüße vom Chris