1

Tengo dos tipos de filtros, uno por categorías y funciona bien, pero no he logrado organizar alfabeticamente (A-Z), tome los datos y los agregué a un array y los ordené con sort() y se muestra ordenado el array, pero cuando muestro los divs, no.

<!DOCTYPE html>
<title>Products</title>
<!-- Menu footer -->
<div class="col-12 mb-4 toggle">
  <div class="row">
    <div class="col-sm-7 col-12 gray-links text-center" id="tags">
      <div class="d-inline"><a class="sort bg-light p-2" href="">A-Z</a></div>
    </div>
  </div>
</div>

<!-- Products listing -->
<div class="col-12 m-0 p-0 pt-2" id="products">
    <div class="row m-0 p-0">
        <div class="col-12 col-md-9 ml-4 blue-links">
            <div class="row m-0 p-0">
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 acer_predator_z35" id="computadores">
                    <a href="producto.php?id=<?php echo $id; ?>" ><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Acer predator Z35</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 dell_infinityedge_5" id="computadores">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Dell InfinityEdge 5</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 xiaomi_poco_3" id="telefonos_y_tablets">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Xiaomi Poco 3</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 nikon_d3200" id="camaras_fotograficas">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Nikon D3200</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 acer_predator_z55" id="computadores">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Acer predator Z55</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 dell_infinityedge_7" id="computadores">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Dell InfinityEdge 7</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 samsung_a21s" id="telefonos_y_tablets">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>Samsung A21s</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
                <div class="product col-xl-3 col-sm-4 col-5 mb-4 gopro_max" id="camaras_fotograficas">
                    <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
                    <h6>GoPro Max</h6>
                    <h4 class="text-blue">$35.000</h4>
                    <button class="btn btn-blue"><small>Agregar al carro</small></button>
                </div>
            </div>
            <div class="col-12 row justify-content-center mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                    </ul>
                </nav>  
            </div>
        </div>
        <div class="col-3 d-none d-md-block row">
            <div class="justify-content-center">
                <div class="blue-links">
                    <img class="img-fluid m-0 p-0" src="https://via.placeholder.com/270" alt="">
                    <h5><strong>Super vaccum</strong></h5>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptates, laborum laboriosam vero adipisci saepe dicta? Quos, dolor, adipisci nobis labore vel, distinctio nemo rem, soluta praesentium ad itaque vero!</p>
                </div>
                <hr>
                <div class="d-flex justify-content-between">
                    <button class="btn btn-blue">Agregar al carro</button>
                    <h5>$35.000</h5>
                </div>  
            </div>
        </div>
    </div>
</div>

<!-- Jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<script>
    $(document).ready(function($){
        $('#tags').find('a').on('click', function(e){
            e.preventDefault();
            var products = $('#products').find('div.product');
            $(products).hide();
            var tipo = $(this).data('category');
            if(tipo == 'todos'){
                $(products).show();
            }else{
                $('#products').find('div.product#'+tipo).show();
            }
        });
    });
</script>

<script>
    $(document).ready(function(){
        $('.sort').click(function(){
            var products = $('#products').find('div.product');
            $(products).hide();

            var products = $('#products').find('div > h6');

            let $arr = [];
            $(products).each((i, el) => {
                el.innerHTML = el.innerHTML.toLowerCase();
                el.innerHTML = el.innerHTML.replace(/ /g,"_");
                $arr.push(el.innerHTML)
            });

            $arr.sort()

            $(products).each((i, el) => {
              var products = $('#products').find('div.product.'+$arr[i]).show();
            });
        });
    });
</script>   

1 respuesta 1

2

Es mucho más simple de lo que parece, lo primero no deberías tener ids repetidos, usa atributos data si lo necesitas para categorizar los productos.

Con respecto a la posible solución, haciendo uso de un atributo "data-name" sustituyes las clases que le asignas a cada producto con su nombre y se lo asignas a este atributo.

Al div que contiene todos los productos le asignamos una clase para identificarlo.

Por último podrás ordenar los contenedores de productos vía javascript:

$(document).ready(function() {
  $('.sort').click(function(e) {
    e.preventDefault();

    var divList = $(".product");
    divList.sort(function(a, b) {
      return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
    });
    
    $(".product-container").html(divList);
  });
});
<!-- Jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<!-- Menu footer -->
<div class="col-12 mb-4 toggle">
  <div class="row">
    <div class="col-sm-7 col-12 gray-links text-center" id="tags">
      <div class="d-inline"><a class="sort bg-light p-2" href="">A-Z</a></div>
    </div>
  </div>
</div>

<!-- Products listing -->
<div class="col-12 m-0 p-0 pt-2">
  <div class="row m-0 p-0">
    <div class="col-12 col-md-9 ml-4 blue-links">
      <div class="row m-0 p-0 product-container">
        <div class="product col-xl-3 col-sm-4 col-5 mb-4 computadores" data-name="acer_predator_z35">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Acer predator Z35</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="dell_infinityedge_5">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Dell InfinityEdge 5</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="xiaomi_poco_3">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Xiaomi Poco 3</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="nikon_d3200">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Nikon D3200</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="acer_predator_z55">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Acer predator Z55</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="dell_infinityedge_7">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Dell InfinityEdge 7</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="samsung_a21s">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>Samsung A21s</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
        <div class="product col-xl-3 col-sm-4 col-5 mb-4" data-name="gopro_max" id="camaras_fotograficas">
          <a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
          <h6>GoPro Max</h6>
          <h4 class="text-blue">$35.000</h4>
          <button class="btn btn-blue"><small>Agregar al carro</small></button>
        </div>
      </div>
    </div>

  </div>
</div>

He simplificado tu código para que se vea mejor la respuesta.

1
  • Muchísimas gracias, excelente. Tomo en cuenta tu sugerencia.
    – Joseph
    el 12 mar. 2022 a las 16:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.