ANLEITUNG: Warenkorb in den Header verschieben

[Tomcraft]

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

Code: PHP  [Auswählen]

{*$box_CART*}

Suche in "/templates/xtc5/index.html":

Code: PHP  [Auswählen]

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

Code: PHP  [Auswählen]

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

Code: PHP  [Auswählen]

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

Code: PHP  [Auswählen]

{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}>
      <p><strong>{$PRODUCTS}</strong> {#text_article#} | {#text_total#}:<strong>{$TOTAL}</strong></p>
   </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":

Code: CSS  [Auswählen]

#header #logo {
  float:left
}

und füge danach ein:

Code: CSS  [Auswählen]

#header #cart {
  #background: url(img/cart.png) no-repeat;
  #background-position: 160px 4px;
  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

Code: CSS  [Auswählen]

[...]
  #background: url(img/cart.png) no-repeat;
  #background-position: 160px 4px;
[...]

entfernen und ein "cart.png" im Ordner "/templates/xtc5/img/" bereitstellen.
Hier gibt es freie Icons als Alternative für die angehängte "cart.png" für den Warenkorb: Free Icons For E-Commerce Websites

Da somit das Suchfeld oben weg fällt könnte das hier noch interessant sein: ANLEITUNG: Suchfeld ins Top-Menü verschieben

So könnte es nach dem Umbau aussehen:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Grüße

Torsten

[EDIT Tomcraft 14.09.2014: Link zu freien Icons hinzugefügt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=6470.0

[z3us]

Ein Screenshot über das Endergebnis wäre noch hilfreich  

[Tomcraft]

Da hast du Recht!

Habe ich mal nachgereicht.

Grüße

Torsten

[floh]

Kurzes Feedback....

Diese Anleitung funktioniert bestens. Ich würde aber dann den "Warenkorb" aus dem Top-Menü noch rausnehmen.  

Z.B. so: Suche in "/templates/xtc5/index.html":

Code: PHP  [Auswählen]

            <li><a href="{$cart}">{#link_cart#}</a></li>

diese Zeile einfach löschen.

Anbei Screenshot.....

Gruß

floh
[ Für Gäste sind keine Dateianhänge sichtbar ]

[Tomcraft]

Doppelt hält besser, so kann der Kunde nicht sagen, dass er den Warenkorb nicht gefunden hat!

Danke für's Feedback.

Grüße

Torsten

[Max2010]

super Anleitung! Danke
Beste Grüße
Max

[Tomcraft]

Danke für die Rückmeldung.

Schön, dass es bei dir funktioniert hat.

Grüße

Torsten

[Bcoola]

Super Anleitung - Grosses Dankeschön!  

Ich hoffe ich kann evtl. noch eine Frage dazu stellen....

Ist es möglich den gesamten div-Container zu einem Link zum Warenkorb zu machen, also das der Kunde auch wenn er auf den Einkaufswagen klickt, seinen Warenkorb angezeigt bekommt, anstelle so wie es bisher bei dem Wort "Warenkorb" ist?

Wenn ja - wie?

Danke!

Ben

[floh]

Indem Du das Bild einfach mit der shopping_cart.php aus dem Rootverzeichnis verlinkst.....

Gruß

floh

[Tomcraft]

Ersetze deine box_cart.html mit diesem Inhalt:

Code: PHP  [Auswählen]

{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'}
                <a href="{$LINK_CART}"><h2 class="boxcartheader-menu"><strong>{#link_cart#}:</strong></h2>
               <div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
                        <strong>{$PRODUCTS}</strong> {#text_article#} | {#text_total#}:<strong>{$TOTAL}</strong>
               </div>
                </a>
        {else} <!-- cart has no content -->
                <a href="{$LINK_CART}"><h2 class="boxcartheader-menu"><strong>{#link_cart#}:</strong></h2>
               <div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
                        <strong>0</strong> {#text_article#} | {#text_total#}: <strong>0,00 {$smarty.session.currency}</strong>{*#text_empty_cart#*}
               </div>
                </a>
{/if}
 
        {if $ACTIVATE_GIFT=='true'}
                {if $GV_AMOUNT neq ''}
                        <div class="boxcartbody-menu">{#voucher_balance#} <strong>{$GV_AMOUNT}</strong></div>
               {/if}
        {/if}
{/if}

Dann suchst du in der stylesheet.css:

Code: CSS  [Auswählen]

#header #cart {
        #background: url(img/cart.png) no-repeat;
        #background-position: 160px 4px;
        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;
}

und ersetzt es mit:

Code: CSS  [Auswählen]

#header #cart {
        background: url(img/cart.png) no-repeat;
        background-position: 195px 4px;
        width: 282px;
        height:95px;
        float:right;
        color:#fff;
        padding:0;
        margin:17px 0 0 0;
}
#header #cart a {
        padding:1px 0 0 10px;
        display:block;
        height:80px;
        color:#fff;
        font-size:12px;
        outline: none;
}
#header #cart h2 {
        color:#fff;
        font-size:13px;
        outline: none;
}

Es gibt jetzt sicherlich einige, die die Hände über dem Kopf zusammen schlagen, weil der Link um das DIV gelegt ist.

Grüße

Torsten

[EDIT Tomcraft 02.12.2010: Fehler in Anleitung korrigiert, Danke an bkabel.]

[Bcoola]

Hi Torsten,

Cool!

Funktioniert perfekt.

Danke.

Ben ->  

[Tomcraft]

Ich frage mich, wieso so viele Probleme mit dem Einbau haben, in der Anleitung, die sich auf das Template xtc5 bezieht, steht doch alles drin.

Grüße

Torsten

[bkabel]

Update:
nach Einbau dieser Anleitung habe ich festgestellt, dass diese Zeile in der "/templates/xtc5/boxes/box_cart.html"

Code: PHP  [Auswählen]

<strong>{$PRODUCTS}</strong> {#text_article#} | {#text_total#}:<strong>{$TOTAL}</strong>

bei mir in die TopNavi rutscht sobald ich einen Artikel in den Warenkorb gelegt habe.
Deshalb korrigiere ich die Anleitung "um den gesamten div-Container zu einem Link zum Warenkorb zu machen" nochmal!

Code: PHP  [Auswählen]

{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'}
        <a href="{$LINK_CART}"><h2 class="boxcartheader-menu"><strong>{#link_cart#}:</strong></h2>
       <div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
            <strong>{$PRODUCTS}</strong> {#text_article#} | {#text_total#}:<strong>{$TOTAL}</strong>
       </div>
        </a>
    {else} <!-- cart has no content -->
        <a href="{$LINK_CART}"><h2 class="boxcartheader-menu"><strong>{#link_cart#}:</strong></h2>
       <div{if $GV_AMOUNT =='' } class="boxcartbody-menu" {else} class="boxcartbody-menu"{/if}>
            <strong>0</strong> {#text_article#} | {#text_total#}: <strong>0,00 {$smarty.session.currency}</strong><br>{#text_empty_cart#}</br>
       </div>
        </a>
{/if}

    {if $ACTIVATE_GIFT=='true'}
        {if $GV_AMOUNT neq ''}
            <div class="boxcartbody-menu">{#voucher_balance#} <strong>{$GV_AMOUNT}</strong></div>
       {/if}
    {/if}
{/if}

Ansonsten kann die CSS Formatierung so wie oben bleiben oder nach eigenen Wünschen angepasst werden!

Gruß Björn

[albersmann]

Wäre nicht sinnvoll die Warenkorbgrafik auch mit dem Warenkorb zu verlinken?

Code: CSS  [Auswählen]

background: url(img/cart.png) no-repeat;

Jemand eine Idee was wo eingefügt werden muss?

[Tomcraft]

Das einfachste ist es, du legst den Link einfach um das komplette DIV herum.

Grüße

Torsten