Tutorial POS Restaurante – Laravel + Vue.js Parte 5 : Manejo de Carritos

Iconos de Material Desing

Agregar una linea de código en el Header de blade para poder cargar los iconos

resources/views/welcome.blade.php

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Vue.js (Frontend)

template

Caja de carrito

<div class="col-md-4 order-md-2 mb-4">
            <h4 class="d-flex justify-content-between align-items-center mb-3">
              <span class="text-muted">Carrito</span>
              <span class="badge badge-secondary badge-pill">{{listCarrito.length}}</span>
            </h4>
            <ul class="list-group mb-3">
              <li class="list-group-item d-flex justify-content-between lh-condensed">
                <div>
                  <h6 class="my-0">Producto</h6>
                  <small class="text-muted"></small>
                </div>
                <span class="text-muted">{{listCarrito.lentgh}}</span>
              </li>
              <li v-for="(itemcart,i) in listCarrito" class="list-group-item d-flex justify-content-between lh-condensed">
                <div>
                  <h6 class="my-0">{{itemcart.nombre}}</h6>
                  <small class="text-muted">{{itemcart.categoria}}</small>
                </div>

                <div>
                  <div>
                    <i class="material-icons"  v-on:click="cambiarCantidad(i,false)">remove_circle_outline</i>
                    <span class="text-muted"> {{itemcart.cant}}</span>
                    <i class="material-icons"  v-on:click="cambiarCantidad(i, true)">add_circle_outline</i>
                  </div>
                  <span class="text-muted"> {{convertMoney(itemcart.cant * itemcart.precio)}}</span>
                </div>

                <i class="material-icons"  v-on:click="deleteItem(i)">delete</i>

              </li>

              <li class="list-group-item d-flex justify-content-between">
                <span>Total (PESOS)</span>
                <strong> {{onViewTotal()}}</strong>
              </li>
            </ul>

          </div>

Botón de producto para agregar carrito

<a href="#" class="btn btn-primary" v-on:click="addCart(prod)">{{convertMoney(prod.prod_price)}}</a>

data

listCarrito:[]

Methods

función para convertir en formato de monedas

convertMoney(value){

          const formatterPeso = new Intl.NumberFormat('es-CO', {
             style: 'currency',
             currency: 'COP',
             minimumFractionDigits: 0
           })
           let valueFinal = formatterPeso.format(value);


           return valueFinal

          },

Agregar carritos

addCart(item){
            //this.listCarrito.push(item)

            const itemcar = {
              id : item.prod_id,
              nombre : item.prod_name,
              categoria: item.cat_nombre,
              cant: 1,
              precio: item.prod_price
            }

            this.listCarrito.push(itemcar)
            //alert(JSON.stringify(item))
          },

Eliminar item de carrito

deleteItem(i){ this.listCarrito.splice(i,1) },

Cambiar cantidad del producto

cambiarCantidad(i,type){

              // sacar variable de carrito
              const dataCar = this.listCarrito

              // sacar la cantidad de producto
              let cantd = dataCar[i].cant;

              if (type) {
                cantd = cantd + 1
              }
              else if (type==false&&cantd>=1) {
                cantd = cantd - 1
              }

              if ((type==false&&cantd>=1)||type) {
                dataCar[i].cant = cantd
                this.listCarrito
              }


          },

Sumar total de todos los productos

onViewTotal(){
            let total = 0
            this.listCarrito.map((data)=>{
              total = total + (data.cant * data.precio)
            })

            return this.convertMoney(total)
          }