I’m trying to be able to share a link including a modal with the product defined by the url. I’m using the modal provided by Jetstream.
I’m using livewire 2, laravel 8. AlpineJs 2.8.
I call the modal within the blade view and everything works well, my problem is that I can’t share the link to a specific product. This is the component I call inside a forelse that shows thumbnails of the products and opens the modal with products details:
<x-front.product-listed name="{{ $product->name }}" wire:click='showModal( {{ $product->id }} )' :key="'product-listed-'.$product->id" :key="$product->id" />
I’ve defined the following:
protected $queryString = [
'product'=>['except'=>''],
];
The blade component included in the view is:
<x-modal.product wire:model.defer="showEditModal" class="relative">...</x-modal>
The function that I use to populate the modal is called showModal:
public function showModal($product_id)
{
$showing = Product::find($product_id);
$this->product=$showing->id; // here I update the url to be able to share the direct link
$this->name = $showing->name;
$this->description = $showing->description;
$this->showEditModal = true;
}
I’ve added this listeners to the Controller:
protected $listeners = ['showModal'];
I don’t understand how to fire the function that opens the modal (showModal) with the proper product.
I’ve tried this with init and emit:
@if ($product)
<script>
Livewire.init('showModal',$product);
</script>
@endif
Of course, this doesn’t work.
I can’t wrap my head around this and may be I’m confusing the concepts. I’m a newbie with Livewire and Laravel in general. I’ve tried many things but probably some of them are totally misconceptions because I’m note native english speaker. Can you help me, please? Thanks!