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....
if(hash == '#uno') {
pero al ser una iteración como se al que pulso? Por eso dices que los estoy generando manualmente no?id
de la categoría en lugar del slug