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

Excelente guia !!!
Super post. Do you have any other ones you can stick? I like it. 🙂