Strona producentów w szablonie Szafir
W tym artykule dowiesz się jak dodać stronę producentów w swoim szablonie.
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. 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. W głównym folderze szablonu Szafir stwórz plik o nazwie manufacturers.html. Do pliku wklej następujący kod: <div class="manufacturers-ui manufacturers-lq"> A na końcu pliku (przed ostatnią klamrą) scss/globals/_globals-m.scss wklej taki kod: $('body').on('click', '.show-more-manufacturers-lq', function (e) { if($(window).width() <= 1279 && $('.manufacturer-lq.hidden-lq').length > 0) {
{% 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>
{% 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;
}
}
.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');
}
};
showMoreManufacturers(e);
});
$('.manufacturer-lq.hidden-lq').removeClass('hidden-lq');
}