Przed instalacj膮 i konfiguracj膮 modu艂u zapraszamy do zapoznania si臋 z instrukcj膮.
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.
Modu艂 mo偶esz znale藕膰 na li艣cie jako
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.
Sprawdzamy czy mamy ustawione wymuszanie zmian w szablonie lub czy艣cimy cache.
Wchodzimy w Parametry zaawansowane -> Wydajno艣膰
Klikamy po prawej Wyczy艣膰 pami臋膰 podr臋czn膮
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膰.
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.
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
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
Modu艂 LazyLoad, mo偶e by膰 wykorzystany r贸wnie偶 na innych podstronach w naszym sklepie, najcz臋艣ciej stosuje si臋 go 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="...