Press "Enter" to skip to content

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

Admin 4

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):

class="img-fluid"

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

<img class="img-fluid" ...

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:

themes/{SZABLON}/assets/js/custom.js

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

themes/{SZABLON}/assets/js/theme.js

I dopisz na jego końcu ten kod:

jQuery(document).ready(function ($) {
    jQuery('.product-description img').each( function(){
        jQuery(this).addClass('img-fluid')
    })
})

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 ?

  4. Topsy Topsy

    Witam, dodałem tak jak jest na stronce – natomiast pomimo czyszczenia cache dziaął tylko jesli dodam <img class="img-fluid" …

    Co jeszcze mogłem zrobić źle? 🙂

Dodaj komentarz

Twój adres e-mail 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?…