Poradnik Shoper – Zakładki na karcie produktu

Pojęcie „Zakładki” nie jest może najbardziej precyzyjne bo mi kojarzy się bardziej z zakładkami do książek, które pełnią całkowicie inną funkcję. Wiele określeń związanych ze stronami internetowymi, programowaniem i w sumie wszelkimi informatycznymi określeniami pochodzą z języka angielskiego i w tym przypadku jest to najzwyczajniej tłumaczenie słowa „Tabs”. Mam jednak nadzieje, że wszyscy zrozumieją o co chodzi w poradniku 🙂

Dla pewności załączam kilka zdjęć ze sklepów w których zastosowaliśmy takie prezentowane w poradniku rozwiązania:

1 – zakładki na karcie produktu sklepu el-mar.sklep.pl

2 – zakładki w sklepie bokado.pl

3 – zakładki na stronie głównej sklepu modniespakowani.pl

Przejdźmy zatem do meritum. Jak wynika z tematu wpisu w poradniku opisuję jak zamieścić zakładki na karcie produktu systemu Shoper. Zaznaczam że kod ten działa również w ClickShop raz Sklepicom także jeżeli posiadacie jeden z tych systemów to śmiało możecie próbować go zmieniać.

Na potrzeby wpisu zakładam stworzenie trzech zakładek (Opisu produktu, danych technicznych i produktów powiązanych), możecie oczywiście dowolnie modyfikować kod według własnych potrzeb.

UWAGA!!! – pamiętajcie że edytując kod HTML danego pliku blokujecie automatyczną aktualizację tego konkretnego pliku.

Ta informacja jest istotna gdyż często dostaje maile z pytaniami typu „Dlaczego po aktualizacji sklepu nie działa mi nowa funkcja np zapytaj o produkt”. Nie działa gdyż plik karty produktu po wcześniejszej edycji nie został zaktualizowany (mimo że reszta sklepu jest już aktualna).

Staram się przeforsować w Shoper system pozwalający na zarządzanie wersjami plików więc może kiedyś rozwiążemy problem braku aktualizacji. Na razie musicie pamiętać by w razie aktualizacji sprawdzać czy ma ona wpływ na wasze zmienione pliki.

Jest bardzo wiele sposobów na wykonanie zakładek jakie pokazałem wam na zdjęciach poglądowych. W tym przypadku skorzystamy z gotowej klasy JavaScript którą znalazłem w sieci. Klasa ta działa w oparciu o framework Mootools z którego korzysta Shoper także w przyszłości nie powinno z nią być problemów.

Krok 1. Kod klasy możecie pobrać klikając na pobierz

Nie wklejam tu kodu celowo, gdyż mimo moich próśb często kopiujecie na zasadzie „kopiuj-wklej” bezpośrednio z strony bloga i później piszecie, że skrypt nie działa poprawnie :).

Kod z tego pliku wklejcie do zakładki „Własny kod JS”

Krok 2 – przygotowujemy kod HTML zakładek według wzoru:


<div id="tabs_sz">
<ul class="tabs">
<li class="tab">nagłówek 1</li>
<li class="tab">nagłówek 2</li>
<li class="tab">nagłówek 3</li>
</ul>
<div class="content">treść zakładki 1</div>
<div class="content">treść zakładki 2</div>
<div class="content">treść zakładki 3</div>
</div>

Jak widzicie budowa kodu HTML jest dość prosta. Mamy jeden blok div o id tabs_sz który zamyka nam wszystkie zakładki.

Następnie mamy listę o klasie tabs której elementy zawierają nazwy wyświetlane w zakładkach. Na końcu znajdują się pojemniki div o klasie content w których zamykamy zawartość poszczególnych zakładek.

Ważne jest to by pamiętać, że pierwszy tytuł jest automatycznie przypisany do pierwszego pojemnika z zawartością więc nie pomylcie kolejności 🙂

Dla ułatwienia do pobrania w tym kroku jest cały plik karty produktu dla oprogramowani Shoper w wersji  5.4.3 – pobierz plik

Krok 3 – przygotowanie kodu CSS zarządzającego wyglądem zakładek. Nasza klasa JS umożliwia zdefiniowanie wyglądu zarówno zwykłej zakładki jak i tej aktualnie otwartej oraz np wyglądu po najechaniu myszką na daną zakładkę:

ul.tabs {
margin: 0;
padding: 0;
}
li.tab {
display: inline;
padding: 7px 10px;
list-style: none;
background-color: #eee;
border: 1px #ddd solid;
border-bottom: 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
cursor: pointer;
color: #66256F;
text-shadow: 1px 1px #fff;
line-height: 30px;
}
li.tab.active {
background-color: #222;
border-bottom-color: #222;
border-bottom: 0;
color: #fff;
text-shadow: 1px 1px #000;
}
div.content {
margin: 0;
padding: .4em;
border: 0;
border-top: 1px solid #eee;
}
#box_productfull .description{
border-top: 0;
}

Jak Wygląd oczywiście dostosujcie do własnych potrzeb. Na sklep.szablonsklep.pl dodałem zwykły moduł na stronie głównej gdzie możecie zobaczyć jak działają zakładki.