Dodanie nowego widoku filtrów

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" -%}

    {% else -%}

    {% 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 -%}

    {% endfor -%}

    {% if filterValuesLength > limit and filter.Field != colorFilterName and settings.filterPanelView == "left" -%}

    {% endif -%}

  • {% endunless -%}
    {% endfor -%}
    {% if settings.filterPanelView == "up" -%}

  • {% endif -%}

{% if settings.filterPanelView == "left" -%}

{% 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?