Crear un carrito de compras sin recargar

Php - Javascript - Html

30/09/2022

Crear un carrito de compras sin recargar

Descripción

Hoy vamos a crear un fantástico carrito de compras pero en esta ocasión lo vamos a sin que realicemos ninguna recarga en nuestra página para insertar los datos en nuestro carrito.
Esto que quiere decir? muy sencillo lo que vamos ha realizar es que cuando presionemos sobre el botón de añadir al carrito este articulo se va a sumar al carrito inmediatamente sin realizar ninguna recarga de la página, normalmente muchas páginas que cuentan con carritos lo que hacen es al pulsar sobre añadir al carrito dirigirse a otra página insertar el contenido y volver a la página anterior...ahora contamos con otros recursos que hacen que el sistema trabaje más fluido sin necesidad de realizar dichas recargas.

A continuación os dejo los pasos que tenéis que seguir para que podáis insertar vuestro carrito de compras en vuestra página web o tienda online.

Primer paso:
Creamos index.php
Arrancamos nuestras sesiones e incluimos nuestra conexión para poder mostrar nuestros artículo de nuestra base de datos.

 

    session_start();

  include ("conexion.php");

  


A continuación mostramos estos artículos para que podamos realizar nuestros pedidos.
Para ellos hacemos una consulta a nuestra base de datos trayéndonos el contenido y mostrándolo con un WHILE

 

<div class="album py-5 bg-light">

<div class="container">

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    <-?php

    $buscardor=mysqli_query($conexion,"SELECT * FROM articulos");

    while($resultado = mysqli_fetch_assoc($buscardor)){

    ?->

      <div class="col-4">

        <div class="card shadow-sm">

          <img src="img/<-?php echo $resultado["img"]; ?->.jpg" alt="">

          <div class="card-body">

            <p class="card-text"><-?php echo $resultado["nombre"]; ?->p>

            <div class="d-flex justify-content-between align-items-center">

              <div class="btn-group">

                <button type="button" class="btn btn-sm btn-outline-secondary">Detallesbutton>

                <button type="submit" class="btn btn-sm btn-outline-secondary"  onclick=" envia_carrito($('#ref<-?php echo $resultado['id']; ?>').val(),$('#titulo<-?php echo $resultado['id']; ?>').val(),$('#precio<-?php echo $resultado['id']; ?->').val(),$('#cantidad<-?php echo $resultado['id']; ?->').val());">Añadir al carritobutton>

                <input name="ref" type="hidden" id="ref<-?php echo $resultado["id"]; ?->" value="<-?php echo $resultado["id"]; ?->" />                          

                <input name="precio" type="hidden" id="precio<-?php echo $resultado["id"]; ?>" value="<-?php echo $resultado["precio"]; ?->" />

                <input name="titulo" type="hidden" id="titulo<-?php echo $resultado["id"]; ?->" value="<-?php echo $resultado["nombre"]; ?->" />

                <input name="cantidad" type="hidden" id="cantidad<-?php echo $resultado["id"]; ?->" value="1" class="pl-2" />

              div>

              <small class="text-muted"><-?php echo $resultado["precio"]; ?->€small>

            div>

          div>

        div>

      div>

    <-?php } ?->

  div>

div>

div>

 


En este apartado tenemos dos parte muy importante, la primera nuestra consulta donde nos estamos trayendo todos los artículos de nuestra tabla ARTICULOS y la segunda el onclick que estamos añadiendo al botón de AÑADIR AL CARRITO el cual esta ejecutando una función a la que le esta pasando los contenidos de REF, PRECIO, TITULO y CANTIDAD.

El siguiente paso es crear la función que estamos llamando con el ONLICK la cual se llama envia_carrito

 

function envia_carrito(ref,titulo,precio,cantidad) {

  var parametros = {"ref":ref,"titulo":titulo,"precio":precio,"cantidad":cantidad};

     $.ajax({

    data:parametros,

    url:'cart.php',

    type: 'POST',

    beforeSend: function () {

     

    },

    success: function (response) {  

       

    Swal.fire('Hecho!',

    'Insertado al carrito.',

    'success'

    );

       

    },

    error: function (response, error) {

     

    Swal.fire(

    'Error!',

    'Se ha producido un error, intentelo mas tarde.',

    'error'

     );

 

    }

});

}

 


Tal y como veis en esta función lo que estoy haciendo es mandar todo el contenido a cart.php para que reciba los datos de los input y los añada a la sesión del carrito la cual vamos a crear a continuación.
Vamos a crear cart.php
e insertamos el carrito

 

session_start();



if(isset($_SESSION['carrito']) || isset($_POST['titulo'])){

    if(isset($_SESSION['carrito'])){

        $carrito_mio=$_SESSION['carrito'];

        if(isset($_POST['titulo'])){

            $titulo=$_POST['titulo'];

            $precio=$_POST['precio'];

            $cantidad=$_POST['cantidad'];

            $ref=$_POST['ref'];

            $donde=-1;

            for($i=0;$i<=count($carrito_mio)-1;$i ++){

               if($ref==$carrito_mio[$i]['ref']){

               }

            }

            if($donde != -1){

                $cuanto=$carrito_mio[$donde]['cantidad'] + $cantidad;

                $carrito_mio[$donde]=array("titulo"=>$titulo,"precio"=>$precio,"cantidad"=>$cuanto,"ref"=>$ref);

            }else{

                $carrito_mio[]=array("titulo"=>$titulo,"precio"=>$precio,"cantidad"=>$cantidad,"ref"=>$ref);

            }

        }

    }else{

        $titulo=$_POST['titulo'];

        $precio=$_POST['precio'];

        $cantidad=$_POST['cantidad'];

        $ref=$_POST['ref'];

        $carrito_mio[]=array("titulo"=>$titulo,"precio"=>$precio,"cantidad"=>$cantidad,"ref"=>$ref);    

    }

    if(isset($_POST['cantidad'])){

        $id=$_POST['id'];

        $cuantos=$_POST['cantidad'];

        if($cuantos<1){

            $carrito_mio[$id]=NULL;

        }else{

            $carrito_mio[$id]['cantidad']=$cuantos;

        }

    }

    if(isset($_POST['id2'])){

        $id=$_POST['id2'];

        $carrito_mio[$id]=NULL;

    }

$_SESSION['carrito']=$carrito_mio;

}

if(isset($_SESSION['carrito'])){

for($i=0;$i<=count($carrito_mio)-1;$i ++){

if($carrito_mio[$i]!=NULL){

$totalc = $carrito_mio['cantidad'];

$totalc ++ ;

$totalcantidad += $totalc;

}

}

 

return response('200',$response,'OK');

 

}else{

return response('400','Algo ha ido mal!','KO');

}

 

 

 

Una vez creado nuestro carrito ahora pasaremos a la parte del modal donde se mostrará nuestro carrito actual y para ellos volveremos a nuestro index.php para inserta el contenido que falta.
Ahora vamos crear la función que se encargará de traer el contenido al modal
primero el modal
 

 

<div class="modal fade" id="modal_cart" tabindex="-1"  aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Mi carritoh5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">button>

      div>

      <div class="modal-body">

        <div>

          <div class="p-2">

         

 

              <div id="mi_carrito">div>

 

          div>

        div>

      div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrarbutton>

        <a type="button" class="btn btn-primary" onclick="borrar_carrito();">Vaciar carritoa>

      div>

    div>

  div>

div>

 

 


Como veis en el modal tenemos un DIV con el ID MI_CARRITO aquí es donde vamos a mostrar todo el contenido de nuestro modal y para ello vamos con la función que se encargará de ello.
Creamos la función CONSULTA_CARRITO

 

        function consultar_carrito() {

        var parametros = {};

        $.ajax({

        data:parametros,

        type: 'POST',

        url: 'modal_carrito.php',

        success: function(data) {

        document.getElementById("mi_carrito").innerHTML = data;

        }

        });

        }

 

 


Como veis es una función muy sencilla y muy útil pero una cosa que tienes que tener en cuenta es en el botón que abre el modal añadirle un ONCLIK ejecutando consultar_carrito(); para que cada vez que presiones para abrir el modal se ejecute esta función.
Y ahora vamos con nuestro ultimo paso que se trata de borrar el carrito
primero añadiremos la función para realizar la llamada
 

 

        function borrar_carrito() {

        var parametros = {};

        $.ajax({

        data:parametros,

        type: 'POST',

        url: 'borrarcarro.php',

        success: function(data) {

       

          consultar_carrito();

 

        }

        });

        }

 

 


Como veis es igual que la anterior una llamada muy sencilla y esta llamada la hacemos a borracarro.php el cual tiene que tener el siguiente contenido.

 

session_start();

unset($_SESSION['carrito']);

 


Y con estos pasos ya tendrías tu carrito funcionando sin problema.
Te recomiendo que veas el vídeo donde vas a entender mucho mejor los pasos para que tu carrito funcione correctamente

A continuación te dejo los enlaces para que descargues todo el contenido de este tutorial

DESCARGAR BASE DE DATOS Y CARRITO

 

Últimas noticias

  • Como aprender programación web
  • Aprende fácilmente
    Html
  • Nitrokod infecta a más de 111.000 usuarios
  • Minar activamente criptomonedas
    Actualidad
  • Vulnerabilidades explotadas
  • 10 nuevas vulnerabilidades explotadas activamente añadidas al catálogo de CISA
    Actualidad

Categorías

Actualidad

  • Como aprender programación web
  • Aprende fácilmente
  • Nitrokod infecta a más de 111.000 usuarios
  • Minar activamente criptomonedas
  • Vulnerabilidades explotadas
  • 10 nuevas vulnerabilidades explotadas activamente añadidas al catálogo de CISA
  • Crear página web GRATIS
  • ¿Quieres una página web gratis?
  • Como borrar Windows.old
  • Recupera espacio de tu disco
Conexión PHP MYSQL
  • Conexión PHP MYSQL
  • Como crear Conexión PHP MYSQL
Subir archivos servidor - PHP y JQUERY
  • Subir archivos servidor - PHP y JQUERY
  • Como subir archivos servidor html
BUSCADOR con FILTROS php mysql
  • BUSCADOR con FILTROS php mysql
  • Filtros de búsqueda con php
Buscador PHP MYSQL AVANZADO
  • Buscador PHP MYSQL AVANZADO
  • Buscador Avanzado
Validar formulario con javascript Rápido y Sencillo
  • Como Validar formulario con javascript Rápido y Sencillo
  • Validar formulario
INSERTAR DATOS en MYSQL con PHP
  • INSERTAR DATOS en MYSQL con PHP - Español - Muy sencillo
  • insertar datos MYSQL con PHP
Carrito de compras con PHP
  • Carrito de compras con PHP Español
  • Carrito de compra en tu página web
BUSCADOR PHP MYSQL AVANZADO
  • Buscador PHP mysql avanzado SIN RECARGAR - Buscador en php y mysql fácil y rápido sencillo
  • BUSCADOR PHP MYSQL AVANZADO
Cursos de programación

© Copyright. Todos los derechos reservados.