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ź przyciskiemDodaj.
Nowa strona zostaje dodana jako nieaktywna. W celu jej aktywowania wystarczy kliknąć na jej kafelek i zmienić przełącznik opcji Aktywnana 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ą przyciskuZapisz.
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 -%}
{% 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?
Inne w kategorii
-
-1
- 2098
-
1
- 2273
-
-1
- 2668
-
-26
- 1636
-
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
-
0
- 2880
-
0
- 3135