0

Todo parece funcionar bien, sucede que primero tengo que dar click en guardar, luego en añadir al carro y finalmente en 'cargar' para ver los cambios, hasta ahí medio bien, ya que lo que busco es que todo funcione con un solo click, una vez añadido, actualizo la página y se desaparece ese div creado con javascript, no he podido encontrar solución a mi problema, me he tardado días en tratar de construir codigo, el cual no sé, para poder lograr lo que quiero. quiero saber cómo puedo solucionar esto?

  
    /* Codigo local-storage */
     /*Funcion de Capturar y Almacenar datos*/
$(document).ready(function(){    
    $('#boton-guardar').click(function(){        
        /*Captura de datos escrito en los inputs*/        
        var nom = document.getElementById("titulo").value;
        var apel = document.getElementById("cantidad").value;
        var ape = document.getElementById("precio").value;
        /*Guardando los datos en el LocalStorage*/
        localStorage.setItem("Producto", nom);
        localStorage.setItem("Precio", apel);
        localStorage.setItem("Caja", ape);
    });   
});

/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){    
    $('#boton-cargar').click(function(){                       
        /*Obtener datos almacenados*/
        var producto = localStorage.getItem("Producto");
        var precio = localStorage.getItem("Precio");
        var caja = localStorage.getItem("Caja");
        /* Muestro los datos en las etiquetas creadas dentro del div también creado */      
        document.getElementById("you").innerHTML = producto;
        document.getElementById("mao").innerHTML = precio;
        document.getElementById("uso").innerHTML = caja;
    });   
}); 
.cart-content{
height: 600px;
width: 49%;	
background-color: #fff;	
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.cart-content input, .cart-content select{
width: 50%;	
margin: 10px;
}
.box-content{
width: 90%;
height: 90%;
background-color: #ddd;	
}
.box-content div{
background-color: #f1f1f1;
display: flex;
justify-content: space-around;
align-items: center;	
}
<div id="loop" class="cart-content">

		<input id="titulo" type="text" value="tenis hombre" disabled>
		<input id="precio" type="text" value="$150.000" disabled>

		<select id="cantidad">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>

		<input id="" onclick="crear()" type="button" value="Añadir al carro">

		<input id="boton-guardar" onclick="guardar()" type="button" value="guardar">
		<input id="boton-cargar" type="button" value="cargar">

	</div>
  
  
  <div class="cart-content">

		<div id="box" class="box-content"></div> <!-- Todo se almacena aquí -->

	</div>

4
  • Lo que puedes hacer es hacer uso de localStorage y una vez vayas agregando los productos en el carrito en la primera pagina, los vas añadiendo a localStorage y cuando cargues la segunda página lees de localStorage y recreas el carrito nuevamente Commented el 12 abr. 2019 a las 23:16
  • 1
    El problema es que vas de pregunta en pregunta para que te resuelvan tu programa, sin aportar código, editaste tu pregunta después de que te comento Daniel Ramos como lo podrías hacer para que alguien más te responda, así nunca vas a aprender. Commented el 13 abr. 2019 a las 7:33
  • te sugiero revisar: dantecervantes.com/canasta-compras-javascript Commented el 15 abr. 2019 a las 22:24
  • ¿Cual es el HTML de los productos? Commented el 16 abr. 2019 a las 16:15

3 respuestas 3

1
+50

para utilizar el local storage tendrias que hacer asi :

 localStorage.setItem("caja", $("#caja").html());
 localStorage.setItem("carro", $("#carro").html());

y al recargar la pagina

 $("#caja").html(localStorage.getItem("caja"));
 $("#carro").html(localStorage.getItem("carro"));

esto te sirve también para "conectar" las dos paginas, es decir .. utilizas los mismos nombres ya sea en la pagina 1 que en la pagina 2.

osea que en las 2 tendrias que tener los get, te aconsejaria de comprobar la existencia antes de modificar el html de tus divs:

 $(document).ready(function(){
     if (localStorage.hasOwnProperty("caja")
         $("#caja").html(localStorage.getItem("caja"));
     if (localStorage.hasOwnProperty("carro")
         $("#carro").html(localStorage.getItem("carro"));
 });

hasOwnProperty lo que hace es comprobar la existencia de los elementos en el localStorage.

mientras en el evento click pondrias los set :

$('.productos').on('click','.producto',function() {
    var e = $(this).clone();
    var identificador = $(this).data("identificador");
    if($("#caja").find("."+identificador).length){
       alert("Ya fue añadido al carro");
    }else{
       $(e).appendTo('#caja');
       localStorage.setItem("caja", $("#caja").html());
    } 
    $('#quanty').text("Añadido " + $("#caja").find('.producto').length + " productos");
    $('#quant').text($("#caja").find('.producto').length);
});

al momento del pago, el carro se tiene que vaciar .. para eso necesitas hacer asi :

localStorage.removeItem("caja");
localStorage.removeItem("carro");

espero que te sea de ayuda, exitos

EDIT

te aconsejaria que hagas lo siguiente :

en vez de crear un boton para cargar, lo cargaria gracias a una función

  //al cargar la pagina, tomo los elementos que ya estan al interno del carro. 
  $(document).ready(function() {
      refreshCarro();
  });

  //función para tomar los valores
  function refreshCarro() {
      var producto = localStorage.getItem("Producto");
      var precio = localStorage.getItem("Precio");
      var caja = localStorage.getItem("Caja");
      /* Muestro los datos en las etiquetas creadas dentro del div también creado */      
      document.getElementById("you").innerHTML = producto;
      document.getElementById("mao").innerHTML = precio;
      document.getElementById("uso").innerHTML = caja;
  }

esta misma función la llamaria al interno del boton de guardado :

$('#boton-guardar').click(function(){        
    /*Captura de datos escrito en los inputs*/        
    var nom = document.getElementById("titulo").value;
    var apel = document.getElementById("cantidad").value;
    var ape = document.getElementById("precio").value;
    /*Guardando los datos en el LocalStorage*/
    localStorage.setItem("Producto", nom);
    localStorage.setItem("Precio", apel);
    localStorage.setItem("Caja", ape);
    guardar(); 
    refreshCarro();
});   

y tu HTML tendria que quedar asi :

<div id="loop" class="cart-content">

    <input id="titulo" type="text" value="tenis hombre" disabled>
    <input id="precio" type="text" value="$150.000" disabled>

    <select id="cantidad">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <input id="" onclick="crear()" type="button" value="Añadir al carro">

    <input id="boton-guardar" type="button" value="guardar">

 </div>


<div class="cart-content">

    <div id="box" class="box-content"></div> <!-- Todo se almacena aquí -->

</div>

asi tendria que funcionar

0
1

Prueba agregando esto al final del script:

localStorage.productos = $('.productox').html();
localStorage.caja = $('#caja').html();
$('.productox').html(localStorage.productos);
$('#caja').html(localStorage.caja);
1
  • osea, al recargar la pagina siempre le seteas al localstorage el html de productos, esto al recargar siempre estaria vacio, deberias poner un if antes de setear el localstorage Commented el 17 abr. 2019 a las 13:48
1

creo que tienes varias opciones, a mi se me ocurre

1) utilizar frameset https://www.w3schools.com/tags/tag_frameset.asp , se esa forma no se refrescara la porcion que tu no quieres que lo hagas, a menos que lo hagas con javascript. por ejemplo

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

2) puedes usar iframes, así no te refrescara toda la pagina

mira la siguiente pagina

https://tecnologiaenvivo.com/html5-frames-e-iframes/

1
  • Frameset y frame están obsoletos y no deben utilizarse. Aunque pueden marchar, su soporte puede eliminarse y dejar de funcionar en cualquier momento.
    – Alvaro Montoro
    Commented el 17 abr. 2019 a las 20:28

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.