61. Store side filters Frontend
We will now adjust the frontend of the store page, focusing on the side filters. To begin, a “menu” section will be added to the store.htmlfile.
The filters will include options for size, price, and type, as the category filtering will be handled via the navbar.
The updated store.html code is provided below:
{% extends 'base.html' %}
{% load static %}
{% block body %}
<main class="principal principal--padding-b">
<title>Store | Reserva</title>
<section class="loja">
<form class="menu" method="POST" action="">
{% csrf_token %}
<div class="menu__cabecalho">
<div class="menu__titulos">
<div>
<img
style="width:40px;"
class="menu__icone"
src="{% static 'images/filter-big-1-svgrepo-com.svg' %}"
alt="Ícone filtrar"
/>
</div>
<p class="menu__titulo">Filtrar</p>
</div>
<p class="menu__fechar-filtro">X</p>
</div>
<div class="menu__preco">
<p class="menu__subtitulo">Faixa de Preço</p>
<div class="range_container">
<div class="sliders_control">
<input
id="fromSlider"
type="range"
value=0
min=0
max={{ max_price }}
step=0.01
/>
<input
id="toSlider"
type="range"
value={{ max_price }}
min=0
max={{ max_price }}
step=0.01
/>
</div>
<div class="menu__controles">
<div class="form_control">
<div class="form_control_container">
<input
class="form_control_container__time__input"
type="number"
name="min_price"
id="fromInput"
value=0
min=0
max={{ max_price }}
step=0.01
/>
</div>
<p>até</p>
<div class="form_control_container">
<input
class="form_control_container__time__input"
type="number"
id="toInput"
name="max_price"
value={{ max_price }}
min=0
max={{ max_price }}
step=0.01
/>
</div>
</div>
<button type="submit" class="menu__botao">Filtrar</button>
</div>
</div>
</div>
<div class="menu__expansivel">
<div
class="menu__expansivel-cabecalho menu__expansivel-cabecalho--aberto"
>
<p class="menu__subtitulo">Tamanho</p>
</div>
<div class="menu__expansivel-conteudo">
<div class="menu__tamanhos">
{% if sizes %}
{% for size in sizes %}
<div class="menu__tamanho">
<div class="menu__tamanho-quadrado">{{ size }}</div>
<input
class="menu__checkbox"
type="radio"
name="size"
value="{{ size }}"
/>
</div>
{% endfor %}
{% else %}
<p>No sizes available</p>
{% endif %}
</div>
</div>
</div>
<div class="menu__expansivel">
<div
class="menu__expansivel-cabecalho menu__expansivel-cabecalho--aberto"
>
<p class="menu__subtitulo">Tipo</p>
</div>
<div class="menu__expansivel-conteudo">
<div class="menu__categorias">
{% for type in types %}
<div class="menu__categoria">
<div class="menu__categoria-quadrado"></div>
<div class="menu__categoria-texto">{{ type.slug }}</div>
<input
class="menu__checkbox"
type="radio"
name="type"
value="{{ type.slug }}"
/>
</div>
{% endfor %}
</div>
</div>
</div>
</form>
<div class="produtos">
<div class="produtos__cabecalho">
<button class="produtos__cabecalho-filtrar">Filtrar</button>
<div class="produtos__cabecalho-ordenarpor">
<div class="produtos__cabecalho-imgicone">
<img
class="produtos__cabecalho-icone"
src="{% static 'images/sort-vertical-svgrepo-com.svg' %}"
alt=""
/>
</div>
<p class="produtos__subtitulo">Ordenar por:</p>
<select class="produtos__select" onchange="redirectToPage()">
{% if order == "highest-price" %}
<option value="" selected>Maior preço</option> <!-- Necessary to start by default -->
{% elif order == "lowest-price" %}
<option value="" selected>Menor preço</option> <!-- Necessary to start by default -->
{% elif order == "most-sold" %}
<option value="" selected>Mais Vendidos</option> <!-- Necessary to start by default -->
{% else %}
<option value="" selected>Selecone uma opção</option> <!-- Necessary to start by default -->
{% endif %}
<option class="item-order" value="highest-price">Maior preço</option> <!--Used in the main.js javascript, it returns the value used in the js-->
<option class="item-order" value="lowest-price">Menor preço</option>
<option class="item-order" value="most-sold">Mais Vendidos</option>
</select>
</div>
</div>
<div class="produtos__grade">
{% for product in products %}
<a
href="{% url 'view_product' product.id %}"
class="produto"
>
<div class="produto__imagem">
<img
src="{{ product.image.url }}"
alt="Imagem do Produto"
/>
</div>
<div class="produto__textos">
<p class="produto__titulo">{{ product.name }}</p>
<div class="produto__preco">
<p class="produto__avista">R$ {{ product.price }}</p>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
</main>
{% endblock %}
Important Note: To address a bug in the type filter, move the following line from base.html to directly above the in view_product.html. This ensures the filter works as expected within the product view context.
<script type="text/javascript" src="{% static 'js/produto.js' %}"></script>In the next session, we will update the product display view. For now, the filter section appears as follows:
Last updated