Tutorial: Warenkorb in den Header verschieben
Aus Wiki | modified eCommerce Shopsoftware
Zur Navigation springenZur Suche springenAuch hier nach wurde schon oft gefragt, daher hier jetzt als Anleitung:
In "/templates/xtc5/index.html" bitte die Warenkorb-Box wie folgt mit Asterisk (*) auskommentieren:
{*$box_CART*}
Suche in "/templates/xtc5/index.html":
<div id="header">
<div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
<div id="search">{$box_SEARCH}</div>
</div>
und ersetze mit:
<div id="header">
<div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
<div id="cart">{$box_CART}</div>
</div>
Suche in "/templates/xtc5/boxes/box_cart.html":
{config_load file="$language/lang_$language.conf" section="boxes"}
{if $deny_cart neq 'true'}
<h2 class="boxcartheader">{#heading_cart#}</h2>
<div{if $GV_AMOUNT =='' } class="boxcartbody" {else} class="boxcartbody"{/if}>
{if $ACTIVATE_GIFT=='true'}
{if $GV_AMOUNT neq ''}
<p><strong>{#voucher_balance#}</strong> {$GV_AMOUNT}</p>
<div class="hr"></div>
{/if}
{/if}
{if $empty=='false'} <!-- cart has content -->
{foreach name=aussen item=products_data from=$products}
<p>{$products_data.QTY} x <a href="{$products_data.LINK}">{$products_data.NAME|truncate:20:"...":true}</a></p>
{/foreach}
<div class="hr"></div>
<p style="text-align:right">{if $DISCOUNT}{#text_discount#} {$DISCOUNT}<br />{/if}
{$UST}
<strong>{#text_total#}:{$TOTAL}</strong><br />
{if $SHIPPING_INFO}{$SHIPPING_INFO}{/if}</p>
<div class="hr"></div>
<p style="text-align:right;"><a href="{$LINK_CART}"><strong>{#heading_cart#} »</strong></a></p>
{else} <!-- cart has no content -->
<p>{#text_empty_cart#}</p>
{/if}
</div>
{/if}
und ersetze mit:
{config_load file="$language/lang_$language.conf" section="index"}
{config_load file="$language/lang_$language.conf" section="shopping_cart"}
{config_load file="$language/lang_$language.conf" section="boxes"}
{if $deny_cart neq 'true'}
{if $empty=='false'}
<h2 class="boxcartheader-menu"><a href="{$LINK_CART}"><strong>{#link_cart#}:</strong></a></h2>
<div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
<strong>{$PRODUCTS}</strong> {#text_article#} | {#text_total#}:<strong>{$TOTAL}</strong>
</div>
{else} <!-- cart has no content -->
<h2 class="boxcartheader-menu"><a href="{$LINK_CART}"><strong>{#link_cart#}:</strong></a></h2>
<div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
<p><strong>0</strong> {#text_article#} | {#text_total#}: <strong>0,00 {$smarty.session.currency}</strong>{*#text_empty_cart#*}</p>
</div>
{/if}
{if $ACTIVATE_GIFT=='true'}
{if $GV_AMOUNT neq ''}
<div class="boxcartbody-menu">{#voucher_balance#} <strong>{$GV_AMOUNT}</strong></div>
{/if}
{/if}
{/if}
Suche in "/templates/xtc5/stylesheet.css":
#header #logo {
float:left
}
und füge danach ein:
#header #cart {
#background: url(img/cart.png) no-repeat;
#background-position:right;
width: 230px;
height:75px;
float:right;
color:#fff;
padding:10px 10px 20px 0px;
margin-right:12px;
}
#header #cart a {
color:#fff;
font-size:13px;
outline: none;
}
Wenn ihr ein Warenkorb-Symbol hinter dem Warenkorb anzeigen wollt, dann bitte die Rauten vor den Zeilen
[...]
#background: url(img/cart.png) no-repeat;
#background-position:right;
[...]
entfernen und ein "cart.png" im Ordner "/templates/xtc5/img/" bereitstellen.
So könnte es nach dem Umbau aussehen: