Dokumentacja - LazyLoad dla PrestaShop
Instrukcja instalacji i obsługi modułu LazyLoad dla PrestaShop od X13.pl
Wersja PrestaShop:
1.5
1.6
1.7
To wersja, z którą dodatek został przetestowany i działa poprawnie
Aktualna wersja:
1.2.0 -
14/09/2020
zobacz changelog - listę zmian
Przed instalacją i konfiguracją modułu zapraszamy do zapoznania się z instrukcją.
Wymagania instalacyjne
Moduł wymaga kilku podstawowych usług na serwerze, które w większości przypadków są aktywne.
Gdyby któraś z wymienionych opcji nie była dostępna - należy ją włączyć w panelu serwera lub napisać do administratora.
- PHP: 5.4 - 7.4
- ionCube: tak
Instalacja
Moduł możesz znaleźć na liście jako
- Nazwa: LazyLoad dla PrestaShop
- Autor: x13.pl
- Kategoria: SEO / Optymalizacja SEO
- Filtruj po: Zainstalowane i niezainstalowane / Aktywne i nieaktywne
Zmiana w plikach szablonu
Moduł automatycznie podczas instalacji wyszukuje plik wyświetlający listę produktów, wykonuje jego kopię i wprowadza wymaganą modyfikację
W przypadku wybranych szablonów, w których struktura plików została zmieniona w stosunku do standardowej w PrestaShop wymagana będzie zmiana ręczna w plikach - polecamy w tym przypadku kontakt przez support, wdrożymy taką zmianę w ramach darmowej pomocy do modułu (w trakcie trwania wsparcia).
Jeśli po wgraniu modułu nie widzimy doładowywania zdjęć przechodzimy do sprawdzenia kompilacji.
Sprawdzenie kompilacji
Sprawdzamy czy mamy ustawione wymuszanie zmian w szablonie lub czyścimy cache.
Wchodzimy w Parametry zaawansowane -> Wydajność
Klikamy po prawej Wyczyść pamięć podręczną
Konfiguracja
W module możemy włączyć opcję Doładuj zdjęcia z wyprzedzeniem .
Ta opcja pozwala na doładowanie części zdjęć na stronie jeszcze przed interakcją użytkownika, minimalizuje to efekt doładowywania zdjęć i widoczność preloadera - opcja sprawdza się w sklepach w których wczytywane są duże zdjęcia na liście produktów, oraz prezentowane jest kilkadziesiąt produktów na podstronie kategorii.
Ta funkcja wczytuje 100% zdjęć widocznych w oknie przeglądarki oraz 50% wysokości po za obszarem przeglądarki.
W polu Styl możemy wybrać.
- 1 z 20 styli loadera
- przesłać własny plik GIF
- wybrać korzystanie z plików SVG lub JPG
W przypadku wybrania pliku SVG lub JPG, musimy ręcznie zmienić plik TPL oraz wgrać wybrany plik graficzny.
Wgraj plik graficzny do folderu modules/x13lazyload/view/img i nazwać go loader.svg lub loader.jpg w zależności od formatu pliku.
Następnie zmodyfikuj pliku TPL listy produktów.
Dla PrestaShop 1.7
Wybieramy folder themes/nazwa-tematu/templates/catalog/_partials/miniatures/product.tpl - edytujemy plik
odszukujemy w nim:
<img class="replace-2x img-fluid lazy" src="{if isset($x13lazyload_url)}{$x13lazyload_url}{else}{$urls.base_url}{/if}modules/x13lazyload/views/img/loader.gif" data-original="...i zmieniamy na
<img class="replace-2x img-fluid lazy" src="{if isset($x13lazyload_url)}{$x13lazyload_url}{else}{$urls.base_url}{/if}modules/x13lazyload/views/img/loader.gif" data-original=".....svg - w przypadku pliku svg
.jpg - w przypadku pliku jpg
Dla PrestaShop 1.6
Wybieramy folder themes/nazwa-tematu/product-list.tpl - edytujemy plik
odszukujemy w nim:
<img class="replace-2x img-responsive lazy" src="{$base_uri}modules/x13lazyload/views/img/loader.gif" data-original="...i zmieniamy na
<img class="replace-2x img-responsive lazy" src="{$base_uri}modules/x13lazyload/views/img/loader.svg" data-original="....svg - w przypadku pliku svg
.jpg - w przypadku pliku jpg
LazyLoad w innym miejscu niż lista produktów
Moduł LazyLoad, może być wykorzystany również na innych podstronach w naszym sklepie, najczęściej stosuje się go w:
- zdjęciach w opisie na stronie produktu
- zdjęciach w opisie na stronie CMS
- miniaturkach wpisów z bloga, oraz zdjęciach w treści wpisów
Aby wczytać zdjęcia z efektem lazyload, należy dokonać małych zmian w kodzie.
Pierwsza zmiana to dodanie klasy lazy dla danego elementu img (jeśli zdjęcie posiada już swoją klasę dodajemy lazy po spacji, w przypadku braku klasy, należy dodać cały kod class="lazy"
Kolejna zmiana to edycja źródła do zdjęcia src=", zamieniamy je na src="{$base_uri}modules/x13lazyload/views/img/loader.gif" data-original=".
Po wykonaniu modyfikacji kodu, zalecamy przejść do sprawdzenia doładowywania zdjęć.
Poniżej przykład zmienionego kodu:
<img src="...i zmieniamy na
<img class="lazy" src="{$base_uri}modules/x13lazyload/views/img/loader.gif" data-original="...