Dodanie nowego widoku filtrów
Szablon Szafir umożliwia dodanie w nim nowego widoku filtrów oraz modyfikowację ustawienia szablonu, aby był bardziej czytelny. Zmiany wyglądu dotyczą opisu danej kategorii i graficznych odnośników do podkategorii. W pliku __settings.liquid dodaj poniżesze tłumaczenia: W tym samym pliku wyszukaj frazę id=”tab1″ i linijkę niżej wklej: Teraz wyszukaj frazę: {% endblock -%} products/product-filters.html W pliku common/categories-navigation/categories-navigation-partial.html na samym dole znajdź warunek {% if areFilteringOptionsClass == 'with-filters-ui' -%} i zamień go na {% if areFilteringOptionsClass == 'with-filters-ui' and settings.filterPanelView == "left" -%} Następnie w pliku js/init.js znajdź frazę events: function() i linijkę niżej wklej poniższy kod: Kontynuując zmiany w tym samym pliku, wyszukaj frazę form.find('[type="number"]').val(''); i zmień tam number na tel. Na końcu funkcji w której znajduje się ta fraza dopisz app.filter(e);. Przejdź do pliku js/init-ui1.js i na samym końcu wklej poniższy kod: W tym momencie masz już dodany filtr, w następnych krokach będziesz edytował styl. W pliku scss/globals/_globals-m.scss znajdź frazę .products-page-lq{ i usuń z tej klasy margin-top: 114px;. Kilka linijek niżej znajdziesz: Usuń ten fragment. Jeszcze niżej znajdziesz .category-img-ui{. Usuń w nim height: auto !important;. Znajdz i usuń poniższy fragment: Linijkę niżej jest kod .sorting-options-ui{. Zmień w nim linijkę width: calc(100vw - 80px - 21px - 60px); na width: calc(100vw - 192px); i usuń oba wpisy związane z wysokością height: 26px;. Następnie w obrębie @media only screen and (max-width: 1279px) { (np w 2 linijce pliku) wklej poniższy kod: .filters-up-main-container-ui{ .filters-up-ui{ .undercategory-links-ui{ Przejdz do pliku scss/globals/_globals1.scss na samym dole wklej poniższy kod: .graph-desc-category-down-ui{ .category-section-ui{ .filters-up-ui{ Ostatnim krokiem będzie znalezienie w scss/partials/_product-list.scss frazy .change-view-ui i podmień margin-right na margin-left Jedyne zmiany w panelu administracyjnym wymagają dodania dwóch tłumaczeń. Wygląd sklepu -> Ustawienia -> Tłumaczenia:
Szafir
{% assign productsList = "Lista towarów" -%}
{% assign filterPanel = "Panel filtra" -%}
{% assign filterPanelView = "Widok panelu filtra" -%}
{% assign filterPanelViewOption1 = "Po lewej pod menu kategorii" -%}
{% assign filterPanelViewOption2 = "U góry nad listą towarów" -%}
{% assign defaultSection = "Sekcja domyślnie" -%}
{% assign closed = "Zwinięta" -%}
{% assign opened = "Rozwinięta" -%}
{% assign graphMenu = "Graficzne menu" -%}
{% assign graphMenuInfo = "Dodatkowe, graficzne menu nawigacji do podgrup" -%}
{% assign category = "Kategoria" -%}
{% assign nameGraphDescCategory = "Nazwa, grafika i opis kategorii" -%}
{% assign overProductsList = "Nad listą towarów" -%}
{% assign underProductsList = "Pod listą towarów" -%}
{% assign graphFormOfNameDescImgCategory = "Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii" -%}
{% assign backgroundImage = "Zdjęcie w tle" -%}
{% assign leftImage = "Zdjęcie po lewej" -%}
{{productsList}}
{% endif -%}
$('body').on('change', '.all-values-checkbox-lq', function(e) {
var isChecked = $(e.currentTarget).prop('checked');
$(e.currentTarget).parents('.filter-item-lq').find('[type=checkbox]').prop('checked', isChecked);
});
$('body').on('change', '.filters-up-lq .product-filters-lq input', function(e) {
app.filter(e);
});
$('body').on('click', '.toggle-filters-button-lq', function () {
$('.filters-label-lq').toggleClass('hidden-lq');
});
.category-description-ui{
display: none;
}
.view-options-mobile-ui{
width: 21px;
margin-right: 20px;
}
.products-navigation-ui.filters-up-ui .sorting-views-container-ui .sorting-options-ui{
.dropdown-trigger-ui{
padding: 10px;
}
.toggle-filters-button-ui{
padding-bottom: 0;
& + .active-sorting-option-ui{
display: block;
}
}
}
margin: 0;
}
position: static;
margin: 0;
width: 100%;
background-color: $bgColor;
.sorting-views-container-ui{
padding: 20px 20px 0 20px;
}
.product-filters-ui{
position: static;
padding: 0;
background: $bgColor;
& > ul{
margin: 20px;
li{
width: calc(50% - 10px);
&:first-child{
width: 100%;
}
&:nth-child(5n){
margin-right: 20px;
}
&:nth-child(2n+1){
margin-right: 0;
}
}
}
}
}
padding: 0 20px;
a{
width: calc(50% - 10px);
&:nth-child(5n){
margin-right: 20px;
}
&:nth-child(2n){
margin-right: 0;
}
}
}
.undercategory-links-ui{
display: flex;
flex-wrap: wrap;
a{
width: calc(20% - 16px);
border: 1px solid $lightBorderColor;
margin: 0 20px 20px 0;
padding: 20px;
text-align: center;
&:nth-child(5n){
margin-right: 0;
}
}
.category-name-ui{
font-weight: 700;
margin-bottom: 20px;
color: $primaryColorFont;
}
img{
max-width: 100%;
max-height: 200px;
}
}
display: flex;
flex-flow: column;
.category-section-ui{
order: 1;
}
}
button{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
border: 1px solid $lightBorderColor;
padding: 20px;
background: transparent;
color: $primaryColorFont;
}
h1{
font-size: 20px;
color: $primaryColorFont;
}
&.left-ui{
.category-img-ui .category-container-ui .category-container-bg-ui{
max-width: none;
}
.category-img-lq{
display: flex;
border: 1px solid $lightBorderColor;
height: auto !important;
}
.img-container-ui{
min-width: 150px;
max-width: 150px;
padding: 20px;
}
img{
max-height: 100%;
}
.category-container-ui{
position: static;
}
.category-description-ui{
height: auto !important;
}
}
}
flex-wrap: wrap;
.toggle-filters-button-ui + .active-sorting-option-ui{
transition: all ease 300ms;
}
.sorting-options-ui .toggle-filters-button-ui{
padding-bottom: 10px;
&.with-quantity-ui{
padding-bottom: 0;
}
&.expanded-lq{
background-color: $btnSolidBgColor;
color: $btnSolidTextColor;
& + .active-sorting-option-ui{
background-color: $btnSolidBgColor;
color: $btnSolidTextColor;
}
}
}
.product-filters-ui > ul{
display: flex;
flex-wrap: wrap;
li{
width: calc(20% - 16px);
border: 1px solid $lightBorderColor;
margin: 0 20px 20px 0;
&:nth-child(5n){
margin-right: 0;
}
}
.price-filter-ui{
padding: 20px;
}
.reset-filters-ui{
border: none;
}
.filter-drop-ui{
padding: 10px 20px;
border-bottom: 1px solid $lightBorderColor;
}
.filter-value-list-ui{
padding: 10px 20px;
overflow: auto;
&::-webkit-scrollbar {
width: 4px;
border-radius: 50%;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px transparent;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(#8E8E8E, 0.5);
outline: none;
border-radius: 2px;
&:hover{
background-color: #8E8E8E;
}
}
&.three-ui{
max-height: 140px;
}
&.five-ui{
max-height: 220px;
}
&.eight-ui{
max-height: 340px;
}
}
}
}
- CloseFilters: Zwiń filtry
- ClearAllFilters: Wyczyść wszystkie filtryCzy ten artykuł był pomocny?