Support the ongoing development of Laravel.io →
posted 2 years ago
0

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.

1
<div class="content-wraper pt-60 pb-60 pt-sm-30"> <div class="container"> <div class="row"> <div class="col-lg-9 order-1 order-lg-2"> <!-- Begin Li's Banner Area --> <div class="single-banner shop-page-banner"> <a href="#"> <img src="{{ URL::asset('assets/front/images/bg-banner/2.jpg') }}" alt="Li's Static Banner"> </a> </div>
            <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 &gt; Haut)</a></li>
                                <li><input type="radio" name="productSort" value="high-to-low" wire:model="inputProduct"><a href="javascript:void(0)">Prix (Haut &gt; 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>
0

Sign in to participate in this thread!

Native PHP

Your banner here too?

BAALC baalc16 Joined 20 Jul 2023

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.