Hello, Can you share your component code, only then can get a better understanding?
and there is a closed issue (https://github.com/livewire/livewire/issues/1630) you can get some help too.
baalc16 liked this reply
<div class="shop-products-wrapper">
<div class="tab-content">
<div id="grid-view" class="tab-pane fade active show" role="tabpanel">
<div class="product-area shop-product-area">
<div class="row">
@forelse($products as $product)
<div class="col-lg-4 col-md-4 col-sm-6 mt-40" :wire:key="{{ $product->id }}">
<!-- single-product-wrap start -->
<div class="single-product-wrap">
<div class="product-image">
<a href="{{ url($product->category_slug.'/'.$product->sous_category_slug.'/'.$product->slug) }}">
<img src="{{ url('storage/'.$product->first_image) }}" alt="image">
</a>
{{-- <span class="sticker">New</span> --}}
</div>
<div class="product_desc">
<div class="product_desc_info">
<div class="product-review">
<h5 class="manufacturer">
<a href="{{ $product->category_slug }}">{{ $product->category }}</a>
</h5>
<div class="rating-box">
<ul class="rating">
@if($product->rating >= 1 && $product->rating < 2)
<li><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
@elseif($product->rating >= 2 && $product->rating < 3)
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
@elseif($product->rating >= 3 && $product->rating < 4)
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
@elseif($product->rating >= 4 && $product->rating < 5)
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
@elseif($product->rating >= 5 && $product->rating < 6)
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
@else
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
<li class="no-star"><i class="fa fa-star-o"></i></li>
@endif
</ul>
</div>
</div>
<h4><a class="product_name" href="{{ url($product->category_slug.'/'.$product->sous_category_slug.'/'.$product->slug) }}">{{ $product->excerpt() }}</a></h4>
<div class="price-box">
<span class="new-price">{{ number_format($product->price) }} FCFA</span>
</div>
</div>
<div class="add-actions">
<ul class="add-actions-link">
<livewire:add-product :product="$product" />
<livewire:wishlists :product="$product" />
<livewire:modal :product="$product" />
</ul>
</div>
</div>
</div>
<!-- single-product-wrap end -->
</div>
@empty
@endforelse
</div>
</div>
</div>
</div>
</div>
<!-- shop-products-wrapper end -->
</div>
<div class="col-lg-3 order-2 order-lg-1">
<div class="sidebar-categores-box">
<div class="sidebar-title">
<h2>Filtrer par</h2>
</div>
<div class="filter-sub-area pt-sm-10 pt-xs-10">
<h5 class="filter-sub-titel">Sous Categories</h5>
<div class="categori-checkbox">
<form action="#">
<ul>
@foreach($sousCategory as $sousCategory)
<li><input type="checkbox" value="{{ $sousCategory->slug }}" wire:model="inputSousCat" :wire:key="{{ $sousCategory->id }}"> <a href="javascript:void(0)">{{ $sousCategory->label }} ({{ $sousCategory->products->count() }})</a></li>
@endforeach
</ul>
</form>
</div>
</div>
<div class="filter-sub-area pt-sm-10 pt-xs-10">
<h5 class="filter-sub-titel">Trier</h5>
<div class="categori-checkbox">
<form action="#">
<ul>
<li><input type="radio" name="productSort" value="low-to-high" wire:model="inputProduct"><a href="javascript:void(0)">Prix (Bas > Haut)</a></li>
<li><input type="radio" name="productSort" value="high-to-low" wire:model="inputProduct"><a href="javascript:void(0)">Prix (Haut > Bas)</a></li>
<li><input type="radio" name="productSort" value="rating" wire:model="inputProduct"><a href="javascript:void(0)">Note (Plus bas)</a></li>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community