Crear carrito sin recarga

Php - Javascript - Html

14/10/2022

carrito de compras sin recargar

Descripción

Vamos a crear un fantástico carrito de compras sin recarga a traves de AJAX, además de incluir un efecto de inserción de articulo muy llamativo!
Para realizar este carrito de compras sin recarga vamos a necesitar vamos a contar con varios archivos.
Index.php
cart.php
borrarcarro.php
count_carrito.php
modal_carrito.php
script.js
style.css
Una vez tengamos organizados nuestros archivos vamos a insertar el código a cada uno de ellos. Ya se que al principio os asustará ver tanto archivos pero os aseguro que no es ni mucho menos lo que parece ya que es un código de lo más sencillo y la verdad que 100% útil para crear nuestro carrito de compras sin recarga a traves de ajax.

Vamos a dirigirnos a nuestro archivo principal Index.php y completarlo.
Aquí lo que tendremos que hacer es ir a nuestro contenedor de artículos para mostrar los artículos que tenemos en nuestra base de datos, si no tenéis estos artículos en una base de datos tambien podéis insertarlos de forma manual aunque esto os va a resultar mucho más pesado y lento.

 

   <-?php

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

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

    ?->

     

     <div id="mi_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">Detalles</button>

                <button id="al_carro" 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());

                    setTimeout(function() {count_carrito();}, 500);

                ">Añadir al carrito</button>

                <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 } ?->

 

Como podéis ver en este paso lo que estamos haciendo es un WHILE para mostrar nuestros artículos de nuestra base de datos.
Aquí lo que tenemos que tener en cuenta es que estamos añadiendo unos datos con INPUT y pasandolos en HIDDEN ya que son datos que necesitamos enviar a nuestro carrito de forma oculta.
Estos datos como veis son REF - PRECIO - TITULO - CANTIDAD y para mandarlos lo estamos haciendo a traves de un ONCLICK situado en nuestro botón de añadir al carrito.
Este onclick lo que hace es ejecutar una función enviando los valores de los input que tenemos ocultos.
En el mismo onclick tambien estamos ejecutando otra función que es la de count_carrito() la cual se encargará de contabilizar el total de productos que tenemos en nuestro carrito y mostrarlo en el contenedor (más adelante veremos estos pasos).
A este mismo botón tambien estamos añadiendole una id que se llame al_carro, esto es para que cuando presionemos se ejecute la animación con el efecto de añadir el producto al carrito.
Ahora vamos a insertar el contenido de la función que ejecutamos al presionar sobre añadir al carrito que es envia_carrito().

Abriremos nuestro archivo script.js y añadiremos las siguientes lineas
 

 

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

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

     $.ajax({

    data:parametros,

    url:'auxiliar/cart.php',

    type: 'POST',

    beforeSend: function () {

    },

    success: function (response) {  

//     todo ok

    },

    error: function (response, error) {

//     error

    }

});

}

 

 

Aquí lo que estamos haciendo es ejecutar el ajax a través de la función de envia_carrito() donde estamos recogiendo todos los datos que le estamos pasando a traves del onclick y todo esto lo estamos mandando a nuestro carrito cart.php el cual es el que se encarga de insertar el carrito a nuestra sesión.
Como ya sabeis este carrito va a traves de sesiones entonces todo el contenido se almacenará en una sesión hasta que el carrito sea enviado o borrado.

Ahora vamos a nuestro carrito!!
abrimos cart.php y aqui insertamos el codigo de nuestro carrito
 

 

<-?php 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']){

                $donde=$i;

               }

            }

 

            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;

        }

    }


 

$_SESSION['carrito']=$carrito_mio;

 

//todo ok

 

}else{

 

//error

}
 

?->

 

Como podéis ver tenemos un carrito el cual se encarga de insertar todo el contenido en nuestra sesión y almacenar todos los artículos que vamos enviando a la cesta.
Ahora queremos mostrar este carrito entonces lo haremos en un modal donde mostraremos el contenido, para ello creamos en nuestro index.php un modal el cual tiene que tener el siguiente código.
 

 

<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 carrito</h5>

        <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">Cerrar</button>

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

      </div>

    </div>

  </div>

</div>

 

 

Aquí tenemos varias partes importantes, la primera el DIV donde mostraremos el contenido del carrito al cual le hemos añadido la ID mi_carrito, y el segundo paso importante es el botón de vaciar carrito donde ejecutaremos dos funciones, la primera borrar_carrito() la cual se encargará de borrar nuestro carrito y la siguiente count_carrito() que se encargara de actualizar nuestro carrito y mostrarnos la cuenta actual de los productos que tenemos en nuestro carrito.

Ahora vamos a mostrar nuestro contenido del carrito en el DIV mi_carrito
Para ello volveremos a nuestro script.js e incluiremos las siguientes lineas.
 

 

        function consultar_carrito() {

        var parametros = {};

        $.ajax({

        data:parametros,

        type: 'POST',

        url: 'auxiliar/modal_carrito.php',

        success: function(data) {

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

        }

        });

        }

 

 

Estamos creando una función la cual se encarga de mostrarnos nuestro carrito y esta función la ejecutamos a taves de consultar_carrito() el cual ejecutaremos desde nuestro NAVBAR al presionar sobre MI CARRITO
Como veis esta función esta haciendo una consulta a modal_carrito.php y esta devolviendo los datos a el DIV mi_carrito.
Antes de insertar el contenido de modal_carrito.php vamos a crear el onclick para ejecutar el modal a la vez que actualice el contenido de nuestro carrito.
Para ello solo tendremos que insertar esta linea en nuestro index.php
 

 

     <a class="nav-link" data-bs-toggle="modal" data-bs-target="#modal_cart" style="cursor:pointer;" onclick="consultar_carrito();"><i class="fas fa-shopping-cart"></i> <span id="count_carrito" style="color: red; font-weight:bold;"></span> Mi Carrito</a>

 

 


Como veis solo estamos añadiendo un onclick con la función de consultar_carrito() a nuestro botón de Mi carrito.
Ahora nos vamos a nuestro archivo mocal_carrito.php y aquí pondremos el siguiente código.

 

 

<?-php session_start();

 

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

  $carrito_mio=$_SESSION['carrito'];

  }

 

?->
 

<ul class="list-group mb-3">

  <-?php

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

  $total=0;

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

                    if(isset($carrito_mio[$i])){

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

  ?->

 

                <li class="list-group-item justify-content-between px-4">

    <div class="row" >

      <div class="col-10 p-0" style="text-align: left; color: #000000;"><h6 class="my-0">Cantidad: <-?php echo $carrito_mio[$i]['cantidad'] ?-> : <-?php echo $carrito_mio[$i]['titulo']; ?-></h6>

      </div>

      <div class="col-2 p-0"  style="text-align: right; color: #000000;" >

      <span class="text-muted"  style="text-align: right; color: #000000;"><-?php echo $carrito_mio[$i]['precio'] * $carrito_mio[$i]['cantidad'];    ?-> €</span>

      </div>

    </div>

  </li>

  <-?php

  $total=$total + ($carrito_mio[$i]['precio'] * $carrito_mio[$i]['cantidad']);

  }

                }

  }

  }

  ?->

  <li class="list-group-item d-flex justify-content-between">

  <span  style="text-align: left; color: #000000;">Total (EUR)</span>

  <strong  style="text-align: left; color: #000000;"><-?php

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

  $total=0;

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

                    if(isset($carrito_mio[$i])){

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

  $total=$total + ($carrito_mio[$i]['precio'] * $carrito_mio[$i]['cantidad']);

                }

  }}}

                if(!isset($total)){$total = '0';}else{ $total = $total;}

  echo $total; ?-> €</strong>

  </li>

</ul>

 

Aquí estamos ejecutando nuestro carrito y mostrando todo su contenido de forma que cada vez que presionen sobre consultar_carrito() este siempre estará actualizado.
Ahora solo nos quedan dos partes pequeñas.
nos dirigiremos a count_carrito.php y aqui insertaremos el siguiente código.
 

 

<?-php

session_start();


 

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

  $carrito_mio=$_SESSION['carrito'];

  }

 

     

 

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

  $total=0;

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

                    if(isset($carrito_mio[$i])){

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

 

$total=$total + ($carrito_mio[$i]['precio'] * $carrito_mio[$i]['cantidad']);

 

$antidad_final += $carrito_mio[$i]['cantidad'];

}

              }

}

}


 

                if(!isset($total)){$total = '0';}else{ $total = $total;}

echo $antidad_final;

?->

 

 

 

Aquí unicamente estamos realizando la consulta del total de productos que tenemos en nuestro carrito y esta consulta se ejecutará a través de count_carrito() la función que vamos a insertar ahora en script.js
 

 

      function count_carrito() {

        var parametros = {};

        $.ajax({

        data:parametros,

        type: 'POST',

        url: 'auxiliar/count_carrito.php',

        success: function(data) {

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

        }

        });

        }

 

 

Una función sencilla que solo se encarga de hacer una consulta de count_carrito.php y motrar el resultado en la ID count_carrito la cual pondremos en nuestro NAVBAR al lado de Mi carrito con un spam
 

 

<span id="count_carrito" style="color: red; font-weight:bold;"></span>

 

 

Y para finalizar solo nos queda borrar nuestro carrito y para ello en script.js añadiremos la siguiente función
 

 

      function borrar_carrito() {

        var parametros = {};

        $.ajax({

        data:parametros,

        type: 'POST',

        url: 'auxiliar/borrarcarro.php',

        success: function(data) {

       

          consultar_carrito();

 

        }

        });

        }

 

 


La cual ejecutará borrarcarro.php que borrara nuestro carrito de forma inmediata.
abriremos borrarcarro.php e introduciremos las siguiente lineas.

 

 

<?-php session_start();

unset($_SESSION['carrito']);

?->

 

 


Y con estos pasos ya tendremos nuestro carrito totalmente funcionando.
Recuerda que a continuación os dejo todo el contenido descargable para que podáis usarlo sin problema.
Recuerda ver el video donde os explico mucho mejor como realizar este curso.

DESCARGAR CONTENIDO

Ú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

  • Crear tienda online gratis
  • Como crear una tienda online
  • Vulnerabilidades explotadas
  • 10 nuevas vulnerabilidades explotadas activamente añadidas al catálogo de CISA
  • Google neutraliza el mayor ataque DDoS HTTPS
  • En sólo dos minutos, el ataque pasó de 100.000 RPS
  • Nitrokod infecta a más de 111.000 usuarios
  • Minar activamente criptomonedas
  • 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.