In this video we are going to learn about Creating Product Details Page.
So let see how can we create product details page.
For details page lets create a new livewire component.
For that switch to the command prompt and just type the command.
Now switch to the project
And lets create route for the details component
For that just go inside the routes directory then open web.php file and create the route.
Now open DetailsComponent Class file add the following code.
Now open resources\\views\\livewire\\details-component.blade.php view file and the following code
Inside this file lets add the product details template content.
So just go inside the template directory.
And open details.html file in text editor.
From this file just copy this main section and paste inside the details component view file Now lets make some changes
Inside the image url just add the {{asset('url_here')}}.
now inside this <div class=\"wrap-product-detail\"> add the following code.
Now go to the shop-component.blade.php file and here the following link in product
Also add the link with product title
Now save this file and lets check this.So switch to the browser and go to the http://localhost:8000/shop.
Now click on any product and now you can see the details page.
And here you can see the product image name price stock status and description all are now dynamic.
Now make dynamic this popular product and this related products For that first of all open DetailsComponent.php class file and inside the render method just add here.
Now just open the details-component.blade.php view file and inside the popular products add the following code
Now inside the related product carasoul add the following code
Now save this file and lets check. so switch to the browser and refresh the page and here you can see the popular products and related products.
So in this way you can create product details page.
So let see how can we create product details page.
For details page lets create a new livewire component.
For that switch to the command prompt and just type the command.
php artisan make:livewire DetailsComponent
Now switch to the project
And lets create route for the details component
For that just go inside the routes directory then open web.php file and create the route.
Route::get(‘/product/{slug}’,DetailsComponent::class)->name(‘product.details’);
Now open DetailsComponent Class file add the following code.
<?php
namespace App\\Http\\Livewire;
use App\\Models\\Product;
use Livewire\\Component;
class DetailsComponent extends Component
{
public $slug;
public function mount($slug)
{
$this->slug = $slug;
}
public function render()
{
$product = Product::where('slug',$this->slug)->first();
return view('livewire.details-component',['product'=>$product])->layout('layouts.base');
}
}
Now open resources\\views\\livewire\\details-component.blade.php view file and the following code
Inside this file lets add the product details template content.
So just go inside the template directory.
And open details.html file in text editor.
From this file just copy this main section and paste inside the details component view file Now lets make some changes
Inside the image url just add the {{asset('url_here')}}.
now inside this <div class=\"wrap-product-detail\"> add the following code.
<div class=\"wrap-product-detail\">
<div class=\"detail-media\">
<div class=\"product-gallery\" wire:ignore>
<ul class=\"slides\">
<li data-thumb=\"{{ asset('assets/images/products' ) }}/{{$product->image}}\">
<img src=\"{{ asset('assets/images/products') }}/{{$product->image}}\" alt=\"{{$product->name}}\" />
</li>
</ul>
</div>
</div>
<div class=\"detail-info\">
<div class=\"product-rating\">
<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
<i class=\"fa fa-star\" aria-hidden=\"true\"></i>
<a href=\"#\" class=\"count-review\">(05 review)</a>
</div>
<h2 class=\"product-name\">{{$product->name}}</h2>
<div class=\"short-desc\">
{!! $product->short_description !!}
</div>
<div class=\"wrap-social\">
<a class=\"link-socail\" href=\"#\"><img src=\"{{ asset('assets/images/social-list.png') }}\" alt=\"\"></a>
</div>
@if($product->sale_price > 0 && $sale->status == 1 && $sale->sale_date > Carbon\\Carbon::now())
<div class=\"wrap-price\">
<span class=\"product-price\">${{$product->sale_price}}</span>
<del><span class=\"product-price regprice\">${{$product->regular_price}}</span></del>
</div>
@else
<div class=\"wrap-price\"><span class=\"product-price\">${{$product->regular_price}}</span></div>
@endif
<div class=\"stock-info in-stock\">
<p class=\"availability\">Availability: <b>{{$product->stock_status}}</b></p>
</div>
<div class=\"quantity\">
<span>Quantity:</span>
<div class=\"quantity-input\">
<input type=\"text\" name=\"product-quatity\" value=\"1\" data-max=\"120\" pattern=\"[0-9]*\" wire:model=\"qty\" >
<a class=\"btn btn-reduce\" href=\"#\" wire:click.prevent=\"decreseQuantity\"></a>
<a class=\"btn btn-increase\" href=\"#\" wire:click.prevent=\"increaseQuantity\"></a>
</div>
</div>
<div class=\"wrap-butons\">
@if($product->sale_price > 0 && $sale->status == 1 && $sale->sale_date > Carbon\\Carbon::now())
<a href=\"#\" class=\"btn add-to-cart\" wire:click.prevent=\"store({{$product->id}},'{{$product->name}}',{{$product->sale_price}})\">Add to Cart</a>
@else
<a href=\"#\" class=\"btn add-to-cart\" wire:click.prevent=\"store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})\">Add to Cart</a>
@endif
<div class=\"wrap-btn\">
<a href=\"#\" class=\"btn btn-compare\">Add Compare</a>
<a href=\"#\" class=\"btn btn-wishlist\">Add Wishlist</a>
</div>
</div>
</div>
<div class=\"advance-info\">
<div class=\"tab-control normal\">
<a href=\"#description\" class=\"tab-control-item active\">description</a>
<a href=\"#add_infomation\" class=\"tab-control-item\">Addtional Infomation</a>
<a href=\"#review\" class=\"tab-control-item\">Reviews</a>
</div>
<div class=\"tab-contents\">
<div class=\"tab-content-item active\" id=\"description\">
{!! $product->description !!}
</div>
<div class=\"tab-content-item \" id=\"add_infomation\">
<table class=\"shop_attributes\">
<tbody>
<tr>
<th>Weight</th><td class=\"product_weight\">1 kg</td>
</tr>
<tr>
<th>Dimensions</th><td class=\"product_dimensions\">12 x 15 x 23 cm</td>
</tr>
<tr>
<th>Color</th><td><p>Black, Blue, Grey, Violet, Yellow</p></td>
</tr>
</tbody>
</table>
</div>
<div class=\"tab-content-item \" id=\"review\">
<div class=\"wrap-review-form\">
<style>
.width-0-percent{
width:0%;
}
.width-20-percent{
width:20%;
}
.width-40-percent{
width:40%;
}
.width-60-percent{
width:60%;
}
.width-80-percent{
width:80%;
}
.width-100-percent{
width:100%;
}
</style>
<div id=\"comments\">
</div><!-- #comments -->
</div>
</div>
</div>
</div>
</div>
Now go to the shop-component.blade.php file and here the following link in product
<div class=\"product-thumnail\">
<a href=\"{{route('product.details',['slug'=>$product->slug])}}\" title=\"{{$product->name}}\">
<figure><img src=\"{{ asset('assets/images/products') }}/{{$product->image}}\" alt=\"{{$product->name}}\"></figure>
</a>
</div>
Also add the link with product title
<a href=\"{{route('product.details',['slug'=>$product->slug])}}\" class=\"product-name\"><span>{{$product->name}}</span></a>
Now save this file and lets check this.So switch to the browser and go to the http://localhost:8000/shop.
Now click on any product and now you can see the details page.
And here you can see the product image name price stock status and description all are now dynamic.
Now make dynamic this popular product and this related products For that first of all open DetailsComponent.php class file and inside the render method just add here.
public function render()
{
$product = Product::where('slug',$this->slug)->first();
$rel_products = Product::where('category_id',$product->category_id)->inRandomOrder()->limit(5)->get();
$pop_products = Product::inRandomOrder()->limit(4)->get();
return view('livewire.details-component',['product'=>$product,'rel_products'=>$rel_products,'pop_products'=>$pop_products])->layout('layouts.base');
}
Now just open the details-component.blade.php view file and inside the popular products add the following code
<div class=\"widget mercado-widget widget-product\">
<h2 class=\"widget-title\">Popular Products</h2>
<div class=\"widget-content\">
<ul class=\"products\">
@foreach ($popular_products as $p_product)
<li class=\"product-item\">
<div class=\"product product-widget-style\">
<div class=\"thumbnnail\">
<a href=\"{{route('product.details',['slug'=>$p_product->slug])}}\" title=\"{{$p_product->name}}\">
<figure><img src=\"{{ asset('assets/images/products') }}/{{$p_product->image}}\" alt=\"{{$p_product->name}}\"></figure>
</a>
</div>
<div class=\"product-info\">
<a href=\"{{route('product.details',['slug'=>$p_product->slug])}}\" class=\"product-name\"><span>{{$p_product->name}}</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">${{$p_product->regular_price}}</span></div>
</div>
</div>
</li>
@endforeach
</ul>
</div>
</div>
Now inside the related product carasoul add the following code
<div class=\"single-advance-box col-lg-12 col-md-12 col-sm-12 col-xs-12\">
<div class=\"wrap-show-advance-info-box style-1 box-in-site\">
<h3 class=\"title-box\">Related Products</h3>
<div class=\"wrap-products\">
<div class=\"products slide-carousel owl-carousel style-nav-1 equal-container\" data-items=\"5\" data-loop=\"false\" data-nav=\"true\" data-dots=\"false\" data-responsive='{\"0\":{\"items\":\"1\"},\"480\":{\"items\":\"2\"},\"768\":{\"items\":\"3\"},\"992\":{\"items\":\"3\"},\"1200\":{\"items\":\"5\"}}' >
@foreach ($related_products as $r_product)
<div class=\"product product-style-2 equal-elem \">
<div class=\"product-thumnail\">
<a href=\"{{route('product.details',['slug'=>$r_product->slug])}}\" title=\"{{ $r_product->name}}\">
<figure><img src=\"{{ asset('assets/images/products' ) }}/{{ $r_product->image}}\" width=\"214\" height=\"214\" alt=\"T-Shirt Raw Hem Organic Boro Constrast Denim\"></figure>
</a>
<div class=\"group-flash\">
<span class=\"flash-item new-label\">new</span>
</div>
<div class=\"wrap-btn\">
<a href=\"#\" class=\"function-link\">quick view</a>
</div>
</div>
<div class=\"product-info\">
<a href=\"{{route('product.details',['slug'=>$r_product->slug])}}\" class=\"product-name\"><span>{{ $r_product->name}}</span></a>
<div class=\"wrap-price\"><span class=\"product-price\">${{ $r_product->regular_price}}</span></div>
</div>
</div>
@endforeach
</div>
</div><!--End wrap-products-->
</div>
</div>
Now save this file and lets check. so switch to the browser and refresh the page and here you can see the popular products and related products.
So in this way you can create product details page.
