Rozbudowa modułu koszyka w Shoper

W dzisiejszym poradniku zamierzam wam zaprezentować prosty sposób na rozbudowanie standardowego modułu koszyka dostępnego w systemie Shoper (rozwiązanie działa również w sklepach ClickShop więc jak posiadacie tą wersje oprogramowania to również możecie włączyć się do zabawy 🙂 ).

Jak wiecie moduł koszyk w Shoper 5 składa się z kilku linii tekstu informującego klienta o tym ile produktów dodał do koszyka oraz ile będą go kosztowały. Niby wszystkie ważne informacje są ale…

No właśnie to małe „ale” pojawia się zawsze wtedy kiedy chcemy mieć coś więcej 🙂 a z mojego doświadczenia wynika, że wielu z Was lubi mieć coś więcej. Shoper nie przewiduje aktualnie zmian w tym module więc pozostaje Wam próba tuningowania oprogramowania na własną rękę.

UWAGA!!! Instrukcja jaką zamierzam Wam tu przedstawić wymaga edycji jednego z plików (Basket/box.tpl) a co za tym idzie plik ten nie będzie podlegał automatycznym aktualizacjom (na szczęście aktualizacji tego pliku praktycznie nie ma).

 

Na początek pokaże Wam mały zrzut modułu koszyka ze zmianami jaki tu opisuje oraz standardowego.

Jak widzicie meritum poprawek nie jest wygląd moduł a jedynie wprowadzenie szczegółowych informacji o tym jakie produkty znajdują się w danym czasie w koszyku. Na potrzeby poradnika wygląd modułu zmieniłem jedynie odrobinę tak by wszystko było w miarę czytelne i jednoznaczne.

Koszyk można rozbudowywać o inne funkcjonalności, na potrzeby jednego z naszych nowych szablonów koszyk został wzbogacony o funkcje rozsuwania (czyli po najechaniu na ikonę koszyka rozwija się pełna lista produktów w koszyku). Polecam Wam zabawę z wyglądem koszyka i dopasowanie go do indywidualnych potrzeb.

 

Przejdźmy zatem do samego kodu.

 

Krok 1. Jeżeli Wasz „Aktywny styl graficzny” jest już kopią skórki standardowej przejdźcie do jego edycji (jeżeli nie to pamiętajcie o stworzeniu kopii, wszelkie porady można wprowadzać jedynie na kopiach skórek standardowych),

Krok 2. Przejdźcie na zakładkę „Edycja zaawansowana” i kliknijcie ikonę edycji przy pliku o nazwie Basket/box.tpl. plik ten zarządza modułem koszyka.

Krok 3. przygotujcie kod HTML nowego modułu zgodnie z tym przykładem:

<div id=”box_basket”>
<div> <div></div> <div></div> </div>
<div>
<div></div>
<h3><img src=”{baseDir}/public/images/1px.gif” alt=”” />{$boxNs->$box_id->title|escape}</h3>
<div></div>
</div>
<div>
<div></div>
<table>
<tbody>
{foreach from=$user->basket item=basket_product}
<tr>
<td>
<img src=”{imageUrl type=’productGfx’ width=45 height=45 image=$basket_product->stock->mainImageName() overlay=1}” alt=”{$basket_product->product->translation->name|escape}” />
</td>
<td {if !$showDelivery}colspan=”2″{/if}>
<a href=”{route function=’product’ key=$basket_product->product->product->product_id productName=$basket_product->product->translation->name
productId=$basket_product->product->product->product_id}” title=”{$basket_product->product->translation->name|escape}”>{$basket_product->product->translation->name|escape}</a>
<p>{$basket_product->stock->getName()|escape}</p>
<p>{currency value=$basket_product->getPrice()}</p>
</td>
<td>
<a href=”{route key=’basketRemove’ basketId=$basket_product->getIdentifier()}” title=”{translate key=’Remove product from your basket’}”>
<img src=”{baseDir}/public/images/1px.gif” alt=”” />
<span>{translate key=’Usuń’}</span>
</a>
</td>
</tr>
{/foreach}
<tr>
<td colspan=”4″>{translate key=”Suma:”} {currency value=$user->basket->sumProducts(false)}</td>
</tr>
<tr>
<td colspan=”4″>
<p>
<a href=”{route key=’basket’}” title=”{translate key=’Basket’}” rel=”nofollow”>{translate key=”go to the basket”} &raquo;</a>
</p>
</td>
</tr>
</tbody>
</table>
<div></div>
</div>
<div> <div></div> <div></div> </div>
</div>

Najważniejsze zmiany w pliku znajdują się w między znacznikami table. Jest to tabelka odpowiedzialna za wyświetlanie produktów. W pierwszej kolumnie umieściłem zdjęcie, wykorzystałem do tego celu miniaturki tworzone przy okazji małej galerii (czyli ich rozmiar to 45px na 45px). Następna kolumna to nazwa produktu a w ostatniej jest link do usunięcia produktu z koszyka.

Krok 4. Przygotowujemy kod CSS zarządzający wyglądem modułu i wklej go na zakładce „Własny styl CSS”:

#box_basket .innerbox{
padding: 10px;
}
#box_basket .innerbox td{
border-bottom: 1px solid #ddd;
padding: 5px 3px;
}
#box_basket .innerbox td.sumo{
background: #efefef;
font-size: 13px;
line-height: 20px;
text-align: center;
font-weight: bold;
}

Krok 5. Pamiętaj by kodów zapisanych powyżej nie kopiować bezpośrednio z bloga gdyż przy takim kopiowaniu zmieniają się niektóre znaczniki i zmiany mogą nie działać poprawnie. Jeżeli nie wprowadzasz własnych zmian to pobierz pliki z kodem poprzez ten link.

 

I na tym koniec poradnika 🙂

Mam nadzieję, że się Wam przyda…

11 odpowiedzi do “Rozbudowa modułu koszyka w Shoper”

  1. Bardzo fajny koszyk, niestety u mnie po przejściu „do koszyka”, sam koszyk znajdujący się w prawej kolumnie nie trzyma szerokości i roszerza się znacznie 🙁 tak gdzieś do szerokości koszyka w kolumnie środkowej!
    Pomogło usunięcie koszyka z bocznej kolumny w widoku samego koszyka (po co dwa koszyki jednocześnie na stronie 🙂 ) niemniej jednak jeśli ktoś zechce pzostawić koszyk w kolumnie na stałe to ma problem 🙂 estetyczny 🙂

  2. Zrobiłam wszystko jak należy i wyswietla się takie coś .. / Pudełka / Koszyk / box.tpl: 15

    błąd składni: nieprawidłowa nazwa atrybutu: '=’ (Smarty_Compiler.class.php, line 1550)

  3. Witam serdecznie, super modyfikacja:)
    mam tylko jeden problem, przy usunięciu produktu z koszyka pojawia się słowo „Usul”” i po naciśnięciu nie powduje usuniecia produktu z koszyka, będę wdzieczny za pomoc co mogę z tym zrobić aby było poprawne tłumaczenie i funkcjionowanie, dzieuję:)

Skomentuj Grzegorz Rusin Anuluj pisanie odpowiedzi