Filtro avanzado - Bsale-IO/template-docs GitHub Wiki
- Es necesario que el template tenga cargado bsale 4.3.0, para saber la versión de bsale debes revisar la consola de tu navegador.
| data-bs | data-info | significado |
|---|---|---|
| collection.filter | auto | si data-info es auto cada vez que un usuario seleccione un atributo para filtrar se refrescará la página, si data no tiene valor, se necesario presionar el botón filtrar |
Escribe el nombre del atributo a borrar en la lista deleteAttributes
{% assign deleteAttributes = "Atributo_borrado1,Atributo_borrado2" | split: ',' %}{% assign deleteAttributes = "Color" | split: ',' %}{% assign deleteAttributes = "Color,Talla" | split: ',' %}{% assign deleteAttributes = "Brands,Talla" | split: ',' %}{% assign deleteAttributes = "Atributo_borrado1,Atributo_borrado2" | split: ',' %}
<div class="col-lg-3">
<aside class="bs-collection-filter">
<form data-bs="collection.filter" data-info="auto" >
<div class="row mb-3">
<h3 class="col-12 d-none d-lg-block">
Filtros
</h3>
<div class="col-12 d-flex d-lg-block align-items-center justify-content-between">
<a class="btn btn-secondary order-lg-2"
href="{{ paginate.link }}">
<i class="fas fa-undo-alt"></i><span class="d-none d-sm-inline">Limpiar</span>
</a>
<button class="d-lg-none btn btn-link"
aria-controls="filter-toggle"
data-target="#filter-toggle"
data-toggle="collapse"
type="button" title="Filtros">
<span class="bs-filter-title h3">
Filtros
<i class="fas fa-caret-down"></i>
</span>
</button>
<button class="btn btn-primary" type="submit">
<i class="d-none d-lg-inline fas fa-filter"></i>
Filtrar
</button>
</div>
</div>
<div class="collapse d-lg-block" id="filter-toggle" >
{% if collection.limitPrice.minPrice != collection.limitPrice.maxPrice %}
<button
class="btn btn-light d-flex justify-content-between align-items-center bs-filter-btn w-100 mb-1"
type="button"
data-toggle="collapse"
data-target="#bs-collection-filter-price"
aria-expanded="false"
aria-controls="bs-collection-filter-price">
Precio
<i class="fas fa-angle-down"></i>
</button>
<div id="bs-collection-filter-price" class="panel-collapse collapse my-1">
<ul class="list-group">
<li class="list-group-item border-0">
<div
data-bs="filter.range"
data-min="{{ collection.limitPrice.minPrice }}"
data-max="{{ collection.limitPrice.maxPrice }}"
>
</div>
</li>
</ul>
</div>
{% endif%}
{% for attr in collection.attributes %}
{%assign flagAttr = false %}
{% for del in deleteAttributes %}
{% if attr[1].name == del %}
{%assign flagAttr = true %}
{{break}}
{% endif %}
{% endfor %}
<!-- elimina marca si esta en la url /brand/ -->
{% if attr[0] == "Brands" and current_url contains "/brand/" %}
{% assign flagAttr == true %}
{% endif %}
<!---------------------------->
{% if flagAttr == false %}
{% if attr[1].values.size > 0 %}
<button
class="btn btn-light d-flex justify-content-between align-items-center bs-filter-btn w-100 mb-1"
type="button"
data-toggle="collapse"
data-target="#{{ attr[1].code }}"
aria-expanded="false"
aria-controls="{{ attr[1].code }}">
{{ attr[1].name }}<i class="fas fa-angle-down"></i>
</button>
<ul id="{{ attr[1].code }}" class="panel-collapse collapse list-group my-1">
{% for item in attr[1].values %}
{% if item.size > 0 %}
<li class="list-group-item border-0">
<div class="custom-control custom-checkbox">
<input
id="{{ attr[1].code | url_encode}}-{{ forloop.index }}"
class="custom-control-input"
type="checkbox"
value="{{ item | url_encode }}"
data-bs="collection.filter.attr"
data-filter="{{ attr[1].code | url_encode }}[]"
disabled
>
<label class="custom-control-label" for="{{ attr[1].code | url_encode }}-{{ forloop.index }}">
{{ item }}
</label>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endif %}
{%assign flagAttr = false %}
{%endfor%}
</div>
</form>
</aside>
</div>