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>

<li {% if long > 40 -%} class="long" {% endif -%}>

<span class="switch-name">{{ value.Text }}</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>

<li {% if long > 36 -%} class="long" {% endif -%}>

<span class="switch-name">{{ value.Text }} ({{value.Count}})</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;
}

[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>

</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>

</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;
  }
}

.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>

</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>

</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;
  }
}

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

{% if value.Field != colorFilterName -%}

{% if value.Field == "REWARD" -%}

{% else -%}

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

{% if value.Field != colorFilterName -%}

{% if value.Field == "REWARD" -%}

{% else -%}

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

&: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);
}

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);
}

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>

<li class="filter-group__title product-list__title">{{ filter.Heading }}</li>

{% for value in visibleValues -%}

</span>

<span class="filter-label">{{ value.Text }} ({{ value.TotalCount }})</span>

</label>

</li>

{% endfor -%}

</ul>

{% if valuesSize > 4 -%}

{% for value in redundantValues -%}

</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>

<li class="filter-group__title product-list__title">{{ filter.Heading }}</li>

{% for value in visibleValues -%}

</span>

<span class="filter-label">{{ value.Text }} ({{ value.Count }})</span>

</label>

</li>

{% endfor -%}

</ul>

{% if valuesSize > 4 -%}

{% for value in redundantValues -%}

</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;
}

input[disabled]+label {

opacity: 0.5;

cursor: not-allowed;

}

Zawężanie filtrów