Filters

Filtro de preço com inputs de texto

Preview

HTML

{% set maiorPreco = _filter('max', 'prices.sale_price') %}
{% set menorPreco = _filter('min', 'prices.sale_price') %}

{% if menorPreco < maiorPreco %}
  <div class="price-inputs__filter">

      <input type="checkbox" id="price-inputs--input" hidden checked/>
      <label class="price-inputs__filter--trigger" for="price-inputs--input">
        <small>Price</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <div class="price-inputs__filter--inputs">
        <div class="input__container">
          <label class="input__label">From</label>
          <input class="input__box" type="text" name="input-text" id="input-from" placeholder="R${{ "%.2f"|format(menorPreco)|replace({'.': ','}) }}" />
        </div>

        <div class="input__container">
          <label class="input__label">To</label>
          <input class="input__box" type="text" name="input-text" id="input-to" placeholder="R${{ "%.2f"|format(maiorPreco)|replace({'.': ','}) }}" />
        </div>

        <button class="button" type="button">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="white"/>
          </svg>
        </button>
      </div>
  </div>

  <script>
      var inputFrom = document.getElementById('input-from');
      var inputTo = document.getElementById('input-to');
      var button = document.querySelector('.price-inputs__filter--inputs .button');

      var minDollars = {{ menorPreco }};
      var maxDollars = {{ maiorPreco }};

      window.__lastMinValue = minDollars;
      window.__lastMaxValue = maxDollars;

      function parsePrice(value) {
          value = value.replace(/[^\d,.-]/g, '');
          value = value.replace(',', '.');
          return parseFloat(value);
      }

      function updateValues() {
        var minValue = inputFrom.value !== '' ? parsePrice(inputFrom.value) : minDollars;
        var maxValue = inputTo.value !== '' ? parsePrice(inputTo.value) : maxDollars;

        if (!isNaN(minValue) && !isNaN(maxValue)) {
          
            window.__lastMinValue = minValue;
            window.__lastMaxValue = maxValue;
            
            _refresh({{ elementosParaAtualizar | json_encode | raw }}, {
                  range: {
                      'prices.sale_price' : {
                          gte: window.__lastMinValue,
                          lte: window.__lastMaxValue,
                      }
                  }
              });
        }
      }

      button.addEventListener('click', function () {
        updateValues();
      });
  </script>
{% endif %}

CSS

.price-inputs__filter {
  width: 100%;
  height: auto;
}

.price-inputs__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.price-inputs__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.price-inputs__filter--trigger svg {
  transition: all 0.5s;
}

.price-inputs__filter input:checked~.price-inputs__filter--trigger svg {
  transform: rotate(180deg);
}

.price-inputs__filter--inputs{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.price-inputs__filter input:checked~.price-inputs__filter--inputs {
  max-height: 200px;
}

/* Inputs Css */

.price-inputs__filter--inputs .input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 151px;
  height: auto;
}

.price-inputs__filter--inputs .input__container .input__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
}

.price-inputs__filter--inputs .input__container .input__box {
  width: 100%;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.price-inputs__filter--inputs .input__container .input__box::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.price-inputs__filter--inputs .input__container .input__box:hover {
  border-color: #A7A7A7;
}

.price-inputs__filter--inputs .input__container .input__box:focus {
  border: 1.5px solid #01141E;
}

.price-inputs__filter--inputs .input__container .input__box:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

/* Button Css */

.price-inputs__filter--inputs .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141E;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
  position: relative;
}

.price-inputs__filter--inputs .button:hover {
  background-color: #48545d;
}

.price-inputs__filter--inputs .button:active {
  background-color: #01141E;
}

Filtro de preço com faixas de valor

Preview

HTML

{% set maiorPreco = _filter('max', 'prices.sale_price') %}
{% set menorPreco = _filter('min', 'prices.sale_price') %}

{% set numFaixas = 5 %}
{% set faixaSize = (maiorPreco - menorPreco) / numFaixas %}

{% if menorPreco < maiorPreco %}
  <div class="price-radio__filter">

      <input type="checkbox" id="price-radio--input" hidden checked/>
      <label class="price-radio__filter--trigger" for="price-radio--input">
        <small>Price</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <ul class="price-radio__filter--list">
        {% for i in 0..numFaixas-1 %}
          {% set faixaMin = menorPreco + i * faixaSize %}
          {% set faixaMax = menorPreco + (i+1) * faixaSize %}
          <li class="price-radio__filter--item">
            <label for="price-range{{ i }}">
              <small>{{ 'R$%.2f - R$%.2f'|format(faixaMin, faixaMax)|replace({'.': ','}) }}</small>
              <input type="radio" id="price-range{{ i }}" name="price-range" value="{{ i }}" data-faixa-min="{{ faixaMin }}" data-faixa-max="{{ faixaMax }}"/>
              <div class="price-radio__filter__checker"></div>
            </label>
          </li>
         {% endfor %}
      </ul>
  </div>

  <script>
      function updateValues(faixaMin, faixaMax) {
        var minDollars = faixaMin;
        var maxDollars = faixaMax;

        window.__lastMinValue = minDollars;
        window.__lastMaxValue = maxDollars;

        _refresh({{ elementosParaAtualizar | json_encode | raw }}, {
            range: {
                'prices.sale_price' : {
                    gte: window.__lastMinValue,
                    lte: window.__lastMaxValue,
                }
            }
        });
      }

      var inputs = document.getElementsByName('price-range');
      inputs.forEach(function(input) {
          input.addEventListener('change', function() {
              var faixaMin = parseFloat(this.getAttribute('data-faixa-min'));
              var faixaMax = parseFloat(this.getAttribute('data-faixa-max'));
              updateValues(faixaMin, faixaMax);
          });
      });

      var queryString = window.location.search;
      var urlParams = new URLSearchParams(queryString);
      var rangeValue = urlParams.get('range');

      if (rangeValue !== null) {
          var rangeParts = rangeValue.split(',');

          if (rangeParts.length === 2){
            var minRange = parseInt(rangeParts[0].split(':')[2]);
            var maxRange = parseInt(rangeParts[1].split(':')[2]);
          } else {
            var minRange = 0;
            var maxRange = parseInt(rangeParts[0].split(':')[2]);
          }

          var inputs = document.getElementsByName('price-range');
          for (var i = 0; i < inputs.length; i++) {
              var input = inputs[i];
              var faixaMin = parseFloat(input.getAttribute('data-faixa-min'));
              var faixaMax = parseFloat(input.getAttribute('data-faixa-max'));

              var faixaMinInt = parseInt(faixaMin);
              var faixaMaxInt = parseInt(faixaMax);

              if (minRange === faixaMinInt && maxRange === faixaMaxInt) {
                  input.checked = true;
                  break;
              }
          }
      }
  </script>
{% endif %}

CSS

.price-radio__filter {
  width: 100%;
  height: auto;
}

.price-radio__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.price-radio__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.price-radio__filter--trigger svg {
  transition: all 0.5s;
}

.price-radio__filter input:checked~.price-radio__filter--trigger svg {
  transform: rotate(180deg);
}

.price-radio__filter--list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.price-radio__filter input:checked~.price-radio__filter--list {
  max-height: 999px;
}

.price-radio__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.price-radio__filter--item label * {
  pointer-events: none;
}

.price-radio__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.price-radio__filter--item label:hover small {
  color: #757575;
}

.price-radio__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.price-radio__filter--item input:checked+.price-radio__filter__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.price-radio__filter--item input:checked+.price-radio__filter__checker:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translate(-50%, -50%);
  height: 17px;
  width: 17px;
  border-radius: 50%;
  border: solid 2px #FFFFFF;
  transition: all 150ms linear;
}

.price-radio__filter--item input+.price-radio__filter__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
  overflow: hidden;
  border-radius: 50%;
  height: 20px;
  min-width: 20px;
}

.price-radio__filter__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border: 1.5px solid #A7A7A7;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.price-radio__filter--item label:hover .price-radio__filter__checker:before {
  border: 1.5px solid #757575;
}

Filtro de categorias com busca e marcadores 'radio'

Preview

HTML

{% set categorias = category.subcategories %}
{% set categoriasSelecionadas = _filter('selected', 'categories.id') %}

{% if categorias | length > 0 %}
  <div class="categories__filter">

    <input type="checkbox" id="categories--input" hidden checked/>
    <label class="categories__filter--trigger" for="categories--input">
      <small>Category</small>
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
      </svg>
    </label>

    <ul class="categories__filter--list">

      <div class="input__container">
        <div class="input__box">
            <input type="text" name="input-text" id="input-text" placeholder="Find the category" />
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
            </svg>
        </div>
      </div>

      {% for filtro in categorias %}
        <li class="categories__filter--item">
          <label
              onclick="selectFilter(event, { match: { 'categories.id': '{{ filtro.id }}' } })"
              for="{{ filtro.name }}"
              data-filter="categories.id:{{ filtro.id }}"
          >
            <small>{{ filtro.name | raw }}</small>
            <input type="checkbox" {{ filtro.id in categoriasSelecionadas ? 'checked' : '' }} id="{{ filtro.name }}">
            <div class="categories__filter__checker"></div>
          </label>
        </li>
      {% endfor %}
      
    </ul>

  </div>
{% endif %}

<script>
    var input = document.getElementById("input-text");
    var items = document.querySelectorAll(".categories__filter--item");

    input.addEventListener("input", function() {
        var searchText = input.value.toLowerCase();

        items.forEach(function(item) {
            var title = item.querySelector("label small");
            var itemName = title.textContent.toLowerCase();

            if (itemName.includes(searchText)) {
                item.style.display = "block";
            } else {
                item.style.display = "none";
            }
        });
    });
</script>

CSS

.categories__filter{
  width: 100%;
  height: auto;
}

.categories__filter--trigger{
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.categories__filter--trigger small{
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.categories__filter--trigger svg{
  transition: all 0.5s;
}

.categories__filter input:checked ~ .categories__filter--trigger svg{
  transform: rotate(180deg);
}

.categories__filter--list::-webkit-scrollbar {
  width: 4px;
}

.categories__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.categories__filter--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #A7A7A7;
}

.categories__filter--list{
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.categories__filter input:checked ~ .categories__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.categories__filter--item label{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.categories__filter--item label * {
  pointer-events: none;
}

.categories__filter--item label small {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: #434343;
}

.categories__filter--item label:hover small{
  color: #757575;
}

.categories__filter--item input{
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.categories__filter--item input:checked + .categories__filter__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.categories__filter--item input:checked+.categories__filter__checker:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translate(-50%, -50%);
  height: 17px;
  width: 17px;
  border-radius: 50%;
  border: solid 2px #FFFFFF;
  transition: all 150ms linear;
}

.categories__filter--item input+.categories__filter__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
  overflow: hidden;
  border-radius: 50%;
  height: 20px;
  min-width: 20px;
}

.categories__filter__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border: 1.5px solid #A7A7A7;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.categories__filter--item label:hover .categories__filter__checker:before{
  border: 1.5px solid #757575;
}

/*   Input Text  */

.categories__filter--list .input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
}

.categories__filter--list .input__container .input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.categories__filter--list .input__container .input__box svg {
  position: absolute;
  left: 12px;
  top: 14px;
  z-index: 2;
}

.categories__filter--list .input__container .input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 36px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.categories__filter--list .input__container .input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.categories__filter--list .input__container .input__box:hover input {
  border-color: #A7A7A7;
}

.categories__filter--list .input__container .input__box input:focus {
  border: 1.5px solid #01141E;
}

.categories__filter--list .input__container .input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

Filtro de categorias com busca e marcadores 'checkbox'

Preview

HTML

{% set categorias = category.subcategories %}
{% set categoriasSelecionadas = _filter('selected', 'categories.id') %}

{% if categorias | length > 0 %}
  <div class="categories__filter">

    <input type="checkbox" id="categories--input" hidden checked/>
    <label class="categories__filter--trigger" for="categories--input">
      <small>Category</small>
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
      </svg>
    </label>

    <ul class="categories__filter--list">

      <div class="input__container">
        <div class="input__box">
            <input type="text" name="input-text" id="input-text" placeholder="Find the category" />
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0207 11.078L14.876 13.9327L13.9327 14.876L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33334 13.3334C4.02134 13.3334 1.33334 10.6454 1.33334 7.33337C1.33334 4.02137 4.02134 1.33337 7.33334 1.33337C10.6453 1.33337 13.3333 4.02137 13.3333 7.33337C13.3353 8.69471 12.8722 10.0159 12.0207 11.078ZM10.6833 10.5834C11.5294 9.7133 12.0019 8.54699 12 7.33337C12 4.75471 9.91134 2.66671 7.33334 2.66671C4.75467 2.66671 2.66667 4.75471 2.66667 7.33337C2.66667 9.91137 4.75467 12 7.33334 12C8.54696 12.002 9.71326 11.5294 10.5833 10.6834L10.6833 10.5834Z" fill="black"/>
            </svg>
        </div>
      </div>

      {% for filtro in categorias %}
        <li class="categories__filter--item">
          <label
              onclick="selectFilter(event, { match: { 'categories.id': '{{ filtro.id }}' } })"
              for="{{ filtro.name }}"
              data-filter="categories.id:{{ filtro.id }}"
          >
            <small>{{ filtro.name | raw }}</small>
            <input type="checkbox" {{ filtro.id in categoriasSelecionadas ? 'checked' : '' }} id="{{ filtro.name }}">
            <div class="categories__filter__checker"></div>
          </label>
        </li>
      {% endfor %}
      
    </ul>

  </div>
{% endif %}

<script>
    var input = document.getElementById("input-text");
    var items = document.querySelectorAll(".categories__filter--item");

    input.addEventListener("input", function() {
        var searchText = input.value.toLowerCase();

        items.forEach(function(item) {
            var title = item.querySelector("label small");
            var itemName = title.textContent.toLowerCase();

            if (itemName.includes(searchText)) {
                item.style.display = "block";
            } else {
                item.style.display = "none";
            }
        });
    });
</script>

CSS

.categories__filter {
  width: 100%;
  height: auto;
}

.categories__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.categories__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.categories__filter--trigger svg {
  transition: all 0.5s;
}

.categories__filter input:checked~.categories__filter--trigger svg {
  transform: rotate(180deg);
}

.categories__filter--list::-webkit-scrollbar {
  width: 4px;
}

.categories__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.categories__filter--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #A7A7A7;
}

.categories__filter--list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.categories__filter input:checked~.categories__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.categories__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.categories__filter--item label * {
  pointer-events: none;
}

.categories__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.categories__filter--item label:hover small {
  color: #757575;
}

.categories__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.categories__filter--item input:checked+.categories__filter__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.categories__filter--item input:checked+.categories__filter__checker:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 7px;
  width: 7px;
  height: 14px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: all 150ms linear;
}

.categories__filter--item input+.categories__filter__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.categories__filter__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 2px;
  border: 1.5px solid #A7A7A7;
  padding: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: all 150ms linear;
}

.categories__filter--item label:hover .categories__filter__checker:before {
  border: 1.5px solid #757575;
}

/*   Input Text  */

.categories__filter--list .input__container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: auto;
  margin-bottom: 4px;
}

.categories__filter--list .input__container .input__box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 44px;
  border-radius: 4px;
}

.categories__filter--list .input__container .input__box svg {
  position: absolute;
  left: 12px;
  top: 14px;
  z-index: 2;
}

.categories__filter--list .input__container .input__box input {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 8px 12px 8px 36px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #434343;
  outline: none;
}

.categories__filter--list .input__container .input__box input::placeholder {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
}

.categories__filter--list .input__container .input__box:hover input {
  border-color: #A7A7A7;
}

.categories__filter--list .input__container .input__box input:focus {
  border: 1.5px solid #01141E;
}

.categories__filter--list .input__container .input__box input:not(:placeholder-shown):not(:focus) {
  border-color: #434343;
}

Filtro de ordem com radio buttons

Preview

HTML

<div class="sort-by__filter">

  <input type="checkbox" id="sort-by--input" hidden checked/>
  <label class="sort-by__filter--trigger" for="sort-by--input">
    <small>Sort by</small>
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
    </svg>
  </label>

  <ul class="sort-by__options">
      <li class="sort-by__option">
          <label class="sort-by__option--label" for="main-radio1" onclick="orderFilter({})">
            <span class="sort-by__option--title">None</span>
            <div class="radio__label"></div>
            <input type="radio" name="radio" id="main-radio1" {{ queryString.order == null ? 'checked' : '' }}/>
            <span class="radio__checker"></span>
          </label>
      </li>

      <li class="sort-by__option">
          <label class="sort-by__option--label" for="main-radio2" onclick="orderFilter({{ _object({ order: { 'name.raw': 'asc' } }) }})">
            <span class="sort-by__option--title">Name</span>
            <div class="radio__label"></div>
            <input type="radio" name="radio" id="main-radio2" {{ queryString.order['name.raw'] == 'asc' ? 'checked' : '' }}/>
            <span class="radio__checker"></span>
            
          </label>
      </li>

      <li class="sort-by__option">
          <label class="sort-by__option--label" for="main-radio3" onclick="orderFilter({{ _object({ order: { 'prices.sale_price': 'desc' } }) }})">
            <span class="sort-by__option--title">Price: High to Low</span>
            <div class="radio__label"></div>
            <input type="radio" name="radio" id="main-radio3" {{ queryString.order['prices.sale_price'] == 'desc' ? 'checked' : '' }}/>
            <span class="radio__checker"></span>
          </label>
      </li>

      <li class="sort-by__option">
          <label class="sort-by__option--label" for="main-radio4" onclick="orderFilter({{ _object({ order: { 'prices.sale_price': 'asc' } }) }})">
            <span class="sort-by__option--title">Price: Low to High</span>
            <div class="radio__label"></div>
            <input type="radio" name="radio" id="main-radio4" {{ queryString.order['prices.sale_price'] == 'asc' ? 'checked' : '' }}/>
            <span class="radio__checker"></span>
          </label>
      </li>
  <ul>
</div>

<script>
  async function orderFilter(filter) {
      await _refresh(elementosParaAtualizar, { clean: 'order', ...filter} )
  }
</script>

CSS

.sort-by__filter {
  width: 100%;
  height: auto;
}

.sort-by__filter--trigger {
  width: 100%;
  height: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.sort-by__filter--trigger small {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-transform: uppercase;
  color: #5C5C5C;
}

.sort-by__filter--trigger svg {
  transition: all 0.5s;
}

.sort-by__filter input:checked~.sort-by__filter--trigger svg {
  transform: rotate(180deg);
}

.sort-by__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.sort-by__filter input:checked~.sort-by__options {
  max-height: 500px;
}

.sort-by__option {
  height: 22px;
}

.sort-by__option--label{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.sort-by__option--title {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.sort-by__option label:hover .sort-by__option--title{
  color: #757575;
}

/* Radio Buttons */

.radio__label {
  display: flex;
}

.radio__label + input[type="radio"] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.radio__label + input[type="radio"]:checked+.radio__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.radio__label + input[type="radio"]:checked+.radio__checker:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translate(-50%, -50%);
  height: 17px;
  width: 17px;
  border-radius: 50%;
  border: solid 2px #FFFFFF;
  transition: all 150ms linear;
}

.radio__label ~ .radio__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
  overflow: hidden;
  border-radius: 50%;
  height: 20px;
  min-width: 20px;
}

.sort-by__option label:hover .radio__checker:before {
  border: 1.5px solid #757575;
}

.radio__label ~ .radio__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border: 1.5px solid #A7A7A7;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.radio__label + input[type="radio"]:disabled+.radio__checker::before {
  cursor: not-allowed;
  border: 1.5px solid #E6E6E6;
}

.radio__label + input[type="radio"]:checked:disabled+.radio__checker::after {
  cursor: not-allowed;
}

.radio__label + input[type="radio"]:checked:disabled+.radio__checker::before {
  background-color: #E6E6E6;
}

Filtro de ordem com dropdown

Preview

HTML

<div class="sort-by__filter">

  <input type="checkbox" id="sort-by--input" hidden checked/>
  <label class="sort-by__filter--trigger" for="sort-by--input">
    <small>Sort by</small>
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
    </svg>
  </label>

  <ul class="sort-by__options" tabindex="0">
      <li class="sort-by__option">
          <input type="radio" name="radio" id="main-radio1" value="1" hidden {{ queryString.order == null ? 'checked' : '' }}/> 
          <span class="sort-by__option--title selected-default">None</span>
      </li>

      <li class="sort-by__option">
          <input type="radio" name="radio" id="main-radio2" value="2" hidden {{ queryString.order['name.raw'] == 'asc' ? 'checked' : '' }}/>
          <span class="sort-by__option--title">Name</span>
      </li>

      <li class="sort-by__option">
          <input type="radio" name="radio" id="main-radio3" value="3" hidden {{ queryString.order['prices.sale_price'] == 'desc' ? 'checked' : '' }}/>
          <span class="sort-by__option--title">Price: High to Low</span>
      </li>

      <li class="sort-by__option">
          <input type="radio" name="radio" id="main-radio4" value="4" hidden {{ queryString.order['prices.sale_price'] == 'asc' ? 'checked' : '' }}/> 
          <span class="sort-by__option--title">Price: Low to High</span>
      </li>

      <svg class="sort-by__filter--icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
      </svg>
  </ul>

  <ul class="sort-by__dropdown">
      <li onclick="orderFilter({})">
          <label class="sort-by__dropdown--option" for="main-radio1" >
            None
          </label>
      </li>

      <li onclick="orderFilter({{ _object({ order: { 'name.raw': 'asc' } }) }})"> 
          <label class="sort-by__dropdown--option" for="main-radio2" >
            Name
          </label>
      </li>

      <li onclick="orderFilter({{ _object({ order: { 'prices.sale_price': 'desc' } }) }})">
          <label class="sort-by__dropdown--option" for="main-radio3" >
            Price: High to Low
          </label>
      </li>

      <li onclick="orderFilter({{ _object({ order: { 'prices.sale_price': 'asc' } }) }})">
          <label class="sort-by__dropdown--option" for="main-radio4" >
            Price: Low to High
          </label>
      </li>
  <ul>
</div>

<script>
  async function orderFilter(filter) {
      await _refresh(elementosParaAtualizar, { clean: 'order', ...filter} )
  }
</script>

CSS

.sort-by__filter {
  width: 100%;
  height: auto;
  position: relative;
}

.sort-by__filter--trigger{
  width: 100%;
  height: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.sort-by__filter--trigger small{
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-transform: uppercase;
  color: #5C5C5C;
}

.sort-by__filter--trigger svg{
  transition: all 0.5s;
}

.sort-by__filter input:checked ~ .sort-by__filter--trigger svg {
  transform: rotate(180deg);
}

.sort-by__options{
  width: 100%;
  height: 44px;
  max-height: 0;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  opacity: 0;
  visibility: hidden;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  transition: max-height 0.5s, opacity 0.5s;
  position: relative;
  cursor: pointer;
}

.sort-by__filter input[type="checkbox"]:checked ~ .sort-by__options{
  max-height: 500px;
  opacity: 1;
  visibility: visible;
  padding: 8px 12px;
}

.sort-by__option{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  position: absolute;
}

.sort-by__option--title{
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: #757575;
  display: none;
  margin-right: auto;
}

.sort-by__option input:checked + .sort-by__option--title {
  display: flex;
}

.sort-by__filter--icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.sort-by__dropdown{
  width: 100%;
  height: auto;
  position: absolute;
  top: 100%;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  box-shadow: rgb(0 0 0 / 12%) 0px 6px 12px;
  transition: all ease-in-out .4s;
}

.sort-by__options:focus ~ .sort-by__dropdown{
  opacity: 1;
  visibility: visible;
}

.sort-by__options:focus .sort-by__filter--icon {
  transform: rotate(-180deg) translateY(50%);
}

.sort-by__dropdown--option{
    width: 100%;
    padding: 8px 12px;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    color: #757575;
    cursor: pointer;
}

.sort-by__dropdown--option:hover{
  background-color: #E6E6E6;
}


/* Radio Buttons */

.radio__label {
  display: flex;
}

.radio__label input[type="radio"] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.radio__label input[type="radio"]:checked+.radio__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.radio__label input[type="radio"]:checked+.radio__checker:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translate(-50%, -50%);
  height: 17px;
  width: 17px;
  border-radius: 50%;
  border: solid 2px #FFFFFF;
  transition: all 150ms linear;
}

.radio__label .radio__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
  overflow: hidden;
  border-radius: 50%;
  height: 20px;
  min-width: 20px;
}

.radio__label .radio__checker:is(:hover, :focus):before {
  border: 1.5px solid #757575;
}

.radio__label .radio__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border: 1.5px solid #A7A7A7;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.radio__label input[type="radio"]:disabled+.radio__checker::before {
  cursor: not-allowed;
  border: 1.5px solid #E6E6E6;
}

.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
  cursor: not-allowed;
}

.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
  background-color: #E6E6E6;
}

Filtros Dinâmicos

Em nossa IDE podemos usar também filtros que serão dinâmicos de acordo com os produtos de cada loja, separamos esses filtros dinâmicos em:

• Atributos gerais do produto: que focam em características específicas do produto, como marcas, tecido e outros.
• Atributos de variações: que focam em características como cores, tamanhos e outros.

Filtro dinâmico para atributos do produto com checkbox

Preview

HTML

{# 
  Note que no set abaixo estamos usando dois tipos de atributos:
  1: "atributo.value" - pois o atributo é um objeto e o valor está em um ".value". ex.: "atributo.value = valor"
  2: "atributo" - seria um atributo simples com o valor já setado nele. ex.: "atributo = valor"

  Você deverá usar {{_debug(product)}} nos produtos da sua loja para encontrar qual a forma correta
  de trazer os filtros que você deseja para a sua página fazendo o 'set' deles como no exemplo abaixo:
#}

{% 
  set atributosParaFiltrar = {
    'atributo.value': 'Atributo 1',
    'atributo': 'Atributo 2',
  }
%}


{% for name, label in atributosParaFiltrar %}
  {% set _name = name %}
  {% if '.' in name %} 
      {% set _name = name|split('.') %}
      {% set _name = _name[0] %}
  {% endif %}

  {% set type = '.' in name ? 'value' : '' %}
  {% set filtros = _filter('get', _name, type) %}

  {% set selecionados = _filter('selected', name) %}

  {% if filtros | length > 0 %}
    <div class="dynamic-attributes__filter" data-grid="column">
      <input type="checkbox" id="dynamic-attributes--input" hidden checked/>
      <label class="dynamic-attributes__filter--trigger" for="dynamic-attributes--input">
        <small>{{ label }}</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <ul class="dynamic-attributes__filter--list" id="{{ label }}" data-grid="column">
        {% for filtro in filtros %}
          {% set filtro_label =  filtro.label ? filtro.label : filtro %}
          {% set filtro = filtro.value ? filtro.value : filtro %}

          <li class="dynamic-attributes__filter--item">
            <label
              onclick="selectFilter(event, { match: { '{{ name }}': '{{ filtro|trim }}' } })"
              data-filter="{{ name }}:{{ filtro|trim }}" 
              for="{{ filtro }}"
            >
              <small>{{ filtro_label | raw }}</small>
              <input 
                type="checkbox"
                id="{{ filtro }}"
                {{ filtro in selecionados ? 'checked' : '' }}
              >
              <div class="dynamic-attributes__filter__checker"></div>
            </label>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endfor %}

CSS

.dynamic-attributes__filter {
  width: 100%;
  height: auto;
}

.dynamic-attributes__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.dynamic-attributes__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.dynamic-attributes__filter--trigger svg {
  transition: all 0.5s;
}

.dynamic-attributes__filter input:checked~.dynamic-attributes__filter--trigger svg {
  transform: rotate(180deg);
}

.dynamic-attributes__filter--list::-webkit-scrollbar {
  width: 4px;
}

.dynamic-attributes__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.dynamic-attributes__filter--list::-webkit-scrollbar-thumb{
  border-radius: 4px;
  background-color: #A7A7A7;
}

.dynamic-attributes__filter--list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.dynamic-attributes__filter input:checked~.dynamic-attributes__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.dynamic-attributes__filter--item {
  width: 100%;
}

.dynamic-attributes__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.dynamic-attributes__filter--item label * {
  pointer-events: none;
}

.dynamic-attributes__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.dynamic-attributes__filter--item label:hover small {
  color: #757575;
}

.dynamic-attributes__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.dynamic-attributes__filter--item input:checked+.dynamic-attributes__filter__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.dynamic-attributes__filter--item input:checked+.dynamic-attributes__filter__checker:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 7px;
  width: 7px;
  height: 14px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: all 150ms linear;
}

.dynamic-attributes__filter--item input+.dynamic-attributes__filter__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.dynamic-attributes__filter__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 2px;
  border: 1.5px solid #A7A7A7;
  padding: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: all 150ms linear;
}

.dynamic-attributes__filter--item label:hover .dynamic-attributes__filter__checker:before {
  border: 1.5px solid #757575;
}

Filtro dinâmico para atributos do produto com chip

Preview

HTML

{# 
  Note que no set abaixo estamos usando dois tipos de atributos:
  1: "atributo.value" - pois o atributo é um objeto e o valor está em um ".value". ex.: "atributo.value = valor"
  2: "atributo" - seria um atributo simples com o valor já setado nele. ex.: "atributo = valor"

  Você deverá usar {{_debug(product)}} nos produtos da sua loja para encontrar qual a forma correta
  de trazer os filtros que você deseja para a sua página fazendo o 'set' deles como no exemplo abaixo:
#}

{% 
  set atributosParaFiltrar = {
    'atributo.value': 'Atributo 1',
    'atributo': 'Atributo 2',
  }
%}


{% for name, label in atributosParaFiltrar %}
  {% set _name = name %}
  {% if '.' in name %} 
      {% set _name = name|split('.') %}
      {% set _name = _name[0] %}
  {% endif %}

  {% set type = '.' in name ? 'value' : '' %}
  {% set filtros = _filter('get', _name, type) %}

  {% set selecionados = _filter('selected', name) %}

  {% if filtros | length > 0 %}
    <div class="dynamic-attributes__filter" data-grid="column">
      <input type="checkbox" id="dynamic-attributes--input" hidden checked/>
      <label class="dynamic-attributes__filter--trigger" for="dynamic-attributes--input">
        <small>{{ label }}</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <ul class="dynamic-attributes__filter--list" id="{{ label }}" data-grid="column">
        {% for filtro in filtros %}
          {% set filtro_label =  filtro.label ? filtro.label : filtro %}
          {% set filtro = filtro.value ? filtro.value : filtro %}

          <li class="dynamic-attributes__filter--item">
            <label
              onclick="selectFilter(event, { match: { '{{ name }}': '{{ filtro|trim }}' } })"
              data-filter="{{ name }}:{{ filtro|trim }}" 
              for="{{ filtro }}"
            >
              <small>{{ filtro_label | raw }}</small>
              <input 
                type="checkbox"
                id="{{ filtro }}"
                {{ filtro in selecionados ? 'checked' : '' }}
              >
              <div class="dynamic-attributes__filter__checker"></div>
            </label>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endfor %}

CSS

.dynamic-attributes__filter {
  width: 100%;
  height: auto;
}

.dynamic-attributes__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.dynamic-attributes__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.dynamic-attributes__filter--trigger svg {
  transition: all 0.5s;
}

.dynamic-attributes__filter input:checked~.dynamic-attributes__filter--trigger svg {
  transform: rotate(180deg);
}

.dynamic-attributes__filter--list::-webkit-scrollbar {
  width: 4px;
}

.dynamic-attributes__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.dynamic-attributes__filter--list::-webkit-scrollbar-thumb{
  border-radius: 4px;
  background-color: #A7A7A7;
}

.dynamic-attributes__filter--list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.dynamic-attributes__filter input:checked~.dynamic-attributes__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.dynamic-attributes__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 4px 12px;
  position: relative;
}

.dynamic-attributes__filter--item label * {
  pointer-events: none;
}

.dynamic-attributes__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.dynamic-attributes__filter--item label:hover small {
  color: #757575;
}

.dynamic-attributes__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.dynamic-attributes__filter__checker{
width: 100%;
height: 100%;
border: 1px solid #E6E6E6;
border-radius: 40px;
position: absolute;
}

.dynamic-attributes__filter--item label:hover .dynamic-attributes__filter__checker {
  border-color: #757575;
}

.dynamic-attributes__filter--item label input:checked + .dynamic-attributes__filter__checker{
  border-color: #434343;
}

Filtro dinâmico para atributos de variações com checkbox

Preview

HTML

{# 
  Note que no set abaixo estamos usando dois tipos de atributos:
  1: "atributo.value" - pois o atributo é um objeto e o valor está em um ".value". ex.: "atributo.value = valor"
  2: "atributo" - seria um atributo simples com o valor já setado nele. ex.: "atributo = valor"

  Você deverá usar {{_debug(product)}} nos produtos da sua loja para encontrar qual a forma correta
  de trazer os filtros que você deseja para a sua página fazendo o 'set' deles como no exemplo abaixo:
#}

{% 
  set atributosParaFiltrar = {
    'atributo.value': 'Atributo 1',
    'atributo': 'Atributo 2',
  }
%}

{% for name, label in atributosParaFiltrar %}
  {% set filtros = _filter('get:url_based:asc', name, 'label') %}
  {% set selecionados = _filter('selected', name) %}

  {% if filtros | length > 0 %}
    <div class="dynamic-variations__filter" data-grid="column">
      <input type="checkbox" id="dynamic-variations--input" hidden checked/>
      <label class="dynamic-variations__filter--trigger" for="dynamic-variations--input">
        <small>{{ label }}</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <ul class="dynamic-variations__filter--list" id="{{ label }}" data-grid="column">
        {% for filtro in filtros %}
          <li class="dynamic-variations__filter--item">
            <label
              onclick="selectFilter(event, { match: { '{{ name }}.value': '{{ filtro.value|trim }}' } })"
              data-filter="{{ name }}.value:{{ filtro.value|trim }}" 
              for="{{ filtro.label }}"
            >
              <small>{{ filtro.label | raw }}</small>
              <input 
                type="checkbox"
                id="{{ filtro.label }}"
                {{ filtro in selecionados ? 'checked' : '' }}
              >
              <div class="dynamic-variations__filter__checker"></div>
            </label>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endfor %}

CSS

.dynamic-variations__filter {
  width: 100%;
  height: auto;
}

.dynamic-variations__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.dynamic-variations__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.dynamic-variations__filter--trigger svg {
  transition: all 0.5s;
}

.dynamic-variations__filter input:checked~.dynamic-variations__filter--trigger svg {
  transform: rotate(180deg);
}

.dynamic-variations__filter--list::-webkit-scrollbar {
  width: 4px;
}

.dynamic-variations__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.dynamic-variations__filter--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #A7A7A7;
}

.dynamic-variations__filter--list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 8px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.dynamic-variations__filter input:checked~.dynamic-variations__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.dynamic-variations__filter--item {
  width: 100%;
}

.dynamic-variations__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.dynamic-variations__filter--item label * {
  pointer-events: none;
}

.dynamic-variations__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.dynamic-variations__filter--item label:hover small {
  color: #757575;
}

.dynamic-variations__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.dynamic-variations__filter--item input:checked+.dynamic-variations__filter__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.dynamic-variations__filter--item input:checked+.dynamic-variations__filter__checker:after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 7px;
  width: 7px;
  height: 14px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: all 150ms linear;
}

.dynamic-variations__filter--item input+.dynamic-variations__filter__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
}

.dynamic-variations__filter__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 2px;
  border: 1.5px solid #A7A7A7;
  padding: 9px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: all 150ms linear;
}

.dynamic-variations__filter--item label:hover .dynamic-variations__filter__checker:before {
  border: 1.5px solid #757575;
}

Filtro dinâmico para atributos de variações com chip

Preview

HTML

{# 
  Note que no set abaixo estamos usando dois tipos de atributos:
  1: "atributo.value" - pois o atributo é um objeto e o valor está em um ".value". ex.: "atributo.value = valor"
  2: "atributo" - seria um atributo simples com o valor já setado nele. ex.: "atributo = valor"

  Você deverá usar {{_debug(product)}} nos produtos da sua loja para encontrar qual a forma correta
  de trazer os filtros que você deseja para a sua página fazendo o 'set' deles como no exemplo abaixo:
#}

{% 
  set atributosParaFiltrar = {
    'atributo.value': 'Atributo 1',
    'atributo': 'Atributo 2',
  }
%}

{% for name, label in atributosParaFiltrar %}
  {% set filtros = _filter('get:url_based:asc', name, 'label') %}
  {% set selecionados = _filter('selected', name) %}

  {% if filtros | length > 0 %}
    <div class="dynamic-variations__filter" data-grid="column">
      <input type="checkbox" id="dynamic-variations--input" hidden checked/>
      <label class="dynamic-variations__filter--trigger" for="dynamic-variations--input">
        <small>{{ label }}</small>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.99999 10.1431L12.3567 7.78559L13.5358 8.96392L9.99999 12.4998L6.46416 8.96392L7.64333 7.78559L9.99999 10.1431Z" fill="black"/>
        </svg>
      </label>

      <ul class="dynamic-variations__filter--list" id="{{ label }}" data-grid="column">
        {% for filtro in filtros %}
          <li class="dynamic-variations__filter--item">
            <label
              onclick="selectFilter(event, { match: { '{{ name }}.value': '{{ filtro.value|trim }}' } })"
              data-filter="{{ name }}.value:{{ filtro.value|trim }}" 
              for="{{ filtro.label }}"
            >
              <small>{{ filtro.label | raw }}</small>
              <input 
                type="checkbox"
                id="{{ filtro.label }}"
                {{ filtro in selecionados ? 'checked' : '' }}
              >
              <div class="dynamic-variations__filter__checker"></div>
            </label>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
{% endfor %}

CSS

.dynamic-variations__filter {
  width: 100%;
  height: auto;
}

.dynamic-variations__filter--trigger {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0px;
  margin-bottom: 12px;
  cursor: pointer;
}

.dynamic-variations__filter--trigger small {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  color: #000000;
}

.dynamic-variations__filter--trigger svg {
  transition: all 0.5s;
}

.dynamic-variations__filter input:checked~.dynamic-variations__filter--trigger svg {
  transform: rotate(180deg);
}

.dynamic-variations__filter--list::-webkit-scrollbar {
  width: 4px;
}

.dynamic-variations__filter--list::-webkit-scrollbar-track {
  background-color: transparent;
}

.dynamic-variations__filter--list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #A7A7A7;
}

.dynamic-variations__filter--list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s;
  padding-right: 8px;
}

.dynamic-variations__filter input:checked~.dynamic-variations__filter--list {
  max-height: 240px;
  overflow: scroll;
  overflow-x: hidden;
}

.dynamic-variations__filter--item label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 4px 12px;
  position: relative;
}

.dynamic-variations__filter--item label * {
  pointer-events: none;
}

.dynamic-variations__filter--item label small {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #434343;
}

.dynamic-variations__filter--item label:hover small {
  color: #757575;
}

.dynamic-variations__filter--item input {
  display: none;
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
}

.dynamic-variations__filter__checker {
  width: 100%;
  height: 100%;
  border: 1px solid #E6E6E6;
  border-radius: 40px;
  position: absolute;
}

.dynamic-variations__filter--item label:hover .dynamic-variations__filter__checker {
  border-color: #757575;
}

.dynamic-variations__filter--item label input:checked+.dynamic-variations__filter__checker {
  border-color: #434343;
}