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 -%}
{% endif -%}`
Wariant z ramką wokół logo:
`{% if manufacturer-brand.Brands -%}
{% assign brands = manufacturer-brand.Brands -%}
{% 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' -%}
Wariant z ramką wokół logo:
{% 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}
Wariant z ramką wokół logo:
.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
}
}
]
});
Wariant z ramką wokół logo:
$('.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?
Inne w kategorii
-
-1
- 2099
-
1
- 2273
-
-1
- 2669
-
-26
- 1636
-
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
-
0
- 2880
-
0
- 3135