Search code examples
laravellaravel-livewire

LaravelShoppingcart package, rowId property not working


Hi I'm using the LaravelShoppingcart package(https://github.com/bumbummen99/LaravelShoppingcart) and When I output {{ $item->rowId }} on the blade template I get the rowId on the browser when the blade is rendered but when I pass it in the qtyIncreased({{ $item->rowId}}) method and try to dump and die it in the livewire component it doesn't work. Mark you when I pass the $item->id and dump and die it, it works. The only error I'm getting is on the console and is:

Error handling response: TypeError: Cannot destructure property 'yt' of 'undefined' as it is undefined.
    at chrome-extension://cmedhionkhpnakcndndgjdbohmhepckk/scripts/contentscript.js:535:6 

Any assistance is highly appreciated.

Live wire blade component

 <div class="cart-overlay {{ $active ? 'transparent' : '' }}">
     <div class="cart {{ $active ? 'showCart' : '' }}">
         <span class="close-cart" wire:click="$emit('closeCart')">

             <i class="fas fa-window-close"></i>
         </span>
         <h2>Cart</h2>
         <div class="cart-content">
             @foreach ($cartContent as $item)
                 <div class="cart-item">
                     <img src="{{ $item->options->image }}" alt="product" />
                     <div>
                         <h4>{{ $item->name }}</h4>
                         <h5>${{ $item->price }}.99</h5>
                         <span class="remove-item">remove</span>
                     </div>
                     <div>
                         <i class="fas fa-chevron-up" wire:click="qtyIncreased({{ $item- 
                            >rowId }})"></i>
                         <p class="item-amount">{{ $item->qty }}</p>
                         <i class="fas fa-chevron-down"></i>
                     </div>
                 </div>
             @endforeach
         </div>
         <div class="cart-footer">
             <h3>your total : $ <span class="cart-total">{{ $cartTotal }}</span></h3>
             <button class="clear-cart banner-btn">clear cart</button>
         </div>
     </div>
 </div>

Livewire Class component

<?php

namespace App\Http\Livewire;

use Gloudemans\Shoppingcart\Facades\Cart;
use Livewire\Component;

    class CartOverlay extends Component
    {
    
        public $active = false;
        public function render()
        {
            $cartContent = Cart::content();
            $cartTotal = Cart::total();
            return view('livewire.cart-overlay', compact(['cartContent', 'cartTotal']));
        }
    
        public $listeners = [
            'showCart',
            'closeCart'
        ];
    
        public function qtyIncreased($rowId)
        {
            dd($rowId);
        }
    
        public function showCart()
        {
            $this->active = true;
        }
    
        public function closeCart()
        {
            $this->active = false;
        }
    }

Solution

  • I managed to fixed it, the parameter in the function should be passed in as a string. So, I added quotes around the parameter. Changed it from <i class="fas fa-chevron-up" wire:click="qtyIncreased({{ $item->rowId }})"></i>

                                           TO 
    
    
    <i class="fas fa-chevron-up" wire:click="qtyIncreased('{{ $item->rowId }}')"></i>