W niektórych sklepach z branży odzieżowej możemy zauważyć możliwość przeglądania kolejnych zdjęć produktu po najechaniu na miniaturę.
Niektóre z rozwiązań oferują zaawansowane rotatory zdjęć, umożliwiające przejrzenie całej galerii produktu z poziomu listingu produktów, jednak najprostszym z nich jest podmiana pierwszego zdjęcia na drugie w kolejności. W tym poradniku dowiesz się jak uzyskać taki efekt w platformie Shoper.
W przypadku posiadania indywidualnego szablonu graficznego, możemy poprosić o wdrożenie poprawki autora szablonu. Jeżeli posiadasz standardowy szablon Shoper o nazwie „RWD – uniwersalny” możesz skorzystać z naszego gotowego rozwiązania
Jak wygląda działanie modyfikacji w praktyce?
Jak dodać modyfikację?
- Zaloguj się do panelu administracyjnego swojego sklepu
- Przejdź do zakładki "Wygląd i treści" -> "Wygląd sklepu" -> "Obecny szablon graficzny"
- W menu z lewej strony wybierz zakładkę "Własny skrypt JS"
- Wklej poniższy kod
/* -------- Zmiana zdjęcia po najechaniu - START -------- */
$(document).ready(function() {
if(window.innerWidth > 767) {
$(".products.s-row .product, #box_lastadded .product, #box_specialoffer .product, #box_bestsellers .product").each(function() {
var pd = this;
frontAPI.getProduct(function (product) {
if(product.images[1] != undefined) {
$(pd).find("img").attr("data-2-image", "/environment/cache/images/500_500_productGfx_"+product.images[1]+".jpg");
}
}, {id: $(this).attr("data-product-id")});
});
$(".prodimage .img-wrap, .boximgsize").on("mouseover", function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-2-image"));
});
$(".prodimage .img-wrap, .boximgsize").on("mouseleave", function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
}
});
/* -------- Zmiana zdjęcia po najechaniu - KONIEC -------- */Sekcje START oraz KONIEC pozwolą Ci na szybkie rozpoznanie różnych modyfikacji oraz usunięcie ich w razie problemów lub zmiany zdania
Kod zaktualizowany 2.12.2021 - w razie problemów napisz do nas!
