Za prikaz košarice bomo uporabili že obstoječo strukturo php datoteke in sicer »Shopping cart sidebar«. Izdelali bomo kopijo te datoteke in uredili nov blok v magentu, ki bo prikazoval našo novo drop-down košarico. Nato bomo spremenili nastavitve v magentu, da ob novo dodanem izdelku v košarico ostanemo na isti strani. Dodali bomo kodo, katera bo poskrbela, da se košarica prikaže (spusti), ko se nakupi nov izdelek.

Za začetek bomo naredili nov phtml file v app/design/frontend/[default]/[default]/template/checkout/cart/ in ga poimenovali top-cart.phtml. [default] zamenjamo z imeni naše template teme. Vsebino datoteke, ki se nahaja na isti lokaciji, sidebar.phtml kopiramo in prilepimo v našo top-cart.phtml. Vsebino bomo kasneje po želji spremenili.

Naslednji korak je narediti nov blok, tako, da bomo lahko našo košarico kjer želimo priklicali preko php-ja. V mapi app/design/frontend/[default]/[default]/layout/ naredimo (če že ne obstaja) datoteko local.xml. V datoteko zapišemo kodo, za ustvarjanje novega bloka:

<layout version="0.1.0"> <default> <reference name="topcart"> <block type="checkout/cart_sidebar" name="checkout.cart.sidebar" as="topcart" template="checkout/cart/top-cart.phtml"/> </reference> </default> </layout>

Odpremo datoteko page.xml. V njen poiščemo kje se nahajajo imena raznoraznih blokov npr: <block type="core/text_list" name="right" as="right" translate="label">.

Pod tem blokom dodamo naš novi blok za našo košarico:

<default> <block> .... <!— od tukaj naprej kopiramo --> <block type="core/text_list" name="topcart" as="topcart" translate="label"> <label>Top cart</label> </block> ... </block> </default>

V layout datotekah, ki se nahajajo v app/design/frontend/[default]/[default]/template/page, naprimer »1column.phtml«, lahko sedaj kjerkoli pokličemo naš nov blok za košarico s sledečo kodo:

<?php echo $this->getChildHtml('topcart') ?>

Na tak način dodamo zgornjo kodo v vse layout datoteke (2columns-right.phtml,...), kjer želimo, da se prikaže naša košarica.

Če pa želimo naš nov block priklicat iz CMS strani, pa v kodo strani dodamo naslednji blok:

{ { block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/top-cart.phtml" } }

Če v top-cart.phtml datoteki pustimo stavek »if ($this->getIsNeedToDisplaySideBar())« se bo naša košarica prikazala samo, če imamo v adminu: system>configuration>sales>checkout>shopping cart sidebar>display shopping cart sidebar izbrano možnost »Yes«.

Top-cart.phtml datoteko lahko sedaj oblikujemo po želji, tako da prikazuje in izpisuje stvari, ki si jih sami želimo (cena, število izdelkov,...). Za prikaz več kot zadnje 3 izdelke pa sremenimo možnost v adminu in sicer: system>configuration>sales>checkout>shopping cart sidebar-maximum display recently added item(s) in spremenimo število za željeno količino prikazanih izdelkov.

Z uporabo css-ja in jQuery knjižnice lahko oblikujemo prikaz košarice tako, da se prikaže, ko se z miško premaknemo nad določen element na naši strani:



Z naslednjim korakom bomo izključili opcijo magenta, da nas po dodanem izdelku v košarico ne preusmeri na stran košarice. V admin-u poiščemo system>configuration>sales>checkout>shopping cart-after adding a product redirect to shopping cart in izberemo možnost »No«.

Našo košarico bomo spremenili tako, da se bo prikazala, ko bomo dodali nov izdelek v njo. Ker koda temelji na spremembah količine izdelkov v košarici, moremo paziti na možnost, da stranka obišče našo spletno trgovino in se prijavi (registrirane stranke) in le ta pa ima že nekaj izdelkov shranjenih v košarici (v uporabniškem profilu so že od prej bili dodani izdelki v košarico). Ko se to zgodi pa nočemo, da se košarica samodejno prikaže (naprimer spusti), zato si moramo tudi zapolnit, če je stranka prijavljena in kdaj pride do spremembe.

Čisto na začeteku v naši top-cart.phtml najdemo sledečo kodo:

<?php $_cartQty = $this->getSummaryCount() ?>

In takoj za tem dodamo php kodo:

$prikazKosarice = false; if(!isset($_SESSION['prijavljen'])) { $_SESSION['prijavljen'] = $this->helper('customer')->isLoggedIn(); } if(isset($_SESSION['kolicina']) && ($_SESSION['kolicina'] < $_cartQty) && ($_SESSION['prijavljen'] == $this->helper('customer')->isLoggedIn())) { $_SESSION['kolicina'] = $_cartQty; $prikazKosarice = true; } else { if($_cartQty > 0 && !(isset($_SESSION['kolicina']))){ $prikazKosarice = true; } $_SESSION['kolicina'] = $_cartQty; $_SESSION['prijavljen'] = $this->helper('customer')->isLoggedIn(); }

Koda preverja količino izdelkov v košarici in si jo zapolni za naslednje preverjanje. Če je količina večja od prejšnje se $prikazKosrice postavi na true. Informacije o količini pa shranjujemo v sejo uporabnika.

Na konec dokumenta (top-cart.phtml) pa dodamo še javascript in jQuery kodo, za prikaz košarice:

<script type="text/javascript"> jQuery(document).ready(function(e) { if(<?php echo json_encode($prikazKosarice); ?>) { jQuery("#drop-down-kosarica").slideDown("fast"); } }); </script>

#drop-down-kosarica je ID html elementa, ki smo ga s css-jem skrili, z jQuery-jem pa ga prikažemo.