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 -%}

{% for brand in brands -%}

{% if brand.ImageId > 0 -%}

{% if brand.Url != empty -%}

{% endif -%}

{% if brand.Heading != null -%}

{% assign title = {{brand.Heading | H}} -%}

{% else -%}

{% assign title = {{brand.Name | H}} -%}

{% endif -%}

</figure>

{% if brand.Url != empty -%}

</a>

{% endif -%}

</div>

{% endif -%}

{% endfor -%}

</div>

{% endif -%}

Wariant z ramką wokół logo:


{% 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 -%}

{% if manufacturer-brand.Brands -%}

{% assign brands = manufacturer-brand.Brands -%}

{% for brand in brands -%}

{% if brand.ImageId > 0 -%}

{% if brand.Url != empty -%}

{% endif -%}

{% if brand.Heading != null -%}

{% assign title = {{brand.Heading | H}} -%}

{% else -%}

{% assign title = {{brand.Name | H}} -%}

{% endif -%}

</figure>

{% if brand.Url != empty -%}

</a>

{% endif -%}

</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-1.html' with 'manufacturer-brand' -%}

Wariant z ramką wokół logo:


{% include 'elements/manufacturer/brand-2.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}

.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}

.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
            }
        }
    ]
});

$('.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
            }
        }
    ]
});

$('.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

}

]

});

Slajder marek w szablonie Topaz