Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

W tym artykule dowiesz się jak dodać możliwość wyświetlania drugiego zdjęcia na liście towarów.

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować i kompilować

Uwaga

Zapis nazwa_folderu/nazwa_pliku.rozszerzenie oznacza, że aby znaleźć dany plik należy udać się do folderu o nazwie podanej przed ukośnikiem. Przykładowo: order/thx.html oznacza plik thx.html w folderze order

Na początku w pliku elements\product-details-1.html lub elements\product-details-2.html (w zależności od typu wyglądu), za pomocą narzędzia wyszukiwania, znajdź linijkę:


<img alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{image.Id}}/{{image.Link}}.jpg">

W miejsce tej linijki wklej następujacy kod:


<img class="open-gallery" alt="{{image.Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{image.Id}}/{{image.Link}}.jpg">

Następnie w tym samym pliku, za pomocą narzędzia wyszukiwania, znajdź linijkę:


<img alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/grande/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

W jej miejsce wklej następujący kod:


<img class="open-gallery" alt="{{product.Images[0].Alt | H}}" src="css/img/alo.gif" data-lazy="img/{{product.Images[0].Id}}/{{product.Images[0].Link}}.jpg">

Kolejnym krokiem jest przejście do pliku js\layout1.js. W pliku tym, za pomocą narzędzia wyszukiwania, znajdujemy frazę var productDetailsFunctions = {, a następnie bezpośrednio pod nią wklejamy następujący kod:


openGallery: function (e) {
var t = $(".product-details__image").slick("slickCurrentSlide");
var i = $(e.currentTarget).parents(".product-details__images");
i.addClass("opened-gallery");
i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>');

$("body").addClass("modal-opened");
$(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch");
$(".product-details__image-list").addClass("slider-hidden");
$(".product-details__image").addClass("opened-gallery");
$(".product-details__image").slick("unslick");

this.setGallerySlider(t);
$(".draggable").css("top", "25%");
},
closeGallery: function (e) {
$(".product-details__images").removeClass("opened-gallery");
$(".product-details__image").removeClass("opened-gallery");
$(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch");
$(e.currentTarget).remove();
$(".product-details__image-list").removeClass("slider-hidden");
$("body").removeClass("modal-opened");
$(".product-details__image").slick("unslick");
$(".draggable").css("top", "0");

this.setSlider();
},
setGallerySlider: function (t) {
$(".product-details__image").slick ({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',
accessibility: false,
dots: false,
});
$(".product-details__image").slick("slickGoTo", t, true);
},

openGallery: function (e) {

var t = $(".product-details__image").slick("slickCurrentSlide");

var i = $(e.currentTarget).parents(".product-details__images");

i.addClass("opened-gallery");

i.append('<svg class="svgIcon close-gallery-button"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg>');

$("body").addClass("modal-opened");

$(".open-gallery:not(.opened-gallery-switch)").addClass("opened-gallery-switch");

$(".product-details__image-list").addClass("slider-hidden");

$(".product-details__image").addClass("opened-gallery");

$(".product-details__image").slick("unslick");

this.setGallerySlider(t);

$(".draggable").css("top", "25%");

closeGallery: function (e) {

$(".product-details__images").removeClass("opened-gallery");

$(".product-details__image").removeClass("opened-gallery");

$(".open-gallery.opened-gallery-switch").removeClass("opened-gallery-switch");

$(e.currentTarget).remove();

$(".product-details__image-list").removeClass("slider-hidden");

$("body").removeClass("modal-opened");

$(".product-details__image").slick("unslick");

$(".draggable").css("top", "0");

this.setSlider();

setGallerySlider: function (t) {

$(".product-details__image").slick ({

infinite: true,

slidesToShow: 1,

slidesToScroll: 1,

autoplay: false,

nextArrow: '<button type="button" aria-label="nextArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowRight"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',

prevArrow: '<button type="button" aria-label="prevArrow" class="slick-next"><svg class="svgIcon svgIcon--arrowLeft"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg></button>',

accessibility: false,

dots: false,

});

$(".product-details__image").slick("slickGoTo", t, true);

W tym samym pliku za pomocą narzędzia wyszukiwania znajdź frazę var body = $('body'); a bezpośrednio pod nią wklej następujacy kod:


body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) {
productDetailsFunctions.openGallery(e);
}),

$("body").on("click", ".close-gallery-button", function(e) {
productDetailsFunctions.closeGallery(e);
}),

body.on("click", ".open-gallery:not(.opened-gallery-switch)", function(e) {

productDetailsFunctions.openGallery(e);

}),

$("body").on("click", ".close-gallery-button", function(e) {

productDetailsFunctions.closeGallery(e);

}),

Przejdź do pliku css\elements\product-deatils-1-g.css lub css\elements\product-deatils-2-g.css (w zależności od typu wyglądu). Na koncu pliku wklej następujący kod:


.close-gallery-button {
position: fixed;
right: 0;
top: 0;
background: transparent;
color: #656565;
z-index: 20;
border: 0;
font-size: 20px;
width: 50px;
height: 50px;
cursor: pointer;
}

.slider-hidden {
display: none;
}

.opened-gallery {
position: fixed;
display: flex;
z-index: 20;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #ffffff;
width: 100%;

.slick-next:last-child {
right: 20px;
}

.slick-next:first-child {
left: 20px;
}

.slick-next {
height: 35px;
width: 35px;
}

img { 
  max-height: none;
  }
}

.close-gallery-button {

position: fixed;

right: 0;

top: 0;

background: transparent;

color: #656565;

z-index: 20;

border: 0;

font-size: 20px;

width: 50px;

height: 50px;

cursor: pointer;

}

.slider-hidden {

display: none;

}

.opened-gallery {

position: fixed;

display: flex;

z-index: 20;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #ffffff;

width: 100%;

.slick-next:last-child {

right: 20px;

}

.slick-next:first-child {

left: 20px;

}

.slick-next {

height: 35px;

width: 35px;

}

img {

max-height: none;

}

Ostatnim krokiem jest przeście do pliku css\base_layout-g.css. Znajdź frazę body { i bezpośrednio pod wyszukaną linijką wklej następujacy kod:


 &.modal-opened {
overflow: hidden;
}

&.modal-opened {

overflow: hidden;

}

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

Powiększanie zdjęć w szczegółach towaru w szablonie Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt