Dokumentacja - LazyLoad dla PrestaShop

Instrukcja instalacji i obs艂ugi modu艂u LazyLoad dla PrestaShop od X13.pl
1.7.X  1.6.X  1.5.X 
1.2.0 / 2020-09-14
zobacz changelog

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.

  1. PHP: 5.4 - 7.4
  2. ionCube: tak

Instalacja

Modu艂 mo偶esz znale藕膰 na li艣cie jako

  1. Nazwa: LazyLoad dla PrestaShop
  2. Autor: x13.pl
  3. Kategoria: SEO / Optymalizacja SEO
  4. 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="...