Laravel 11 E-Commerce - 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.
