Obsługa zawężania kategorii w wynikach wyszukiwania w szablonie Szafir

W tym artykule dowiesz się jak dodać możliwość zawężania kategorii przy prezentacji wyników wyszukiwania w szablonie Szafir.

W pierwszej kolejności otwórz plik common/categories-navigation/sliding-navigation-partial.html. Wyszukaj frazę sliding-categories-ui. Pod znalezioną linią wklej poniższy kod.
{% if page.PageId == config.DefinedPages.ProductList.Id and products.Search != null -%}
{% for group in products.FilteringOptions.Groups -%}
<div class="filtered-category-group-ui">
{% if group.Parent != null and group.Parent.Id != config.DefinedPages.ProductList.Id -%}
<a class="parent-ui" href="{{group.Parent.Url}}">{{group.Parent.Name}}</a>
{% endif -%}
{% assign groupCount = 0 -%}
{% for node in group.Nodes -%}
{% assign groupCount = groupCount | Plus: node.Count -%}
{% endfor -%}
<a class="group-ui" href="{{group.Group.Url}}">{{group.Group.Name}} <span class="count-ui">{{groupCount}}</span></a>
<ul>
{% for node in group.Nodes -%}
<li><a class="node-ui" href="{{node.Group.Url}}">{{node.Group.Name}} <span
class="count-ui">{{node.Count}}</span></a></li>
{% endfor -%}
</ul>
</div>
{% endfor -%}
{% else -%}

Przejdź na koniec dokumentu. Powinieneś zauważyć tam dwa tagi zamykające <div>.
</div>
</div>

Nad nimi umieść poniższą linię.
{% endif -%}

Następnie otwórz plik css/desktop2.css i w dowolnym miejscu (np. na końcu pliku) wklej poniższy kod.
.filtered-category-group-ui {
margin: 20px; }
.filtered-category-group-ui a {
display: block;
position: relative; }
.filtered-category-group-ui .parent-ui {
color: #696666; }
.filtered-category-group-ui .node-ui {
padding-left: 20px; }
.filtered-category-group-ui .count-ui {
position: absolute;
right: 0; }