Zawężanie filtrów

Zawężanie filtrów

W tym artykule dowiesz się jak dodać możliwość zawężanie filtró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ć

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

Agat

Pierwszym krokiem jest otwarcie pliku category-page.html. Przy użyciu narzędzia wyszukiwania wyszukaj frazę {% assign long = value.Text | Size %}. Usuń następujący kod, znajdujący się pod wyszukaną linijką:
<li {% if long > 40 -%} class="long" {% endif -%}>
<span class="switch-name">{{ value.Text }}</span>
<label class="switch">
<input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {%if value.Selected%}checked{%endif%} value="{{ value.Value | H }}"/>
<span class="switch-label"></span><span class="switch-handle"></span>
</label>
</li>

Następnie w to samo miejsce wklej kod:
<li {% if long > 36 -%} class="long" {% endif -%}>
<span class="switch-name">{{ value.Text }} ({{value.Count}})</span>
<label class="switch">
<input id="flt_{{ value.Field | H }}_{{ value.Value | H }}" class="switch-input" name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}"/>
<span class="switch-label"></span><span class="switch-handle"></span>
</label>
</li>

Teraz przejdź do pliku scss/mobile1.scss i wklej na końcu następujący kod:
[disabled] + .switch-label, [disabled] + .switch-label + .switch-handle {
opacity: 0.5;
cursor: default;
}

Bursztyn

Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class=”switch”> a następnie usuń następujący kod :
<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

W miejsce usuniętego kodu wklej następujący:
<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod:
.switch input:disabled {
& + .input-switch, & + .input-switch + label {
opacity: 0.5;
cursor: default;
}
}

Opal

Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class=”switch”> a następnie usuń następujący kod :
<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {%if v.Selected%}checked{%endif%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} {% if v.Count > 0%}({{v.Count}}/{{v.TotalCount}}){% endif -%}</label>
</div>

W miejsce usuniętego kodu wklej następujący:
<div class="switch">
<input name="{{v.Field|H}}" value="{{v.Value|H}}" id="flt_{{v.Field|H}}_{{v.Value|H}}" type="checkbox" {% if v.Selected -%} checked {% endif -%} {% if v.Count == 0 -%} disabled {% endif -%}/>
<div class="input-switch">
<div class="switch-button"></div>
</div>
<label for="flt_{{v.Field|H}}_{{v.Value|H}}">{{v.Text}} ({{v.Count}})</label>
</div>

Kolejnym krokiem jest otwarcie pliku scss/main.scss. Na jego końcu wklej następujący kod:
.switch input:disabled {
& + .input-switch, & + .input-switch + label{
opacity: 0.5;
cursor: default;
}
}

Szafir

Otwórz plik product-filters.html. Za pomocą narzędzia wyszukiwania znajdź frazę <input name=”{{ value.Field | H }}” type=”checkbox” {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value=”{{ value.Value | H }}” />, a następnie zamień znalezioną linijkę na nastepujacą:
<input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value | H }}" />

Następnie wyszukaj {% if value.Field != colorFilterName -%}, a następnie usuń kod:
{% if value.Field != colorFilterName -%}
{% if value.Field == "REWARD" -%}
{{ translations.PointsProduct }}
{% else -%}
{{ value.Text }}
{% endif -%}
{% endif -%}

W to miejsce wklej następujący kod:
{% if value.Field != colorFilterName -%}
{% if value.Field == "REWARD" -%}
{{ translations.PointsProduct }}
{% else -%}
{{ value.Text }}
{% endif -%}
({{value.Count}})
{% endif -%}

Kolejnym krokiem jest otwarcie pliku scss/globals/_globals1.scss. Za pomocą narzędzia wyszukiwania znajdź frazę [type=”checkbox”], [type=”radio”] { a następnie bezpośrednio pod nią wklej następujący kod:
&:disabled + .label-ui{
opacity: 0.5;
cursor: default;
&::before{
cursor: default;
}
}

Następnie otwórz plik js/init-ui1.js. Za pomocą narzędzia wyszukiwania znajdź frazę for (var i in newFilterValues) i usuń następujący kod:

for (var i in newFilterValues) {
var value = newFilterValues[i];
var isChecked = (value.Selected) ? 'checked' : '';

if(value.Field == 'REWARD'){
value.Text = __translations.pointsProduct;
}

var valueItemHtml = '<label class="checkbox-ui">' +
'<input name="' + value.Field + '" type="checkbox" ' + isChecked + ' value="' + value.Value + '" />' +
'<span class="label-ui">' + value.Text + '</span>' +
'</label>';

newFiltersContainerHtml.append(valueItemHtml);
}

W miejsce usuniętego kodu należy wkleić następujący:
for (var i in newFilterValues) {
var value = newFilterValues[i];
var count = value.Count;
var isChecked = (value.Selected) ? 'checked' : '';
var isDisabled = (count == 0) ? 'disabled' : '';

if(value.Field == 'REWARD'){
value.Text = __translations.pointsProduct;
}

var valueItemHtml = '<label class="checkbox-ui">' +
'<input name="' + value.Field + '" type="checkbox" ' + isChecked + isDisabled + ' value="' + value.Value + '" />' +
'<span class="label-ui">' + value.Text + ' (' + count + ')</span>' +
'</label>';

newFiltersContainerHtml.append(valueItemHtml);
}

Topaz

Otwórz plik elements/products-list/products-1.html ( lub elements/products-list/products-2.html  w zależności od wybranego modułu). Następnie za pomocą narzędzia wyszukiwania znajdź frazę <li class=”filter-group-wrapper”> i usuń następujący kod:

<li class="filter-group-wrapper">
   <ul class="filter-group">
       <li class="filter-group__title product-list__title">{{ filter.Heading }}</li>
       {% for value in visibleValues -%}
       <li class="filter checkBoxes__container">
           <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/>
           <label for="flt_{{value.Field}}_{{forloop.index}}">
                           <span class="checkBoxes__checkIcon">
                               <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
                           </span>
               <span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span>
           </label>
       </li>
       {% endfor -%}
   </ul>
   {% if valuesSize > 4 -%}
   <ul class="filter-group filter-group--redundant">
       {% for value in redundantValues -%}
       <li class="filter checkBoxes__container">
           <input  type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {%if value.Selected%}checked{%endif%} value="{{ value.Value }}"/>
           <label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}">
                           <span class="checkBoxes__checkIcon">
                               <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
                           </span>
               <span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span>
           </label>
       </li>
        {% endfor -%}
    </ul>
    <span class="filter-toggle filter-more">{{ translations.Com_More }}</span>
    <span class="filter-toggle filter-less">{{ translations.Com_Less }}</span>
    {% endif -%}
</li>

W to miejsce wklej następujący kod:

<li class="filter-group-wrapper">
   <ul class="filter-group">
       <li class="filter-group__title product-list__title">{{ filter.Heading }}</li>
       {% for value in visibleValues -%}
       <li class="filter checkBoxes__container">
           <input type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/>
           <label for="flt_{{value.Field}}_{{forloop.index}}">
                           <span class="checkBoxes__checkIcon">
                               <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
                           </span>
               <span class="filter-label">{{ value.Text }} ({{ value.Count }})</span>
           </label>
       </li>
       {% endfor -%}
   </ul>
   {% if valuesSize > 4 -%}
   <ul class="filter-group filter-group--redundant">
       {% for value in redundantValues -%}
       <li class="filter checkBoxes__container">
           <input  type="checkbox" class="filter-input custom-checkbox" id="flt_{{value.Field}}_{{forloop.index | Plus: 4}}" name="{{ value.Field }}" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 -%} disabled {% endif -%} value="{{ value.Value }}"/>
           <label for="flt_{{value.Field}}_{{forloop.index | Plus: 4}}">
                           <span class="checkBoxes__checkIcon">
                               <svg><use xlink:href="css/img/icons-sprite.svg#check-regular"></use></svg>
                           </span>
               <span class="filter-label">{{ value.Text }} ({{ value.Count }})</span>
           </label>
       </li>
       {% endfor -%}
   </ul>
   <span class="filter-toggle filter-more">{{ translations.Com_More }}</span>
   <span class="filter-toggle filter-less">{{ translations.Com_Less }}</span>
   {% endif -%}
</li>
Następnie otwórz plik scss/elements/products-list/products-1-g.scss ( lub scss/elements/products-list/products-2-g.scss w zależności od wybranego modułu ). Za pomocą narzędzia wyszukiwania znajdź frazę  .filter {, a poniżej wklej następujący kod:

input[disabled]+label {
opacity: 0.5;
cursor: not-allowed;
}

Czy ten artykuł był pomocny?