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.

10 odpowiedzi do “Poradnik Shoper – Zakładki na karcie produktu”

  1. Witam,

    Mam nastepujący problem, zrobiłem wszytko ja w/w, na kopi orginalnego stylu. Problem jest w tym że skrypt nie działa na stronie głównej, na podstronach działa bez problemowo, np karcie produtków lisci produktów itp. W czym może byc problem ?

  2. Witam,
    Właśnie odkryłam Wasz blog i jestem zachwycona ilością i przydatnością tipów!

    A propos karty produktów – jak zrobić żeby nie było tego standardowego gigantycznego odstępu między zdjęciem a opisem? A idealnie jak powiększyć miniaturki i przesunąć je pod sam CTA i zaraz pod tym opis?

    Dzięki wielkie!

    1. Sorki, że tak późno odpowiadam. Odstęp może wynikać z Twoich ustawień karty produktów. Standardowo zdjecie jest tam ustawione by było 300 na 300 px ale jak masz poziome zdjęcia to tworzy się dodatkowa przestrzeń. W dziale zarządzania wyglądem (czyli Konfiguracja/Wygląd/Aktywny styl graficzny na zakładce „szczegóły produktu”) zmień wysokość zdjęcia głównego na 0

  3. Stworzyłem zgodnie z Pana instrukcją zakładki w karcie produktu, w zasadzie to użyłem Pana kodu w karcie produktu w 100% i wszystko wyświetla się prawidłowo. Robił Pan to pod system Shopera, jak w takim razie dodawać informacje w zakadce „DANE TECHNICZNE”. Shoper od strony admina nie ma takiego pola. Zauważyłem, że Pan na swoim sklepie sklep.szablonsklep.pl w karcie produktu uzupełnia pola „DODATKOWE INFORMACJE”. Bardzo proszę o wskazówki jak to zrobić, byłaby to bardzo przydatna rzecz dla wszystkich shoperowców:)

    Pozdrawiam!
    blog obserwator:)

    1. Standardowa sekcja o nazwie DANE TECHNICZNE to Atrybuty produktów, można je edytować w panelu administracyjnym. W naszym sklepie nazwa dane techniczne była mało adekwatna do rodzaju produktu więc zmieniliśmy ją na Dodatkowe informacje. Zmianę samej nazwy można zrobić w dziale zarządzania frazami językowymi czyli w Konfiguracja/Ustawienia regionalne/Języki

  4. Witam serdecznie. jestem totalnym laikiem i nie mam zielonego pojęcia gdzie co mam zmienić. kod klasy w ogóle nie chce mi się otworzyć. próbuje troszkę sama pozmieniać sklep, opierając się w głównej mierze na Pana blogu. za wszelką pomoc będę wdzieczna 🙂

Dodaj komentarz