Estoy trabajando en una plataforma de comercio electrónico basada en Laravel y Livewire usando el carrito de compras bumbummen99. Mi problema es que solo puedo agregar artículos al carrito, pero por alguna razón no puedo actualizar (aumentar o disminuir) la cantidad, eliminar un artículo del carrito. No tengo ningún error en la consola, no hay actividad de red al hacer clic en cualquiera de los botones. He comprobado que todo el HTML está encerrado en uno <div>. Revisé un par de otras páginas ( aquí, aquí, aquí ) pero no tuve suerte. También intenté cambiar el cable que no funciona: haga clic para seguir el formato del cable: haga clic en agregar al carrito que funciona, eso tampoco ayudó. Cualquier ayuda es muy apreciada.
Aquí está mi tabla de listado de productos
@extends('layouts.app')
@section('template_linked_css')
<link href="{{asset('front/css/cart.css')}}" rel="stylesheet">
@endsection
@section('content')
<main class="bg_gray">
@livewire('cart-listing')
</main>
@endsection
Aquí está mi componente CartListing:
use App\Models\Service;
use Gloudemans\Shoppingcart\Facades\Cart;
use Livewire\Component;
class CartListing extends Component
{
public $products;
public array $quantity = [];
public function mount()
{
$this->products = Cart::content();
foreach ($this->products as $product) {
$this->quantity[$product->id] = 1;
}
}
public function addToCart($product_id)
{
$product = Product::findOrFail($product_id);
Cart::add(
$product->id,
$product->name,
$this->quantity[$product_id],
$product->price
);
$this->emit('cart_updated');
}
public function increase($rowId){
Cart::update($rowId, 1);
$this->emit('cart_updated');
}
public function decrease($rowId){
Cart::update($rowId, -1);
$this->emit('cart_updated');
}
public function deleteItem($rowId){
Cart::remove($rowId);
$this->emit('cart_updated');
}
public function render()
{
$cart = Cart::content();
$cart_count = Cart::content()->count();
$cart_total = Cart::subtotal();
return view('livewire.cart-listing', compact('cart', 'cart_count', 'cart_total'));
}
}
Aquí está mi vista de lista de carritos de Livewire:
<div>
<div class="container margin_30">
<div class="page_header">
<div class="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li>Cart</li>
</ul>
</div>
<h1>Cart</h1>
</div>
<!-- /page_header -->
<table class="table table-striped cart-list">
<thead>
<tr>
<th>
Product
</th>
<th>
Price
</th>
<th>
Quantity
</th>
<th>
Subtotal
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr>
<td>
<div class="thumb_cart">
<img src="{{asset('front/img/products/product_placeholder_square_small.jpg')}}" data-src="{{asset('front/img/products/shoes/1.jpg')}}" class="lazy" alt="Image">
</div>
<span class="item_cart">{{$product->name}}</span>
</td>
<td>
<strong>£ {{$product->price}}</strong>
</td>
<td>
<div class="numbers-row">
<input type="text" value="{{$product->qty}}" id="quantity_1" class="qty2" name="quantity_1">
<div wire:click="increase({{$product->rowId}})" class="inc button_inc">+</div>
<div wire:click="decrease({{$product->rowId}})" class="dec button_inc">-</div>
</div>
</td>
<td>
<strong>£ {{number_format($product->price * $product->qty, 2,'.',',')}}</strong>
</td>
<td class="options">
<a wire:click="deleteItem({{$product->rowId}})"><i class="ti-trash"></i></a>
</td>
</tr>
@empty
<tr>
<td colspan="3">
<span class="item_cart">Your cart is empty</span>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<!-- /container -->
<div class="box_cart">
<div class="container">
<div class="row justify-content-end">
<div class="col-xl-4 col-lg-4 col-md-6">
<ul>
<li>
<span>Subtotal</span> $ {{$cart_total}}
</li>
<li>
<span>Total</span> $ {{$cart_total}}
</li>
</ul>
<a href="cart-2.html" class="btn_1 full-width cart">Proceed to Checkout</a>
</div>
</div>
</div>
</div>
</div>
Mi layouts.app también tiene los enlaces livewire:
<head>
@livewireStyles
</head>
<body >
@livewireScripts
</body>
Solución del problema
Si está pasando una cadena al wire:clickmétodo, debe encapsularla con comillas simples como esta
wire:click="increase('{{$product->rowId}}')"
No hay comentarios:
Publicar un comentario