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.
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.
Szafir
W pliku __settings.liquid dodaj poniżesze tłumaczenia:
{% 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" -%}
W tym samym pliku wyszukaj frazę id=”tab1″ i linijkę niżej wklej:
{{productsList}}
Teraz wyszukaj frazę:
{% endif -%}
{% endblock -%}
products/product-filters.html
{% if settings.filterPanelView == "left" -%}
{{translations.Filters}}
{% endif -%}
{% assign fo = products.FilteringOptions -%}
{% unless customer.HidePrices -%}- {{ translations.Price }}
{{translations.RangeFrom | Downcase }}
{{translations.RangeTo | Downcase }}
{{ currencyExt }}
{% endunless -%}
{% if settings.graphicColorFilter == 'yes' and color-filter.Content and color-filter.Content != '' %}
{% assign colorFilterArr = color-filter.Content | StripNewlines | Split: '|||' -%}
{% assign colorFilterName = colorFilterArr[0] -%}
{% assign colorFilterValues = colorFilterArr[1] | Split: '||' -%}
{% endif -%}
{% for filter in fo.Filters -%}
{% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%}
{% assign isSthSelected = false -%}
{% assign allSelected = false -%}
{% assign selectedQuantity = 0 -%}
{% for value in filter.Values -%}
{% if value.Selected -%}
{% if isSthSelected == false and settings.toggleFilters == 2 -%}
{% assign isSthSelected = true -%}
{% endif -%}
{% capture stringToAdd -%}{{value.Field}}|{{filter.Heading}}|{{value.Value}}|{{value.Text}}||{% endcapture -%}
{% assign activeFiltersKeysString = activeFiltersKeysString | Append: stringToAdd -%}
{% assign activeFiltersQuantity = activeFiltersKeysString | Split:'||' | Size -%}
{% assign selectedQuantity = selectedQuantity | Plus: 1 -%}
{% assign filtersQuantity = filter.Values | Size -%}
{% if selectedQuantity == filtersQuantity -%}
{% assign allSelected = true -%}
{% endif -%}
{% endif -%}
{% endfor -%}
- {% if settings.filterPanelView == "left" -%}
{{ filter.Heading | Capitalize }}
{% else -%}
{{ filter.Heading | Capitalize }}
{% endif -%}
{% assign filterValuesLength = filter.Values | Size -%}
{% if filter.Field == colorFilterName or isSthSelected or settings.filterPanelView == "up" -%}
{% assign limit = filterValuesLength | ToInt -%}
{% else -%}
{% assign limit = settings.maxfilter | ToInt -%}
{% endif -%}
{% for value in filter.Values limit: limit -%}
{% if value.Field == colorFilterName -%}
{% for colorFilterValue in colorFilterValues -%}
{% assign colorFilterValueArr = colorFilterValue | Split: '|' -%}
{% assign colorFilterValueName = colorFilterValueArr[0] -%}
{% assign colorFilterValueHash = colorFilterValueArr[1] -%}
{% if colorFilterValueName == value.Value -%}
{% assign colorHash = colorFilterValueHash -%}
{% endif -%}
{% endfor -%}
{% endif -%}
{% if value.Field != colorFilterName -%}
{% if value.Field == "REWARD" -%}
{{ translations.PointsProduct }}
{% else -%}
{{ value.Text }}
{% endif -%}
({{value.Count}})
{% endif -%}
{% endfor -%}
{% if filterValuesLength > limit and filter.Field != colorFilterName and settings.filterPanelView == "left" -%}
...{{translations.ShowMore | Downcase}}
{% endif -%}
{% endunless -%}
{% endfor -%}
{% if settings.filterPanelView == "up" -%}
- {{ translations.ClearAllFilters }}
{% endif -%}
{% if settings.filterPanelView == "left" -%}
{{ translations.Apply }}
{% endif -%}
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:
$('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);
});
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:
$('body').on('click', '.toggle-filters-button-lq', function () {
$('.filters-label-lq').toggleClass('hidden-lq');
});
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:
.category-description-ui{
display: none;
}
Usuń ten fragment. Jeszcze niżej znajdziesz .category-img-ui{. Usuń w nim height: auto !important;. Znajdz i usuń poniższy fragment:
.view-options-mobile-ui{
width: 21px;
margin-right: 20px;
}
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:
.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;
}
}
}
.filters-up-main-container-ui{
margin: 0;
}
.filters-up-ui{
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;
}
}
}
}
}
.undercategory-links-ui{
padding: 0 20px;
a{
width: calc(50% - 10px);
&:nth-child(5n){
margin-right: 20px;
}
&:nth-child(2n){
margin-right: 0;
}
}
}
Przejdz do pliku scss/globals/_globals1.scss na samym dole wklej poniższy kod:
.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;
}
}
.graph-desc-category-down-ui{
display: flex;
flex-flow: column;
.category-section-ui{
order: 1;
}
}
.category-section-ui{
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;
}
}
}
.filters-up-ui{
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;
}
}
}
}
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:
- CloseFilters: Zwiń filtry
- ClearAllFilters: Wyczyść wszystkie filtry
Czy ten artykuł był pomocny?
( 1 )