Strona producentów w szablonie Szafir

Strona producentów w szablonie Szafir

W tym artykule dowiesz się jak dodać stronę producentów w swoim szablonie.

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

Nową stronę dodamy w panelu administracyjnym w obszarze Wygląd sklepu/ Strony. W sekcji Użytkownika skorzystaj z przycisku Dodaj. Wypełnij pola z nazwą, linkiem i tytułem strony i zatwierdź przyciskiem Dodaj.

dodawanie nowej strony

Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywna na TAK.

Teraz zajmiemy się dodaniem pliku strony.

Przejdź do obszaru Wygląd sklepu/ Ustawienia, następnie użyj przycisku Więcej i wybierz Edytuj ustawienia zaawansowane. Przejdź na zakładkę Strony. Dla nowo dodanej strony w kolumnie Plik należy wpisać nazwę pliku który będziemy tworzyć z końcówką html, przykładowo: manufacturers.html.

Wprowadzone zmiany zachowaj za pomocą przycisku Zapisz.

Następnie proszę dodać tłumaczenia. W sekcji Wygląd sklepu/ Ustawienia/ Tłumaczenia po kliknięciu w przycisk Dodaj należy wpisać Id tłumaczenia oraz Tekst, który będzie się wyświetlał w e-Sklepie. Zmiany należy zatwierdzić przyciskiem Dodaj.

  • Id: ShowProducts — Tekst: Pokaż produkty
  • Id: ShowMore — Tekst: Pokaż więcej

W głównym folderze szablonu Szafir stwórz plik o nazwie manufacturers.html. Do pliku wklej następujący kod:
{% extends '_layout.html' %}
{% block pageContent -%}
{% assign manufacturers = manufacturer-brand.Manufacturers -%}
{% assign manufacturersSize = manufacturers | Size -%}
<section class="product-presentation-ui container-ui manufacturers-container-ui">
<div class="manufacturers-breadcrumbs-ui">
{% include 'common/breadcrumbs.html' -%}
</div>

<div class="manufacturers-ui manufacturers-lq">
{% for manufacturer in manufacturers -%}
<div class="manufacturer-ui manufacturer-lq {% if forloop.index > 12 -%} hidden-lq {% endif -%}">
{% if manufacturer.ImageId != 0 -%}
{{ manufacturer | Img:'large' }}
{% endif -%}
<h2>{{ manufacturer.Name }}</h2>
<a href="{{ manufacturer.Url }}" name="{{ manufacturer.Name }}" title="{{ manufacturer.Name }}">
{{ translations.ShowProducts }} <i class="ti-arrow-right"></i>
</a>
</div>
{% endfor -%}
</div>
{% if manufacturersSize > 12 -%}
<button class="show-more-manufacturers-ui show-more-manufacturers-lq">{{ translations.ShowMore }}</button>
{% endif -%}
</section>
{% endblock -%}

Na końcu pliku scss/globals/_globals2.scss wklej taki kod:
.manufacturers-container-ui{
text-align: center;
.manufacturers-breadcrumbs-ui{
text-align: left;
}
.manufacturers-ui{
text-align: left;
}
.manufacturer-ui{
width: calc(25% - 64px);
margin-right: 60px;
margin-bottom: 60px;
display: inline-block;
i{
margin-left: 5px;
}
}
.show-more-manufacturers-ui{
margin: 40px auto;
width: 300px;
}
}

A na końcu pliku (przed ostatnią klamrą) scss/globals/_globals-m.scss wklej taki kod:

.manufacturers-container-ui{
.manufacturer-ui{
width: calc(50% - 43px);
margin: 40px 20px;
}
.show-more-manufacturers-ui{
display: none;
}
}

Następnie przechodzimy do pliku js/init-ui2.js, a na jego końcu doklejamy następujący kod:
function showMoreManufacturers(e) {
$('.manufacturer-lq.hidden-lq').each(function(index){
if(index < 12){
$(this).removeClass('hidden-lq');
app.loadImages();
}
});
if($('.manufacturer-lq.hidden-lq').length == 0){
$(e.currentTarget).addClass('hidden-lq');
}
};

$('body').on('click', '.show-more-manufacturers-lq', function (e) {
showMoreManufacturers(e);
});

if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) {
$('.manufacturer-lq.hidden-lq').removeClass('hidden-lq');
}

Czy ten artykuł był pomocny?