Brak produkt贸w
Dokumentacja - LazyLoad dla PrestaShop
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="...