It seems like you're encountering an issue where the wire:confirm directive is not updating reactively as the quantity changes. This could be due to Livewire's DOM-diffing not picking up the change in the attribute conditionally.
One way to handle this is to move the confirmation logic into your Livewire component's method. Instead of using wire:confirm in the blade template, you can check the quantity in the updateQuantity method and use JavaScript to prompt the user for confirmation when necessary.
Here's how you could adjust your Livewire component:
public function updateQuantity($itemId, $operation)
{
$cartContent = $this->getCartContentByItemId($itemId); // Assuming you have a method to get the cart content
if ($operation === 'decrease' && $cartContent->quantity == 1) {
$this->confirmRemoval($itemId);
} else {
// Your existing logic to update the quantity
$this->adjustQuantity($itemId, $operation);
}
}
public function confirmRemoval($itemId)
{
$this->dispatchBrowserEvent('confirm-removal', ['itemId' => $itemId]);
}
And in your blade template, you would listen for the confirm-removal event and show a confirmation dialog using JavaScript:
<button
wire:click="updateQuantity({{ $cartContent->item_id }},'decrease')"
>
MINUS
</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('confirm-removal', event => {
if (confirm('Remove from cart?')) {
@this.call('adjustQuantity', event.detail.itemId, 'decrease');
}
});
});
</script>
In this solution, when the quantity is 1 and the user clicks the MINUS button, the updateQuantity method dispatches a browser event that triggers a confirmation dialog. If the user confirms, it then calls another method adjustQuantity to actually decrease the quantity.
Make sure to replace adjustQuantity with the actual method you use to update the quantity in your cart, and ensure that getCartContentByItemId is a method that retrieves the cart content by item ID.
This approach ensures that the confirmation logic is handled by the component and is always in sync with the current state of the cart content.