Header Ads

Header ADS

Laravel category wise product display

 

//Product view category wise
  Route::get('/view-category-product/{category_slug}',  'viewProductByCategory')
  ->name('category.product.view');

//Controller code
   public function viewProductByCategory(string $category_slug)
    {
        $category = ProductCategory::where('slug', $category_slug)->first();

        if($category){
            $product = Product::where('product_category_id',$category->id)->get();
         
            return view('front.product.category-product-view', compact('product', 'category'));
        }else{
            return redirect('/');
        }  

    } //end method

//category lists blade code
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-6 g-4">
            @foreach($pcategories as $pcat)
            <div class="col d-flex justify-content-center text-center ">
                <div>
                 <a href="{{ route('category.product.view', ['category_slug' => $pcat->slug])}}">
                    <div class="bg-sky">
                        <img class="img-fluid"
                            src="{{asset('images/'.$pcat->image)}}"
                            alt="" style="width: 120px; height:120px; border-radius:50%;">
                    </div>

                    <div>
                        <h3 class="ezytor-heading-4 ezytor-fw-700 mt-1 mb-0">
                            {{$pcat->name}}
                        </h3>
                        <p class="ezytor-paragraph-7 text-ash m-0">
                            {{$productCount}} Products
                        </p>
                    </div>
                 </a>
                </div>
            </div>  
            @endforeach
        </div>

//product view blade code after click category
 <section class="ecoomerce-trending-items pb-4 pt-4 pb-lg-5">
    <div class="container manrope position-relative">
        <p style="font-size:25px; color:grey; font-weight:bold;">
            All {{$category->name}} Related Products
        </p>
   
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 gy-4 ">
            @if($product->isEmpty())
                <!-- If empty, show the 'Not Found' message -->
                <p style="color:red;">No products found in this category.</p>
            @else
                @foreach ( $product as $trendProd)
               
                    <div class="col-6">
                        <a href="{{url('/view-product/'.$trendProd->slug)}}">
                        <div class="card border-0">
                            <div class="position-relative d-inline-block">
                                <img class="w-100 ezytor-border-radius-12 d-sm-block productimg"
                                    src="{{asset('images/'. $trendProd->product_thumbnail)}}"
                                    alt="" >
                                <div class="heart-icon-2 position-absolute bg-dark">
                                    <svg width="16" height="14" viewBox="0 0 16 14" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M11.5411 0C10.0167 0 8.71418 1.08813 7.99855 1.83831C7.28291 1.08813 5.98327 0 4.45964 0C1.83345 0 0 1.83321 0 4.45739C0 7.34887 2.27709 9.21777 4.48 11.0255C5.52 11.8798 6.59636 12.7626 7.42182 13.7414C7.56073 13.9053 7.76436 14 7.97818 14H8.02036C8.23491 14 8.43782 13.9046 8.576 13.7414C9.40291 12.7626 10.4785 11.8791 11.5193 11.0255C13.7215 9.2185 16 7.3496 16 4.45739C16 1.83321 14.1665 0 11.5411 0Z"
                                            fill="white" />
                                    </svg>

                                </div>
                            </div>
                            <div class="card-body p-0 mt-3">
                                <h4 class="ezytor-heading-4 ezytor-fw-700 mb-0 ">
                                    {{$trendProd->title}}
                                </h4>
                                <p class="ezytor-paragraph-8  text-ash mt-0 mb-1">
                                    {{$trendProd->slug}}
                                </p>
                                {{-- <img src="https://besnik-space.fra1.digitaloceanspaces.com/ezytor/theme/7BqEBaJOHoV6UebsytSZlxd7Y7Jm3LgsHoSmbTEP.svg"
                                    alt=""> --}}

                                    @php
                                    $pReview = App\Models\ProductReview::first();
                                    @endphp

                                    <div class="stars">
                                        @php
                                            $rating = $pReview->star_count;
                                            $whole = floor($rating);
                                            $fraction = $rating - $whole;
                                        @endphp
           
                                        {{-- Whole stars --}}
                                        @for ($i = 0; $i < $whole; $i++)
                                            <i class="fas fa-star"></i>
                                        @endfor
           
                                        {{-- Half star --}}
                                        @if ($fraction >= 0.5)
                                            <i class="fas fa-star-half-alt"></i>
                                        @endif
           
                                        {{-- Empty stars --}}
                                        @for ($i = 0; $i < 5 - ceil($rating); $i++)
                                            <i class="far fa-star"></i>
                                        @endfor
                                   
                                    </div>
                                   
                                    <span class="ezytor-paragraph-7  text-ash ms-1">(18
                                    reviews)</span>
                                <p class="ezytor-paragraph-5 ezytor-fw-600 mt-1">
                                    ${{$trendProd->selling_price}}
                                </p>
                                <button
                                    class="w-100 addtoCart-btn rounded-pill ezytor-paragraph-7 ezytor-fw-600 text-white pt-2 pb-2 border-0 mt-2" id=addToCart>
                                    Add to Cart
                                </button>
                            </div>
                        </div>
                        </a>
                    </div>
                @endforeach
            @endif

         
        </div>
    </div>
</section>

No comments

Theme images by fpm. Powered by Blogger.