Wyśrodkowanie slidera w sklepie internetowym opartym o skrypt PrestaShop wydaje się początkowo trudną przeprawą. Ale to tylko złudzenie. Wystarczy podstawowa znajomość CSS i dostęp do plików, np. po przez protokół FTP i można sobie z tym problemem poradzić samemu.

Wyśrodkowanie slidera na przykładzie ’Slider zdjęć na głównej stronie’.

Skrypt PrestaShop ma wbudowaną ciekawą możliwość edycji położenia poszczególnych modułów, na poszczególnych stronach. Dzięki „Edycji na żywo” możemy przenosić, przestawiać lub usuwać poszczególne moduły odpowiedzialne m.in. za wyświetlanie „nowości” wśród produktów, czy „koszyka klienta”. W ten dość prosty sposób można łatwo „poukładać sobie szablon” według własnych potrzeb.

Co zrobić jednak gdy mamy slider w PresaShop ustawiony w odpowiednim miejscu, np. pod menu, jednak chcielibyśmy go w poziomie ustawić w innym miejscu? Np. wyśrodkować, albo przesunąć bardziej do prawej strony? By rozwiązać ten problem potrzebna nam będzie podstawowa znajomość CSS do edycji pliku homeslider.css. Jest to plik CSS modułu ’Slider zdjęć na głównej stronie’. I chciałbym od razu zaznaczyć, że jest to prowizoryczne rozwiązanie problemu. Należy pamiętać, że wspomniany slider składa się z „dwóch części” – od lewej wyświetlane są „przewijane zdjęcia”, od prawej możemy wrzucić dodatkowe banerki, np. z informacją o promocji.

Wyśrodkowanie slidera – modyfikacja pliku CSS.

W celu dokonania modyfikacji pliku homeslider.css należy się wpierw „do niego dostać”. Można to zrobić za pomocą klienta FTP (np. Total Commander). Po zalogowaniu się do serwera, gdzie przechowywane są pliki naszego sklepu internetowego opartego o skrypt PrestaShop odnajdujemy katalog ze wspomnianym plikiem (homeslider.css), która najprawdopdobniej będzie się znajdował pod taką ścieżką: katalog_główny/themes/nazwa_używanego_szablony/css/modules/homeslider. To tutaj znajdziemy ten plik. Najbezpieczniej ściągnąć go sobie na dysk twardy i zrobić kopie bezpieczeństwa. Tak, na wszelkie wypadek. Do edycji tego pliku wystarczy nam zwykły systemowy Notatnik. Otwieramy go i już w pierwszej części („Home Page Slider”) znajdziemy ustawienia odpowiedzialne za położenie naszego slidera. Zachęcam do przeanalizowania całego pliku.

By wyśrodkować slider w PrestaShop, lub go po prostu przesunąć w prawą stronę, właściwie wystarczy zmienić jeden z tzw. stylów. Mam tu na myśli ten, który definiuje wielkość lewego dopełnienia – czyli padding-left; domyślnie ma on wartość 0. Aby zmienić położenie slider’a w prawą stronę, bliżej środka, bądź jeszcze bardziej do prawej, można to uzyskać zmieniając wartość 0 w wymienionym wyżej stylu, na inną wartość: wyrażoną w pikselach lub np. procentach (jak na przykładowym obrazku). Po dokonaniu zmian plik należy zapisać i ponownie wysłać na serwer, nadpisując starą wersję.

Wyśrodkowanie slidera w PrestaShop – krok właściwy.

Podejrzewam, że znajdą się tacy, którzy od razu skrytykują próbę wyśrodkowania slidera za pomocą opisanego powyżej sposobu. Z jednej strony – słusznie. To dość prowizoryczna opcja, jednakże dla osób nie mających zupełnie zielonego pojęcia o CSS, w jakimś sensie.. bezpieczna.

Skoro jednak zdecydowaliśmy się zrezygnować, póki co, z możliwości zamieszczenia banerków w naszym sliderze w jego prawej części i chcemy wyśrodkować jedynie „przewijanie zdjęć”, rozsądniejszą rzeczą wydaje się dezaktywowanie fragmentu kodu, który jest odpowiedzialny za „wyświetlanie” niechcianego kawałku strony. Warto zauważyć – kawałku, który w przypadku niekorzystania z opcji publikacji małych grafik w prawej części, zostawia puste, niewykorzystane miejsce.

W tym celu, przy pomocy wspomnianego klienta FTP, ściągamy na nasz dysk twardy plik z kodem modułu. Mam tu na myśli homeslider.tpl znajdujący się pod ścieżką: katalog_główny/themes/nazwa_używanego_szablony/modules/homeslide. Po pobraniu i zrobieniu kopii bezpieczeństwa można przystąpić do edycji pliku. Nie jest to jednak zbyt skomplikowane. Wszystko właściwie ogranicza się do usunięcia lub jak na powyższym obrazków widać – zamknięcia odpowiedniego kodu (zaznaczonego czerwoną gwiazdką) w komentarzu (korzystając z <!– oraz –>).

Po wykonaniu jednej z wyżej wymienionych czynności zapisujemy zmiany i wrzucamy plik z powrotem na serwer nadpisując starszą wersję. Slider (który będzie się już składał tylko z „przewijanych zdjęć”) automatycznie się wyśrodkuje.

W przypadku pytań – zachęcam do kontaktu po przez mail lub pozostawienia poniżej swojego komentarza.

Post Wyśrodkowanie slidera w Prestashop opublikowany został na Blogu Młodego Taty.