Interact with component from javascript before xhr

#1

Hey!

I have a cart with cart items. Each item has a quantity input box. And next to it a [-] and [+] button to increase / decrease with 1.

<button wire:click.prevent="$set('quantity', {{ $quantity - 1 }})"> -</button>
<input wire:model="quantity" type="number">
<button wire:click.prevent="$set('quantity', {{ $quantity + 1 }})"> +</button>

All works fine.
The thing is, the + and - buttons feel a bit clunky, because you have to wait for the xhr roundtrip for the quantity in the input box to update.

I’ve looked at javascript integration, and found this $wire.increment() here https://laravel-livewire.com/docs/2.x/alpine-js, but that also runs on the server, so the issue stays, if I understand correctly.

  1. Is there a “livewire way” to set the quantity in the input box before the xhr roundtrip?
  2. Is there a way to do this with another component on the page? (E.g. a cart totals counter in the header)

Kind Regards,

John

#2

I look for solution too. When I update select2 value via JS on change event and @set magic action is too long time to change the value and ui is hang

#3

Hmm… Anyone please?

#4

Hey, @JohnT

If I understand correctly. You want to update the quantity of the card items offline (in the client side before the server side).

So, There is a trick (not tested). You can fetch the quantity of the specific product and store it into a session and by using alpineJs you can increase the amount of quantity and after the user hit order or pay or any action you can make your logic in the server side (Livewire Component) and make sure the validation passes and the quantity available …

PS: I can’t think of logic right now, but you can figure that out.