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

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:

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:

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