Shoper 5 – lupka powiększająca na liście produktów – poradnik

Witam ponownie w dziale porad dla systemu Shoper. Tym razem podejmuje temat stworzenia dodatkowego efektu lupy dla produktów na liście produktów oraz na stronie głównej sklepu.

Jak dobrze wiecie większość klientów kupuje wzrokiem także jakość zdjęć ma spore znaczenie w procesie zakupowym. Nie ma jednak sensu wyświetlanie dużego zdjęcia przy każdym z produktów na liści, lista produktów nie do tego służy i prawdę mówiąc osobiście nie lubię takiego podejścia.

Sprytnym połączeniem jakości dużego zdjęcia z karty produktu z dużym wyborem produktów na liście produktów jest zastosowanie lupki. Po najechaniu na zdjęcie produktu system powiększa i wyświetla zdjęcie w ustalonym miejscu.

Dzisiaj zapraszam do zapoznania się z krótkim tutorialem jak taki efekt dodać do Waszych sklepów Shoper. Efekt który tu prezentuje możecie aktualnie zobaczyć na stronie sklep.szablonsklep.pl (niestety nie obiecuje że zostawię go tam na zawsze )

UWAGA!!! prezentowany efekt wymaga wprowadzenia zmian w pliku tableofproducts.tpl co oznacze, że jeżeli w przyszłości producent wprowadzi zmiany aktualizacyjne dotyczące tego pliku będziecie musieli wprowadzić je ręcznie. KAŻDY edytowany plik tpl nie podlega późniejszym aktualizacją mimo, reszta systemu zostanie zaktualizowana bez przeszkód.

Przejdźmy zatem do wytycznych jak uzyskać efekt lupki:

Krok 1 – wejdź do panelu administracyjnego dział Konfiguracja/Wygląd/Galeria stylów,

Krok 2 – utwórz kopie aktywnej skórki,

Krok 3 – wejdź w edycję kopii skórki poprzez kliknięcie ikony edycji (taka kartka z ołówkiem ),

Krok 4 – przejdź na zakładkę Edycja zaawansowana,

Krok 5 – zlokalizuj plik plik tableofproducts.tpl i przejdź do jego edycji

Krok 6 – otwórz program Notatnik lub program przeznaczony do pisania kodu HTML,

Krok 7 – teraz czas napisać kod wyświetlający zdjęcie:

<div id=”lupka_sz{$product->product->product_id}” class=”lupka_sz”>
<img src=”{imageUrl type=’productGfx’ width=300 height=300 image=$product->mainImageName() overlay=1}” alt=”{$product->translation->name|escape}” /></div>

Kod ten dodaje blok z identyfikatorem „lupka_sz” kod po lupka_sz ma za zadanie dokleić do identyfikatora id konkretnego produktu tak by zdjęcia wyświetlały się poprawnie dla danego produktu. Dodatkowo dodana została klasa lupka_sz (wybaczcie że nazwa identyfikatora i klasy jest taka sama, mam nadzieję że nie wprowadzi to u was zamętu 😉 ).

W kodzie obrazka czyli wszystkim tym co jest w <img … /> najważniejsze jest by wprowadzić wysokość i szerokość zdjęcia, które ma się wyświetlić w lupce. Najlepiej ustawić takie same wartości jakie macie w zakładce Szczegóły produktów.

Krok 8 – mając już kod wyświetlający powiększone zdjęcie musimy go wstawić do pliku tableofproducts.tpl. W tym momencie najważniejsze to odnaleźć odpowiednią sekcję w pliku. W pliku tableofproducts.tpl znajdziecie sekcje które odpowiadają za wyświetlanie listy produktów uzależnione od formy wyświetlania. Osobny kod jest dla wyświetlania produktów w jednej kolumnie a osobny dla wielu kolumn. Dodatkowo znajdują się tam sekcje pozwalające wyświetlać listę w zależności od rodzaju widoku.

Ja zdecydowałem się zastosować w sklepie widok z wieloma kolumnami produktów oraz pełną prezentacją „czyli nazwa, zdjęcie i opis”.

Zlokalizuj w pliku div class=”product” (7 albo 8 linia kodu czyli prawie na samej górze) i dodaj tam nową klasę (ja dodałem klasę o nazwie lupka_relative) tak by wyglądało to następująco:

<div class=”product lupka_relative” …>

nowa klasa posłuży nam później za określenie punktu odniesienia dla naszego boksu z powiększonym zdjęciem tak by wyświetlał się zawsze w określonej pozycji (ale to później na etapie pisania kodu CSS).

teraz wklejamy nasz przygotowany kod między blokiem

<div class=”product lupka_relative” … >

a

<a class=”details spanhover” …> (kropki oczywiście oznaczają resztę kodu który tam jest)

Krok 9 – ostatnim etapem edycji pliku tableofproducts.tpl jest dodanie kodu odpowiedzialnego za włączenie lupki po najechaniu kursorem myszki na zdjęcie. W tym celu odnajdujemy kod wyświetlający zdjęcie (powinniście go znaleźć kilka linijek pod swoim wklejonym kodem).

stary kod zaczyna się od <img src=”{imageUrl type=’productGfx’ …/>

przed znakiem /> dodajcie onmouseout=”document.getElementById(’lupka_sz{$product->product->product_id}’).style.display=’none'” onmouseover=”document.getElementById(’lupka_sz{$product->product->product_id}’).style.display=’block'”

Kod ten ma za zadanie zmienić wartość stylu display odpowiedzialnego za wyświetlanie bloku.

 

Krok 10 – zapiszcie zmiany w pliku i przejdzie na zakładkę Własny styl CSS,

Krok 11 – jest ostatnim krokiem tego tutoriala i odpowiada za ostylowanie poszczególnych klas i elementów,

tu ustalamy punkt odniesienia:

.lupka_relative{ position:relative; }

tu ustalamy odpowiednio sposób wyświetlania, odległość od prawej strony punktu odniesienia, odległość od górnej krawędzi punktu odniesienia, położenie względem innych elementów na osi z, sposób wyświetlania gdy nieaktywny i na koniec obramowanie ustalone na 3px i kolor #333(czyli szary).

.lupka_sz { position:absolute; right:-300px; top:-20px; z-index:2000; display: none; border:3px solid #eee; }

 

Po zapisaniu zmian w pliku CSS możecie sprawdzić jak wygląda sklep klikając na lupkę podglądu na górze strony panelu administracji, jeżeli chcecie udostępnić zmiany wszystkim klientom ustawcie edytowaną skórkę jako Aktywną.

 

Oczywiście możecie udoskonalać tą mała modyfikację. Można np dodać do powiększenia nazwę produktu lub dodać ikonę graficzną lupy do miniaturek zdjęć.

W razie problemów piszcie postaram się odpowiedzieć. Jeżeli chcecie byśmy pomogli w instalacji zmiany w Waszym sklepie piszcie na maila lub dzwońcie.

dodaje zrzut by można było zobaczyć o jaki efekt mi chodzi (oczywiście efekt pojawia się tylko po najechaniu kursorem na zdjęcie)

Pozdrawiam

8 odpowiedzi do “Shoper 5 – lupka powiększająca na liście produktów – poradnik”

  1. Witam ponownie

    Oczywiście obszukałem wszędzie i nie trafiłem na żadne pomoce, także ponownie zwracam się tutaj o pomoc – za co też mocno dziękuję.

    Zauważyłem ,że shoper przy wrzucaniu własnych zdjęć produktów przy ich tworzeniu, zamienia oryginalną nazwę obrazka na zakodowaną np.”0989sdafuiads098.jpg”
    Uniemożliwia to pozycjonowanie czy wyszukiwanie w Google/grafika tych właśnie zdjęć , a po opisie też nie wyszuka…
    … i tu moje pytanie – czy jest jakiś sposób aby używać w shoperze oryginalnych nazw zdjęć aby poszerzyć hasła wyszukiwania w google?

    Z góry dziekuję i pozdrawiam serdecznie

  2. Witam,
    w jaki sposób można spowodować wyświetlanie powiększonego zdjęcia (przy użyciu lupki) tak, aby w przypadku 3 kolumny produktów zdjęcie nie wychodziło poza pole wyświetlane przez przeglądarkę?

    Pozdrawiam,
    dziękuję za ten blog – moje światło we mgle!

    1. Witam,
      trzeba by pobawić się z ustawieniami absolute nie zmienia to jednak faktu że ciężko będzie wyodrębnić tylko co trzeci produkt gdyż dla systemu to wszystko jedno. Klasy są przypisane do co drugiego po to by móc np dodać naprzemienne tło ale do co trzeciego nie ma osobnej klasy którą by można użyć.

  3. Witam, bardzo mi zależy na tej fukcji, jednak nie wiem czy mam jakaś nowsza wersję sklepu bo nie mogę nigdzie znależć „krok 4 ? przejdź na zakładkę Edycja zaawansowana,” u mnie czegoś takeigo nie ma – w zwiazku z czym mam pytanie czy można to zrobić z poziomu panelu czy tzreba miec dostęp do plików na serwerze ? (moja wersja jest hostowana na serwerach shopera wiec nie mam dostepu do plików)
    Dziękuję i pozdrawiam

Skomentuj Piotr Anuluj pisanie odpowiedzi