Press "Enter" to skip to content

PrestaShop 1.7 – niedopasowane do urządzeń mobilnych (RWD) zdjęcia w opisach produktów

Admin 3

Po uruchomieniu sklepu w wersji 1.7 możemy zauważyć, że jak dodamy zdjęcia w opisie produktów – to nie są one dopasowane do urządzeń mobilnych.

Niestety aby zdjęcia były responsywne powinny one posiadać klasę (atrybut w HTML):

Czyli np. taki obrazek w kodzie HTML w opisie produktu powinien wyglądać w ten sposób:

Trudno jednak dodać tę klasę przez interface i należy to robić przez edycję źródła. NIe zawsze też pamiętamy aby to zrobić i gdy o tym zapomnimy – zdjęcie np. na smartfonie nie dopasowuje się do wymiaru okna. Niestety źle to wygląda:

żle dopasowane zdjęcie do wymiaru okna w mobile – zrzut ze strony yuneec-dron.pl

Jest sposób, aby automatycznie dodawać tę klasę do każdego obrazka w opisie produktu. Wystarczy odpowiedni kod JavaScript.

Otwórz plik:

Jeśli nie masz tego pliku – otwórz plik:

I dopisz na jego końcu ten kod:

Po wyczyszczeniu cache sklepu (może to być konieczne, choć nie do końca) w dziale:

Zaawansowane -> Wydajność

Problem powinien zostać rozwiązany:

prawidłowo dopasowane zdjecie w opisie produktu do wymiaru okna w mobile – zrzut ze strony yuneec-dron.pl

Co ważne, zadziała to od razu na wszystkich produktach. Tych dodanych wcześniej i tych dodanych w przyszłości.

 

 

grafika: wallpaperflare.com

  1. fandc fandc

    a zadziała to na stronach cmsa?

  2. Seweryn Seweryn

    Dzień dobry. Świetna pomoc.
    Mam pytanie, ponieważ już kilka dni szukam na forach i nie znalazłem konkretnej odpowiedzi.
    Chodzi mi o identyczną pomoc jak wyżej – jednak do prestashop 1.6.24
    Czy mógłby mi pan wskazać podobne rozwiązanie.
    Byłbym bardzo wdzięczny

  3. Sebastian Sebastian

    Witam,
    a jak powinien wyglądać kod aby zdjęcie się skalowało w wyskakującym okienku popup ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Zobacz także !
Jak kilka ostatnio dodanych produktów w sklepie traktować jako nowe?…