Nie zawsze nowsza wersja jest stuprocentowo lepsza od poprzedniej. PrestaShop w wersji 1.7 została niestety pozbawiona wielu opcji takich jak: porównywanie produktów, whishlisty czy zoom zdjęcia produktu na jego karcie. To właśnie tym ostatnim problemem dziś się zajmiemy. W poniższym artykule dowiesz się jak to naprawić.
Uwaga: poradnik jest przeznaczony dla zaawansowanych użytkowników. Wszelkie zmiany wprowadzasz na własną odpowiedzialność!
Na powyższym zrzucie można zobaczyć wynik końcowy prac. Do wprowadzenia zmian będzie potrzebny klient ftp oraz jakiś edytor, który pozwoli na zmiany w plikach. Zmiany są wprowadzane na podstawowej dla PrestaShop templatce classic z zainstalowaną biblioteką jQuerry. Efekt zastępuje domyślny modal (popup) z wyskakującą galerią.
Pierwszym krokiem jest pobranie biblioteki, która pozwoli nam na uzyskanie efektu powiększania zdjęć produktów w PrestaShop. W sieci znajdziesz wiele takich bibliotek. Ja zdecydowałem się na jqueryzoom na licencji MIT. Biblioteka wymaga dołączonego do kodu jquery.
Tu wystarczy przekopiować plik jquery.zoom.min.js. Plik js należy wgrać do katalogu w ścieżce themes/NAZWA_TWOJEJ_TEMPLATKI/assets/js. Dodatkowo tworzymy w tej lokalizacji plik zoom-config.js.
Następnie plik należy załadować w widoku karty produktu. W tym celu edytujemy plik themes/NAZWA_TWOJEJ_TEMPLATKI/config/theme.yml i dodajemy linijki reprezentujące dodanie poszczególnych plików.
assets:
js:
product:
- id: zoom
path: assets/js/jquery.zoom.min.js
priority: 200
- id: zoom-config
path: assets/js/zoom-config.js
priority: 201
Oczywiście jeśli jakieś zasoby są już ładowane, to nie należy zamieniać powyższego kodu, a jedynie dołożyć kolejne linijki kodu. Po tej operacji biblioteki powinny już być dostępne w kodzie.
Pora na edycję pliku
themes/NAZWA_TWOJEJ_TEMPLATKI/templates/catalog/_partials/product-cover-thumbnails.tpl , gdzie znajduje się kod odpowiadający za wyświetlanie zdjęcia.
Pierwsze co robimy w tym pliku to zakomentowujemy linijkę odpowiedzialną za wysłanie modala. W tym celu umieszczamy całego diva o data-target="#product-modal" w nawiasy klamrowe z gwiazdką {*
Kolejnym krokiem jest edycja pliku zoom-config.js w którym wklejamy poniższy kod:
$(document).ready(function(){
var zoomContainer = $('#productZoom');
zoomContainer.zoom();
$('.thumb-container').on('click', function(){
zoomContainer.trigger('zoom.destroy')
.zoom({url: $(this).find('img').data('image-large-src')});
});
});
Powyższy kod odpowiada za wskazanie bibliotece, gdzie w strukturze ma być podpięta funkcjonalność w przypadku zdjęcia głównego oraz przy kliknięciu miniatury produktu.
Ostatnim krokiem jest dodanie stylu zmieniający wskaźnik na krzyżyk. W tym celu w pliku themes/NAZWA_TWOJEJ_TEMPLATKI/assets/css/custom.css dodajemy na końcu poniższy kod:
#productZoom {
cursor: crosshair;
}Gotowe! Zoom zdjęcia produktu powinien teraz działać bez zarzutów.