Laravel 11 E-Commerce Project - Create Shop Page

Welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will learn about creating a shop page.

Step 1: Create a New Controller

Go to the Command prompt and create a new controller by running the command:

Php artisan make:controller ShopController

Step 2: Run the Application

Now, run the application by running the command:

Php artisan serve

Step 3: Create a Function in ShopController

Go to the ShopController and create a function:

public function index(Request $request)
{        
    $products = Product::orderBy('created_at','DESC')->paginate(12);
    return view('shop',compact(`products`));
} 

Step 4: Create a Route

Go to the web.php file and create a new route:

Route::get('/shop',[ShopController::class,'index'])->name('shop.index');

Step 5: Create a View

Go to the resources directory and create a new file called shop.blade.php. Extend the layout by writing:

@extends('layouts.app')
@section('content')
@endsection

Step 6: Add Products Grid

Go to the template directory and open shop.index in a text editor. Find the main tag and copy it. Go to the shop.blade.php file and paste it. Find the products-grid div and add the foreach directive to display the products:

<div class=`products-grid row row-cols-2 row-cols-md-3` id=`products-grid`>
    @foreach ($products as $product)
    <div class=`product-card-wrapper`>
        <div class=`product-card mb-3 mb-md-4 mb-xxl-5`>
            <div class=`pc__img-wrapper`>
                <div class=`swiper-container background-img js-swiper-slider` data-settings='{`resizeObserver`: true}'>
                    <div class=`swiper-wrapper`>
                        <div class=`swiper-slide`>
                            <a href=`{{route('shop.product.details',[`product_slug`=>$product->slug])}}`>
                                <img loading=`lazy` src=`{{asset('uploads/products')}}/{{$product->image}}` width=`330` height=`400` alt=`Cropped Faux leather Jacket` class=`pc__img`>                                            
                            </a>
                        </div>
                        <div class=`swiper-slide`>
                            @foreach (explode(`,`,$product->images) as $gimg)
                                <a href=`{{route('shop.product.details',[`product_slug`=>$product->slug])}}`>
                                    <img loading=`lazy` src=`{{asset('uploads/products')}}/{{trim($gimg)}}` width=`330` height=`400` alt=`Cropped Faux leather Jacket` class=`pc__img`>
                                </a>
                            @endforeach                                        
                        </div>
                    </div>
                    <span class=`pc__img-prev`><svg width=`7` height=`11` viewBox=`0 0 7 11` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_prev_sm` />
                        </svg></span>
                    <span class=`pc__img-next`><svg width=`7` height=`11` viewBox=`0 0 7 11` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_next_sm` />
                        </svg></span>
                </div>
                @if(Cart::instance(`cart`)->content()->Where('id',$product->id)->count()>0)
                    <a href=`{{route('cart.index')}}` class=`pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart btn-warning`>Go to Cart</a>
                @else
                <form name=`addtocart-form` method=`POST` action=`{{route('cart.add')}}`>
                    @csrf
                    <div class=`product-single__addtocart`>                                               
                        <input type=`hidden` name=`id` value=`{{$product->id}}` />
                        <input type=`hidden` name=`name` value=`{{$product->name}}` />
                        <input type=`hidden` name=`quantity` value=`1`/>
                        <input type=`hidden` name=`price` value=`{{$product->sale_price == '' ? $product->regular_price:$product->sale_price}}` />
                        <button type=`submit` class=`pc__atc btn anim_appear-bottom btn position-absolute border-0 text-uppercase fw-medium js-add-cart`>Add to Cart</button>
                    </div>
                </form>
                @endif                            
            </div>
            <div class=`pc__info position-relative`>
                <p class=`pc__category`>{{$product->category->name}}</p>
                <h6 class=`pc__title`><a href=`{{route('shop.product.details',[`product_slug`=>$product->slug])}}`>{{$product->name}}</a></h6>
                <div class=`product-card__price d-flex`>
                    <span class=`money price`>
                        @if($product->sale_price)                    
                            <s>${{$product->regular_price}}</s> ${{$product->sale_price}} {{round(($product->regular_price - $product->sale_price)*100/$product->regular_price)}} % OFF
                        @else
                            {{$product->regular_price}}
                        @endif
                    </span>
                </div>
                <div class=`product-card__review d-flex align-items-center`>
                    <div class=`reviews-group d-flex`>
                        <svg class=`review-star` viewBox=`0 0 9 9` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_star` />
                        </svg>
                        <svg class=`review-star` viewBox=`0 0 9 9` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_star` />
                        </svg>
                        <svg class=`review-star` viewBox=`0 0 9 9` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_star` />
                        </svg>
                        <svg class=`review-star` viewBox=`0 0 9 9` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_star` />
                        </svg>
                        <svg class=`review-star` viewBox=`0 0 9 9` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_star` />
                        </svg>
                    </div>
                    <span class=`reviews-note text-lowercase text-secondary ms-1`>8k+ reviews</span>
                </div>
                @if(Cart::instance(`wishlist`)->content()->Where('id',$product->id)->count()>0)
                    <form method=`POST` action=`{{route('wishlist.remove',['rowId'=>Cart::instance(`wishlist`)->content()->Where('id',$product->id)->first()->rowId])}}`>                                    
                        @csrf
                        @method(`DELETE`)
                        <button type=`submit` class=`pc__btn-wl position-absolute top-0 end-0 bg-transparent border-0 filled-heart` title=`Remove from Wishlist`>
                            <svg width=`16` height=`16` viewBox=`0 0 20 20` fill=`none` xmlns=`http://www.w3.org/2000/svg`>
                                <use href=`#icon_heart` />
                            </svg>
                        </button>
                    </form>
                @else
                <form method=`POST` action=`{{route('wishlist.add')}}`>
                    @csrf
                    <input type=`hidden` name=`id` value=`{{$product->id}}` />
                    <input type=`hidden` name=`name` value=`{{$product->name}}` />
                    <input type=`hidden` name=`quantity` value=`1`/>
                    <input type=`hidden` name=`price` value=`{{$product->sale_price == '' ? $product->regular_price:$product->sale_price}}` />
                    <button type=`submit` class=`pc__btn-wl position-absolute top-0 end-0 bg-transparent border-0` title=`Add To Wishlist`>
                        <svg width=`16` height=`16` viewBox=`0 0 20 20` fill=`none` xmlns=`http://www.w3.org/2000/svg`>
                            <use href=`#icon_heart` />
                        </svg>
                    </button>
                </form>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>
<div class=`divider`></div>
<div class=`flex items-center justify-between flex-wrap gap10 wgp-pagination`>                
    {{$products->withQueryString()->links('pagination::bootstrap-5')}}
</div>

Step 7: Update the Layout File

Go to the layout file app.blade.php and find the menu. In the shop anchor tag, add the shop route:

<div class=`divider`></div>
<li class=`navigation__item`>
  <a href=`{{route('shop.index')}}` class=`navigation__link`>Shop</a>
</li>

Final Step: Check the Shop Page

Refresh the page and click on the shop link. You should see the shop page.

That's all about creating the shop page.