Jump to content

Recommended Posts

Witam, ktoś już próbował stosować lazy-load zdjęć w Shoperze? Nie wiem jak się za to zabrać, zacznijmy od tego że muszę mieć zdjęcie w postaci data-src (a nie src) - czego Shoper nie obsługuje (chyba?).

Share this post


Link to post
Share on other sites

Mamy zaimplementowany, przykładowa kategoria:
https://beerservice.pl/pl/c/Chlodziarki-do-piwa/59

Tak jak mówisz należy umieścić zdjęcie w jakimś divie a link do obrazka umieścic w data-src:

<div class="image lazyload" data-src="link do obrazka"></div>

Następnie jeśli chodzi o JS to należy mieć bibliotekę lazyload i zainicjować ją na przykład w ten sposób (jest dokładna dokumentacja do lazyload):

$(".image.lazyload").lazyload({effect:"fadeIn"});

 

Share this post


Link to post
Share on other sites

@BeerService tak z ciekawości jak wrzucić skrypt, żeby był hostowany na stronie sklepu tak jak macie u siebie lazyload ? :) Macie licencje saas ?

Edited by KamilK

Share this post


Link to post
Share on other sites

Dzięki, choć mam też problem z dodaniem diva (chciałbym je w sliderze zrobić), przy zapisaniu kodu z divem, po prostu kod znika (mam wyłączone czyszczenie html). Próbowałem już różnych metod, zamiast div np. p, ale nigdy zdjęcia nie wyświetla.

Share this post


Link to post
Share on other sites

W sensie, że w edytorze div jest pusty i w ogóle znika? Wstaw do niego &nbsp; Jak nie zadziała to podrzuć link do strony gdzie jest ten slider, zerknę :)

Share this post


Link to post
Share on other sites

@FitnessHome Mamy jeszcze licencję samodzielną, ale skrypty można wrzucać zarówno pośród plików szablonu, ale można też na przykład na tą wydzieloną część, do której ma się dostęp z poziomu FTP (w SaaS w tej najtanszej wersji chyba tego nie ma).

Aby zdjęcie jeszcze się wyświetlało w tym divie zależy dodać CSSy, które określą rozmiar diva a także zachowanie tła. Przykładowo mogą być takie:

width: 100%;
height: 210px;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;


Jednak ciężko mi ocenić teraz jaki to będzie miało wpływ także na Twój skrypt do pokazywania drugiej fotki po najechaniu.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.