Zawężanie filtrów
W tym artykule dowiesz się jak dodać możliwość zawężanie filtrów w swoim szablonie.
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ą: Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class=”switch”> a następnie usuń następujący kod : Otwórz plik categories.html. Za pomocą narzędzia wyszukiwania znajdź frazę <div class=”switch”> a następnie usuń następujący kod : 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ą: 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: if(value.Field == 'REWARD'){ var valueItemHtml = '<label class="checkbox-ui">' + newFiltersContainerHtml.append(valueItemHtml); if(value.Field == 'REWARD'){ var valueItemHtml = '<label class="checkbox-ui">' + newFiltersContainerHtml.append(valueItemHtml); 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: W to miejsce wklej następujący kod:Agat
<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
<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
<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
<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;
}
}for (var i in newFilterValues) {
var value = newFilterValues[i];
var isChecked = (value.Selected) ? 'checked' : '';
value.Text = __translations.pointsProduct;
}
'<input name="' + value.Field + '" type="checkbox" ' + isChecked + ' value="' + value.Value + '" />' +
'<span class="label-ui">' + value.Text + '</span>' +
'</label>';
}
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' : '';
value.Text = __translations.pointsProduct;
}
'<input name="' + value.Field + '" type="checkbox" ' + isChecked + isDisabled + ' value="' + value.Value + '" />' +
'<span class="label-ui">' + value.Text + ' (' + count + ')</span>' +
'</label>';
}Topaz
<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><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>input[disabled]+label {
opacity: 0.5;
cursor: not-allowed;
}