1

Buenas estoy haciendo una aplicación que es un comandero. Es para un restaurante de pizzas y alguna cosa más. Lo estoy haciendo en un servidor y lo abro en la máquina TPV de este local.

Me encuentro con dificultades a la hora de ir navegando por los productos, es decir primero cargo todas las categorías, si pulso por ejemplo en Pizzas, a través de AJAX saco el los productos que hay en Pizzas, una vez elija una pizza a través de AJAX me cargara de nuevo datos para elegir tamaño y algunas opciones más, pero si quiero i volviendo paso a paso para detrás no se como hacerlo.

Buscando y buscando y bajo mi conocimiento he encontrado window.location.hash donde en cada success del ajax le asigno un elemento a la URL por ejemplo #categorias.

Con el código que muestro abajo, el botón que retrocede si me cambia la url pero no el contenido de la pantalla. Solo e mostrado dos pasos la iteración de las categorías y la elección del producto.

HTML

@foreach ($categorias as $item)
    <div class="lasCat center" data-id="{{ $item->id }}">
        <img src="{{URL::asset($item->foto)}}" alt="" class="img-fluid">
         <h2>{{ $item->name }}</h2>
    </div>
@endforeach

JavaScript

window.location.hash = "#categorias";
    
    $('.lasCat').on('click',function prueba() {
        var idCategoria = $(this).data("id");
        var url = '/saca-productos';
        $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            type: "GET",
            url: url,
            data: {'idCategoria': idCategoria},

            success: function (resultado){
                $('#zonaProductos').empty();

                window.location.hash = "#"+ resultado.categoria.slug +"";

                $('#muestra__boton').html("<a id=\"backLink\" class=\"volver__btn\"><i class=\"fas fa-long-arrow-alt-left\"></i> Volver</a>");

                $("#backLink").click(function(event) {
                    event.preventDefault()
                    event.stopPropagation();
                    window.history.back(1);
                });

                $.each(resultado , function(index, productos) { 
                    //console.log(index, productos)
                    for(i = 0; i < productos.length; i++){
                        $('#zonaProductos').append('<div class="lasCat seleccionProducto center" data-id="'+ productos[i].id +'">\
                                                        <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
                                                        <h2>'+ productos[i].name +'</h2>\
                                                    </div>');
                                                    
                    }
                });
            },
            error: function(e) { $("#zonaProductos").html("Sucedió un error!") }
        });
    });

Alguna sugerencia....

8
  • Por favor, edita la pregunta para agregar código HTML de, al menos, una categoría, para saber cómo tomar los datos de ahí para la petición AJAX.
    – Triby
    Commented el 18 sept. 2021 a las 18:43
  • Ya te lo he puesto @Triby es una iteración desde la base de datos
    – Miguel
    Commented el 18 sept. 2021 a las 18:45
  • Entiendo lo que dices de if(hash == '#uno') { pero al ser una iteración como se al que pulso? Por eso dices que los estoy generando manualmente no?
    – Miguel
    Commented el 18 sept. 2021 a las 18:48
  • ¿Categorías y productos tienen slug para usar en hash?
    – Triby
    Commented el 18 sept. 2021 a las 18:55
  • Si lo tienen Triby , lo que pasa que en la tabla de producto guardo el id de la categoría en lugar del slug
    – Miguel
    Commented el 18 sept. 2021 a las 18:56

1 respuesta 1

2

Para trabajar con historial, no debes depender de clic en los enlaces, sino de cambios en la barra de direcciones, específicamente, del evento hashchange y cargar el nuevo contenido de acuerdo al hash actual.

Insisto: trabaja solo con el historial, no con clics

Crea una función para analizar el hash, si está vacío, debes mostrar la página inicial (categorías), de lo contrario, ejecutar la petición AJAX que corresponda a cada uno. Esta función debe estar asignada al evento hashchange y, además, ejecutarse al cargar la página, por si ingresan directamente o pulsan F5 para recargar.

En el HTML, crea enlaces para activar cada categoría, de forma que puedas obtener fácilmente la información necesaria desde el hash (slug de categoría):

@foreach ($categorias as $item)
    <div class="lasCat center">
        <a href="#{{ $item->slug }}" data-id="{{ $item->id }}">
            <img src="{{URL::asset($item->foto)}}" alt="" class="img-fluid">
            <h2>{{ $item->name }}</h2>
        </a>
    </div>
@endforeach

Es posible que esto afecte los estilos, pero sería algo sencillo de resolver.

Luego, en Javascript vas a tomar esos datos desde el evento:

// Analizar hash en una función
function hashChanged() {
    let hash = window.location.hash;
    console.log(hash);
    if(hash == '') {
        // Muestras solo las categorías
        // Ocultas productos y todo lo que no deba aparecer
    } else {
        // Obtener Enlace
        let link = $(`a[href="${hash}"]`);
        // Ejecutar función AJAX para cargar productos de categorías
        cargaProductos($(link).data('id'));
    }
}

// Ejecutar función cuando el hash se modifique
$(window).on('hashchange', hashChanged);

// Ejecutar al cargar la página, por si se ingresa directo (o se recarga)
$(function() {
    hashChanged();
});
// Asignar evento al botón
$('#back').on('click', function(e) {
    e.preventDefault();
    history.back();
});

// Cambiar el hash manualmente no es recomendable
$('#manual').on('click', function(e) {
    e.preventDefault();
    window.location.hash = '#manual';
});

// Recibe ID de categoría como parámetro
function cargaProductos(idCategoria) {
    console.log(idCategoria);
    // No es necesario asignar evento click,
    // porque se trabaja con historial
            let url = '/saca-productos';
            $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                type: "GET",
                url: url,
                data: {'idCategoria': idCategoria},
    
                success: function (resultado){
                    // No modifiques el hash el enlace lo actualizó
                    // window.location.hash = "#"+ resultado.categoria.slug +"";

                    $('#zonaProductos').empty();
                    $.each(resultado , function(index, productos) { 
                        //console.log(index, productos)
                        for(i = 0; i < productos.length; i++){
                            $('#zonaProductos').append('<div class="lasCat seleccionProducto center" data-id="'+ productos[i].id +'">\
                                                            <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
                                                            <h2>'+ productos[i].name +'</h2>\
                                                        </div>');
                        }
                    });
                },
                error: function(e) { $("#zonaProductos").html("Sucedió un error!") }
            });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="#uno" data-id="1">Uno</a></li>
    <li><a href="#dos" data-id="2">Dos</a></li>
    <li><a href="#tres" data-id="3">Tres</a></li>
</ul>
<button id="back">Volver</button>
<button id="manual">Manual</button>

Como comentario final, prueba el fragmento de código y funciona correctamente con los enlaces y el botón "Volver", pero el comportamiento puede ser errático con el botón "Manual". Si necesitas asignar un hash, no debes hacerlo directo, sino con history.pushState().

Ahora, si vas a manejar hash con los productos, tienes que buscar una forma de diferenciarlos de las categorías, pero depende de la estructura de los slugs de cada uno.

6
  • Hola @Triby te comento. Viendo la pregunta entiendes que la página ni se tiene que recargar en ningún momento no?
    – Miguel
    Commented el 18 sept. 2021 a las 18:19
  • @Miguel, sí, eso lo tengo claro, pero debes tener en consideración las acciones involuntarias (¿o no?) de los usuarios. En una computadora basta con pulsar F5 y en un móvil con deslizar abajo para recargar y, si no lo tienes contemplado, no sabes qué es lo que se va a mostrar.
    – Triby
    Commented el 18 sept. 2021 a las 18:21
  • ok ok! voy a probar como me dices, llevo toda la tarde con esto, haber como monto esto con el AJAX, gracias @Triby
    – Miguel
    Commented el 18 sept. 2021 a las 18:22
  • Hola @Triby de nuevo, revisa por favor la actualización del final de mi pregunta, al final consigo lo mismo que antes, solo sale el #item como antes pero no cambia el ajax, seguro que lo estoy haciendo mal, por favor revisa
    – Miguel
    Commented el 18 sept. 2021 a las 18:33
  • @Miguel, no hay cambio real en ese código, sigues modificando el hash manualmente. ¿Cómo llegas a #categorías?
    – Triby
    Commented el 18 sept. 2021 a las 18:35

Tu Respuesta

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

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