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.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{% 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 -%} |
|
0 1 2 3 |
</div> </div> |
|
0 1 2 |
{% endif -%} |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } |