Slajder marek w szablonie Topaz

Slajder marek w szablonie Topaz

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał slajder marek.

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

W Panelu Administracyjnym przejdź do zakładki Obiekty (Wygląd sklepu -> Ustawienia -> Więcej (prawy górny róg) -> Edytuj ustawienia zaawansowane -> Obiekty). Naciśnij przycisk Dodaj. W formularzu wybierz Menu producentów i marek, a jako nazwę ustaw manufacturer-brand. Teraz kliknij na nowo utworzony obiekt na liście. Po otwarciu ustawień obiektu, przejdź do zakładki Strony a następnie zaznacz Strona główna, Produkty i Szczegóły produktu, w zależności od tego na jakiej stronie ma być umiejscowiony slajder (istnieje możliwość wyświetlenia slajdera na wszystkich w.w. stronach). Zapisz poprzez kliknięcie przycisku Zapisz w prawym górnym rogu. W ten sposób będzie możliwe wyświetlanie logo producentów na stronie sklepu.

Kolejnym krokiem jest dodanie na stronę sklepu podglądu slidera. Dostępne są dwa warianty. Pierwszy z nich wyświetla loga producentów w prosty sposób, a drugi  wokół każdego logo dodaje cienką ramkę. W celu wykonania tej operacji, przejdź do plików sklepu, otwórz katalog elements a następnie utwórz w nim nowy katalog o nazwie brand. W nowo utworzonym katalogu należy stworzyć pliki o nazwie brand-1.html oraz brand-2.html (w zależności czy chcemy wariant pierwszy, drugi czy obydwa). Następnie w pliku tym należy dodać poniższy kod:

Uwaga
Na jednej stronie można dodać tylko jeden slider!

Wariant zwykły:

{% if manufacturer-brand.Brands -%}
{% assign brands = manufacturer-brand.Brands -%}
<div class="brand1-slider">
{% for brand in brands -%}
{% if brand.ImageId > 0 -%}
<div class="brand1-slider__wrapper">
{% if brand.Url != empty -%}
<a aria-label="brand-url" class="item" href="{{brand.Url}}">
{% endif -%}
<figure>
{% if brand.Heading != null -%}
{% assign title = {{brand.Heading | H}} -%}
{% else -%}
{% assign title = {{brand.Name | H}} -%}
{% endif -%}
{{brand | Img: "compact"}}
</figure>
{% if brand.Url != empty -%}
</a>
{% endif -%}
</div>
{% endif -%}
{% endfor -%}
</div>
{% endif -%}

{% if manufacturer-brand.Brands -%}
{% assign brands = manufacturer-brand.Brands -%}
<div class="brand2-slider">
{% for brand in brands -%}
{% if brand.ImageId > 0 -%}
<div class="brand2-slider__wrapper">
<div class="slider2-element-border">
{% if brand.Url != empty -%}
<a class="item" href="{{brand.Url}}">
{% endif -%}
<figure>
{% if brand.Heading != null -%}
{% assign title = {{brand.Heading | H}} -%}
{% else -%}
{% assign title = {{brand.Name | H}} -%}
{% endif -%}
{{brand | Img: "compact"}}
</figure>
{% if brand.Url != empty -%}
</a>
{% endif -%}
</div>
</div>
{% endif -%}
{% endfor -%}
</div>
{% endif -%}

Po wprowadzeniu powyższego kodu, otwieramy pliki dla stron, na których chcemy umieścić slider. Odpowiednio:

  • Strona główna — home-page.html
  • Lista produktów — product-list.html
  • Strona produktu — product-page.html

Znajdują się w głównym katalogu. Należy dodać w nich linijkę:

Wariant zwykły:

{% include 'elements/manufacturer/brand-1.html' with 'manufacturer-brand' -%}

{% include 'elements/manufacturer/brand-2.html' with 'manufacturer-brand' -%}
Kod ten należy umieścić w dowolnym miejscu pomiędzy linią {% block pageContent -%} a linią {% endblock -%}. Powyższa linia kodu odpowiada za położenie bloga na stronie głównej, dlatego jej umiejscowienie zależy od własnych preferencji.

Następnie należy otworzyć katalog css a w nim plik layout.css. Na jego końcu wklejamy następujący kod:

Wariant zwykły:

.brand1-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand1-slider .slick-track{height:100%;display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper{width:100%;box-sizing:border-box;position:relative}.brand1-slider__wrapper a{height:100px}.brand1-slider__wrapper a figure{display:flex;align-items:center;justify-content:center}.brand1-slider__wrapper a figure img{filter:grayscale(100%)}.brand1-slider__wrapper a figure img:hover{filter:none}

.brand2-slider{margin:20px auto;background-color:{{settings.primaryPageBgColor}};height:auto}.brand2-slider .slick-track{display:flex;align-items:center;justify-content:center}.brand2-slider__wrapper{margin:0 25px;box-sizing:border-box}.brand2-slider__wrapper .slider2-element-border{display:flex;align-items:center;border:1px #ebebeb solid;justify-content:center;height:150px}.brand2-slider__wrapper a figure{display:flex;justify-content:center;box-sizing:content-box}.brand2-slider__wrapper a figure img{filter:grayscale(100%);max-width: 150px;}.brand2-slider__wrapper a figure img:hover{filter:none}
Po wykonaniu powyższych operacji, wracamy do głównego katalogu, otwieramy folder js a w nim plik layout1.js.

Następujący kod należy wkleić na końcu pliku:

Wariant zwykły:

$('.brand1-slider').slick({
lazyLoad: 'progressive',
infinite: true,
slidesToShow: 5,
slidesToScroll: 1,
draggable: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 550,
settings: {
centerMode: true,
slidesToShow: 1
}
}
] });
$('.brand2-slider').slick({
lazyLoad: 'progressive',
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
draggable: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [
{
breakpoint: 1600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
},
{
breakpoint: 550,
settings: {
centerMode: true,
slidesToShow: 1
}
}
] });

 

Czy ten artykuł był pomocny?