Livewore component re-rendering deleted item

class TestComponent extends Component
{
    public $item;

    public function mount() {
        // ...
    }

    public function remove_item() {
        $is_bundle = $this->item->itemable_type === 'Bundle';
        $uidentity = $is_bundle ? $this->item->itemable->bundle_uidentity : $this->item->itemable->variant_uidentity;

        try {
            app(CartService::class)->remove_item(app(CartService::class)->get_cart(), $uidentity, $is_bundle);
            $this->dispatch('cart-updated');
        } catch(Exception $e) {
            dd($e->getMessage());
        }
    }

    public function render()
    {
        return view('livewire.test-component');
    }
}

// test-component.blade.php
<div class="my-4 flex space-x-4 item-center">
    <button wire:click="remove_item">
        <i class="fas fa-close"></i>
    </button>
    <div class=""> 
    @if ($item->itemable instanceof App\Models\ProductVariant)
        <p class="text-sm text-gray-600 font-semibold">{{ $item->itemable->product->name }}</p>
        <p class="text-xs text-gray-400">{{ $item->itemable->name }}</p>
    @elseif ($item->itemable instanceof App\Models\Bundle)
        <p class="text-sm text-gray-600 font-semibold">{{ $item->itemable->name }}</p>
        <p class="text-xs text-gray-400">Bundle</p>
    @endif
    </div>
</div>

this component is used to display an individual item within a list of shopping cart items in a Livewire component. the remove_item method works correctly but the problem is when i click the button to remove an item, i get a 404 not found popup but when i refresh the page or check the database the item gets deleted. any help?

jj15

1 year ago

Level 10

It's likely because you're storing the item as a public property on the component which Livewire is then attempting to re-query from the database, leading to the 404 Not Found modal.

Instead, you can move the removal action to the parent component rendering the items.

croftCoder

1 year ago

Level 1

class TestComponent extends Component
{
    public $cart;
    protected $cart_service;
    protected $listeners = ['cart-updated' => '$refresh'];

    public function mount($cart) {
        $this->cart = $cart;
        $this->cart_service = app(CartService::class);
    }

    public function hydrate()
    {
        $this->cart_service = app(CartService::class);
    }

    public function remove_item($uidentity)
    {
        $item = CartItem::where('cart_item_uidentity', $uidentity)->first();

        if(!$item) {
            return;
        }

        $is_bundle = $item->itemable_type === 'Bundle';

        try {
            $this->cart_service->remove_item($this->cart, $uidentity, $is_bundle);
            $this->dispatch('cart-updated');
        } catch (Exception $e) {
            session()->flash('error', $e->getMessage());
        }
    }

    public function render()
    {
        return view('livewire.test-component');
    }
}

<!-- test-component.blade.php -->
<div>
    @forelse($cart->cart_items as $item)
    <div class="flex items-center my-4 space-x-4">
        <button wire:click="remove_item('{{ $item->cart_item_uidentity }}')">
            <i class="fas fa-close"></i>
        </button>
        <div class="">
            @if ($item->itemable instanceof App\Models\ProductVariant)
            <p class="text-sm text-gray-600 font-semibold">{{ $item->itemable->product->name }}</p>
            <p class="text-xs text-gray-400">{{ $item->itemable->name }}</p>
            @elseif ($item->itemable instanceof App\Models\Bundle)
            <p class="text-sm text-gray-600 font-semibold">{{ $item->itemable->name }}</p>
            <p class="text-xs text-gray-400">Bundle</p>
            @else
            <p class="text-sm text-gray-600 font-semibold text-red-600">Unknown Item</p>
            @endif
        </div>
    </div>
    @empty
    <p class="text-sm text-gray-500">cart empty</p>
    @endforelse
</div>

class CartService
{
    // ... other methods

    public function remove_item(Cart $cart, $uidentity, $is_bundle = false) {
        $cart->cart_items()->where('cart_item_uidentity', $uidentity)->delete();

        $this->update_cart($cart);
    }

    public function update_cart(Cart $cart) {
        $cart->save();
    }
}

<!-- cart.blade.php -->
<x-layouts.base>
    <livewire:test-component :cart="$cart" />
</x-layouts.base>

still getting the 404 error popup on deleting item,

jj15

1 year ago

Level 10

@croftCoder It looks like your @forelse loop isn't using the wire:key attribute, which helps Livewire keep track of the elements rendered within the loop. Can you please try adding it?

croftCoder

1 year ago

Level 1

@jj15 problem still persists after adding wire:key like so <div class="flex items-center my-4 space-x-4" wire:key="{{ $item->id }}">. i solved it by changing $this->dispatch('cart-updated'); to $this->emit('cart-updated'); but another component CartSummary doesn't get updated unless i reload page.

class CartSummary extends Component
{
    public $cart;

    protected $listeners = ['cart-updated' => '$refresh'];

    public function mount($cart)
    {
        $this->cart = $cart;
    }

    public function render()
    {
        return view('livewire.cart-summary', [
            'total' => $this->cart->total,
            'items_count' => $this->cart->items_count,
        ]);
    }
}

even with this return view('livewire.cart-summary'); still doesn't get updates real-time

jj15

1 year ago

Level 10

@croftCoder I see... It now appears to me that you're using Livewire v2, where dispatch() doesn't even exist (as far as I know). Is this an existing project or a new one? Either way, it's highly advisable to make the upgrade to v3, for both security and stability reasons.

croftCoder

1 year ago

Level 1

@jj15 it's new Laravel 12 project. finally fixed, problem ws caused by another livewire component re-rendering the deleted item. thanks

1 like

Please or to participate in this conversation.