Question

Saludos a todos, no me considero un novato en programación pero y se que me faltan muchas cosas por aprender.
En estos momentos estoy realizando una tienda online a codigo puro sin CMS ni Framework, estoy usando Html5,Css,Bootsrap,Jquery y Php.

El problema que tengo es a la hora de ir cargando el carrito de compra, ya que no encuentro la manera de pasar el ID del producto que el usuario seleccione a un div dentro de la misma pagina index. Es decir el carrito de compra no se carga en un url externo (donde podria pasar la url facilmente con GET), sino que se debe ir actualizando automaticamente en la misma pagina index sin recargar. El boton del carrito esta arriba en el menu.

Esto era lo que estaba tratando de hacer: enviar el id con una funcion click de jquery pero no se como hacerlo.

div class="top_item_new">
        <img class="img_nuevo" src="img/nuevo.png">
        <a class="img_love" href="#" ><i class="fa fa-heart-o heart"></i></a>
        <a href="javascript:cargarCarrito(<?php echo $registros['id']; ?>);");>
            <img class="img_cart" src="img/carrito.png">
        </a>
    </div>

Comments

y qué es lo que hace la función cargarCarrito() ???

---

Estimado, gracias por responder. Alli radica mi duda porque he intentado un monton de codigos en la funcion cargarCarrito() pero nada me funciona. Tienes alguna sugerencia de como hacer esto?

Answer 1

Hola @Mecma,

no hay una única manera de hacer esto, ni una de las soluciones que yo haya implementado es la más indicada para tu código, ya que eso depende del resto de la página...

Lo que tenés que hacer para implementar la funcionalidad del carrito, en general, es lo siguiente:

• en JavaScript, la función cargarCarrito() debe tener acceso al ID del elemento a agregar (y posiblemente a la cantidad a agregar, salvo que siempre se agregue de a uno. Esto podría ser porque la función tiene el valor ya como parámetro, generado desde PHP, o porque lo lee del propio documento.

• Luego, la función cargarCarrito() tiene que enviar al servidor el elemento a agregar, para que lo guarde en algún lado. Esto se hace vía AJAX para no recargar la página, de la forma que más te guste: escribiéndolo en JavaScript, usando los métodos de JQuery, etc.

• El script que recibe los datos para agregar, lo agrega en una tabla de "carritos". Acá está bueno con el ID recuperar todo el producto y guardar la información completa. Cuando este script termina de guardar, lee todo el carrito y esto es lo que devuelve a la página.

• En la página, la respuesta a la petición AJAX tiene el estado actual del carrito: puede ser que reciba JSON desde el servidor, o XML o un formato propio o directamente la porción de HTML que hay que mostrar.

• Por último, en un elemento con un ID prestablecido, desde JavaScript se lee la respuesta y se pone visible al usuario. Si la respuesta es HTML bastará con un

...
document.getElementById("elemento").innerHTML = respuesta;
...

y si es JSON o XML, se leerá para procesarla y mostrarla.

Tu pregunta es muy genérica, así que solo puedo darte en general los pasos a seguir. Cuándo la empieces a escribir, luego de decidir la forma de implementarla, no dudes en preguntar cuestiones puntuales del código por acá, para obtener respuestas más específicas a tu problema específico de programación...

Saludos cordiales