Filters depending on measurements chosen by the customer

Custom Data
1 
{% schema %}
{
  "name": "Filtro de Pneus",
  "settings": [],
  "blocks": [],
  "presets": [
    {
      "name": "Filtro de Pneus",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="custom-filter-form">
  <form method="GET" action="/search.filter" class="filter-form">
    <!-- Largura -->
    <div class="filter-group">
      <label for="largura">Largura</label>
      <select name="largura" id="largura">
      <option value="">Todas</option>
        <option value="2.25">2.25</option>
        <option value="2.50">2.50</option>
        <option value="2.75">2.75</option>
        <option value="3.00">3.00</option>
        <option value="3.25">3.25</option>
        <option value="3.50">3.50</option>
        <option value="3.60">3.60</option>
        <option value="4.00">4.00</option>
        <option value="4.10">4.10</option>
        <option value="4.25">4.25</option>
        <option value="4.60">4.60</option>
        <option value="5.10">5.10</option>
        <option value="12">12</option>
        <option value="19">19</option>
        <option value="60">60</option>
        <option value="70">70</option>
        <option value="80">80</option>
        <option value="90">90</option>
        <option value="100">100</option>
        <option value="110">110</option>
        <option value="120">120</option>
        <option value="125">125</option>
        <option value="130">130</option>
        <option value="140">140</option>
        <option value="160">160</option>
        <option value="165">165</option>
        <option value="170">170</option>
        <option value="180">180</option>
        <option value="190">190</option>
        <option value="195">195</option>
        <option value="200">200</option>
        <option value="210">210</option>
        <option value="215">215</option>
        <option value="240">240</option>
        <option value="250">250</option>
        <option value="260">260</option>
        <option value="280">280</option>
        <option value="300">300</option>
      </select>
    </div>

    <!-- Altura -->
    <div class="filter-group">
      <label for="altura">Altura</label>
      <select name="altura" id="altura">
      <option value="">Todas</option>
        <option value="35">35</option>
        <option value="40">40</option>
        <option value="45">45</option>
        <option value="50">50</option>
        <option value="55">55</option>
        <option value="60">60</option>
        <option value="65">65</option>
        <option value="69">69</option>
        <option value="70">70</option>
        <option value="75">75</option>
        <option value="80">80</option>
        <option value="85">85</option>
        <option value="90">90</option>
        <option value="100">100</option>
        <option value="600">600</option>
        <option value="605">605</option>
        <option value="655">655</option>
        <option value="660">660</option>
      </select>
    </div>

    <!-- Diâmetro -->
    <div class="filter-group">
      <label for="diametro">Diâmetro</label>
      <select name="diametro" id="diametro">
        <option value="">Todas</option>
        <option value="8">8</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="16.5">16.5</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="21">21</option>
        <option value="23">23</option>
        <option value="420">420</option>
      </select>
    </div>

    <!-- Velocidade -->
    <div class="filter-group">
      <label for="velocidade">Velocidade</label>
      <select name="velocidade" id="velocidade">
        <option value="">Todas</option>
        <option value="Q">Q < 160 km/h</option>
        <option value="R">R < 170 km/h</option>
        <option value="S">S < 180 km/h</option>
        <option value="T">T < 190 km/h</option>
        <option value="H">H < 210 km/h</option>
        <option value="V">V < 240 km/h</option>
      </select>
    </div>

    <!-- Marca -->
    <div class="filter-group">
      <label for="marca">Marca</label>
      <select name="marca" id="marca">
        <option value="">Todas</option>
        <option value="michelin">Michelin</option>
        <option value="pirelli">Pirelli</option>
        <option value="goodyear">Goodyear</option>
        <option value="bridgestone">Bridgestone</option>
        <option value="dunlop">Dunlop</option>
        <option value="firestone">Firestone</option>
        <option value="metzeler">Metzeler</option>
        <option value="mitas">Mitas</option>
      </select>
    </div>

    <!-- Preço Máximo -->
    <div class="filter-group">
      <label for="preco-max">Orçamento máx. (por artigo)</label>
      <input type="number" name="price" id="price" placeholder="0">
    </div>

    <!-- Botão de Pesquisa -->
    <div class="filter-group button-group">
      <button type="submit" class="filter-btn">PESQUISAR</button>
    </div>
  </form>
</div>


{% assign largura = request.query_params.largura %}
{% assign altura = request.query_params.altura %}
{% assign diametro = request.query_params.diametro %}
{% assign velocidade = request.query_params.velocidade %}
{% assign marca = request.query_params.marca %}
{% assign preco_max = request.query_params.price | default: 999999 %}

<div class="product-list">
  {% for product in collections.all.products %}
    {% assign show_product = true %}
    
    <!-- Filtro de Largura -->
    {% if largura != "" %}
      {% unless product.metafields.custom.largura == largura %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}
    
    <!-- Filtro de Altura -->
    {% if altura != "" %}
      {% unless product.metafields.custom.altura == altura %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}

    <!-- Filtro de Diâmetro -->
    {% if diametro != "" %}
      {% unless product.metafields.custom.diametro == diametro %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}

    <!-- Filtro de Velocidade -->
    {% if velocidade != "" %}
      {% unless product.metafields.custom.velocidade == velocidade %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}

    <!-- Filtro de Marca -->
    {% if marca != "" %}
      {% unless product.vendor | downcase == marca %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}

    <!-- Filtro de Preço Máximo -->
    {% if preco_max != "" %}
      {% unless product.price <= preco_max %}
        {% assign show_product = false %}
      {% endunless %}
    {% endif %}

    <!-- Exibir Produto se todos os filtros forem correspondidos -->
    {% if show_product %}
      <div class="product">
        <h2>{{ product.title }}</h2>
        <p>{{ product.description }}</p>
        <p>Preço: {{ product.price | money }}</p>
      </div>
    {% endif %}
  {% endfor %}
</div>

I have this section on my website, and the search.filter in the templates. the metafields I have are “width” “height” “diameter” “speed” “mark” . I have a product with all metafields filled in. but the product still doesn’t appear when I do “search” I deeply appreciate any help!

2

Can you share a screenshot of any of that custom metafields definitions?

3

image
image601×300 9.52 KB