WYSIWYG link builder for an ecommerce store -- adds items to shopping cart when clicked

#1

Livewire + AlpineJS

Hi, I’m creating a WYSIWYG link builder for an ecommerce store. You select items from your ecomm store, and it’ll generate a link that automatically adds the items to your shopping cart when clicked.

image
image1162×464 40.8 KB

There’s always an empty “product picker” row, so you can add as many items as you want. When select a product, it’ll add a fresh, blank “product picker” row below it.

On the bottom of the page, I shows a "generated URL to put the items into the cart when the link’s clicked.

image
image1180×438 44.5 KB

Typically I’d accomplish this via Jquery, but I’m trying to accomplish it with Livewire + Alpine.

I have a cascading dropdown component in Livewire, which lets the user select the product from their store. But, I’m struggling w/ how to access the component values to generate the URL.

I emit a custom “ProductUpdate” event when the user clicks the “Add” button is clicked. And I have a JS listener that gets fired upon the event – BUT, how do I get the values of all the form field rows?

If this were JQuery, I’d just get the inputs by their element ID and I’d use an array for all the field IDs/names:

e.g. each “Add to cart” row would be a component w/ the same input names — name=“product[]”, name=“variant[]”, name=“quantity[]"

I can’t figure out how to accomplish this when the fields are via a Livewire component – I can get the Livewire component of the event that’s triggered, but how do I access the inputs within that element.

And should I use vanilla JS to generate the link (e.g. loop over the inputs, etc) or should I use AlpineJS? As far as I can tell, Alpine is really for accomplishing visual UI functions, and I’d just use AlpineJS to listen for the UpdateProduct event.

Appreciate any advice/help.

#2

Hi skinnyandbald

From the “Add” Action I think you are already emiting an event like this:

$this->emit('productUpdated', $this->products);

In the JS side you can catch this event with

window.livewire.on('productUpdated', (products) => {
    console.log(products)
    // Perform the URL generation..
});

…or you can skip the JS part and do all the process inside the Livewire Component:

use Illuminate\Support\Arr;

// ...

private function generateUrl()
{
    $this->product_url = 'https://example.com?' . Arr::query($this->products);
}

livewire-price-table-demo
livewire-price-table-demo1499×693 202 KB

I was working on a similar context this week, here’s a complete example based on your post:

#3

thanks, @ezp127! read through your notes and am giving it a whirl. really appreciate it.