Zmiana zdjęcia po najechaniu na miniaturę produktu – efekt image swap

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ę?

  1. Zaloguj się do panelu administracyjnego swojego sklepu
  2. Przejdź do zakładki "Wygląd i treści" -> "Wygląd sklepu" -> "Obecny szablon graficzny"
  3. W menu z lewej strony wybierz zakładkę "Własny skrypt JS"
  4. 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!

Zobacz więcej

Stwórzmy razem
coś wyjątkowego.

Skontaktuj się

© 2024 / BELGRAV / All Rights Reserved.