In this video we are going to learn about Create Service Details Page
So let see how can we Create Service Details Page
First of all lets create a new livewire component for service details
So switch to the command prompt and for creating new livewire component just type the command
Now run the application so type here
Now switch to the project and lets create the route for this new component
So go inside the routes directory then open Web.php file create new route
Now lets open the ServiceDetailsComponent Class file and write the following code
Now lets open the service details component view file
Now go to the template directory
And from here lets open servie-details.html file in text editor
Now from this file Lets copy the main part content and paste inside the view file
Now here make the changes
Go to the service-by-category_component.blade.php file
And here add the service details link
Now all done so lets check it
So switch to the browser and refresh the page
And now click on any service
And here you can see the service details
So in this way you can Create Service Details page
So let see how can we Create Service Details Page
First of all lets create a new livewire component for service details
So switch to the command prompt and for creating new livewire component just type the command
php artisan make:livewire ServiceDetailsComponent
Now run the application so type here
php artisan serve
Now switch to the project and lets create the route for this new component
So go inside the routes directory then open Web.php file create new route
Route::get(‘service/{service_slug}’,ServiceDetialsComponent::class)->name(‘home.service_details’);
Now lets open the ServiceDetailsComponent Class file and write the following code
<?php
namespace App\\Http\\Livewire;
use App\\Models\\Service;
use Livewire\\Component;
class ServiceDetailsComponent extends Component
{
public $service_slug;
public function mount($service_slug)
{
$this->service_slug = $service_slug;
}
public function render()
{
$service = Service::where('slug',$this->service_slug)->first();
$r_service = Service::where('service_category_id',$service->service_category_id)->where('slug','!=',$this->service_slug)->inRandomOrder()->first();
return view('livewire.service-details-component',['service'=>$service,'r_service'=>$r_service])->layout('layouts.base');
}
}
Now lets open the service details component view file
Now go to the template directory
And from here lets open servie-details.html file in text editor
Now from this file Lets copy the main part content and paste inside the view file
Now here make the changes
<div>
<div class=\"section-title-01 honmob\">
<div class=\"bg_parallax image_01_parallax\"></div>
<div class=\"opacy_bg_02\">
<div class=\"container\">
<h1>{{$service->name}}</h1>
<div class=\"crumbs\">
<ul>
<li><a href=\"/\">Home</a></li>
<li>/</li>
<li>{{$service->name}}</li>
</ul>
</div>
</div>
</div>
</div>
<section class=\"content-central\">
<div class=\"semiboxshadow text-center\">
<img src=\"img/img-theme/shp.png\" class=\"img-responsive\" alt=\"\">
</div>
<div class=\"content_info\">
<div class=\"paddings-mini\">
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-8 single-blog\">
<div class=\"post-item\">
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"post-header\">
<div class=\"post-format-icon post-format-standard\"
style=\"margin-top: -10px;\">
<i class=\"fa fa-image\"></i>
</div>
<div class=\"post-info-wrap\">
<h2 class=\"post-title\"><a href=\"#\" title=\"Post Format: Standard\"
rel=\"bookmark\">{{$service->name}}: {{$service->category->name}}</a></h2>
<div class=\"post-meta\" style=\"height: 10px;\">
</div>
</div>
</div>
</div>
<div class=\"col-md-12\">
<div id=\"single-carousel\">
<div class=\"img-hover\">
<img src=\"{{asset('images/services')}}/{{$service->image}}\" alt=\"{{$service->name}}\"
class=\"img-responsive\">
</div>
</div>
</div>
<div class=\"col-md-12\">
<div class=\"post-content\">
<h3>{{$service->name}}</h3>
<p>{{$service->description}}</p>
<h4>Inclusion</h4>
<ul class=\"list-styles\">
@foreach(explode(\"|\",$service->inclusion) as $inclusion)
<li><i class=\"fa fa-plus\"></i>{{$inclusion}}</li>
@endforeach
</ul>
<h4>Exclusion</h4>
<ul class=\"list-styles\">
@foreach(explode(\"|\",$service->exclusion) as $exclusion)
<li><i class=\"fa fa-minus\"></i>{{$exclusion}}</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
<div class=\"col-md-4\">
<aside class=\"widget\" style=\"margin-top: 18px;\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">Booking Details</div>
<div class=\"panel-body\">
<table class=\"table\">
<tr>
<td style=\"border-top: none;\">Price</td>
<td style=\"border-top: none;\"><span>$</span> {{$service->price}}</td>
</tr>
<tr>
<td>Quntity</td>
<td>1</td>
</tr>
@php
$total = $service->price;
@endphp
@if($service->discount)
@if($service->discount_type == 'fixed')
<tr>
<td>Discount</td>
<td>${{$service->discount}}</td>
</tr>
@php $total = $total-$service->discount; @endphp
@elseif($service->discount_type == 'percent')
<tr>
<td>Discount</td>
<td>{{$service->discount}}%</td>
@php $total = $total-($total*$service->discount/100); @endphp
</tr>
@endif
@endif
<tr>
<td>Total</td>
<td><span>$</span> {{$total}}</td>
</tr>
</table>
</div>
<div class=\"panel-footer\">
<form>
<input type=\"submit\" class=\"btn btn-primary\" name=\"submit\"
value=\" Book Now\">
</form>
</div>
</div>
</aside>
<aside>
@if($r_service)
<h3>Related Service</h3>
<div class=\"col-md-12 col-sm-6 col-xs-12 bg-dark color-white padding-top-mini\"
style=\"max-width: 360px\">
<a href=\"{{route('home.service_details',['service_slug'=>$r_service->slug])}}\">
<div class=\"img-hover\">
<img src=\"{{asset('images/services/thumbnails')}}/{{$r_service->thumbnail}}\" alt=\"{{$r_service->name}}\"
class=\"img-responsive\">
</div>
<div class=\"info-gallery\">
<h3>
{{$r_service->name}}
</h3>
<hr class=\"separator\">
<p>{{$r_service->name}}</p>
<div class=\"content-btn\"><a href=\"{{route('home.service_details',['service_slug'=>$r_service->slug])}}\"
class=\"btn btn-warning\">View Details</a></div>
<div class=\"price\"><span>$</span><b>From</b>{{$r_service->price}}</div>
</div>
</a>
</div>
@endif
</aside>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Go to the service-by-category_component.blade.php file
And here add the service details link
<div class=\"col-xs-6 col-sm-4 col-md-3 nature hsgrids\" style=\"padding-right: 5px;padding-left: 5px;\">
<a class=\"g-list\" href=\"{{route('home.service_details',['service_slug'=>$service->slug])}}\">
<div class=\"img-hover\">
<img src=\"{{asset('images/services/thumbnails')}}/{{$service->thumbnail}}\" alt=\"{{$service->name}}\"
class=\"img-responsive\">
</div>
<div class=\"info-gallery\">
<h3>{{$service->name}}</h3>
<hr class=\"separator\">
<p>{{$service->tagline}}</p>
<div class=\"content-btn\"><a href=\"{{route('home.service_details',['service_slug'=>$service->slug])}}\"
class=\"btn btn-primary\">Book Now</a></div>
<div class=\"price\"><span>$</span><b>From</b>{{$service->price}}</div>
</div>
</a>
</div>
Now all done so lets check it
So switch to the browser and refresh the page
And now click on any service
And here you can see the service details
So in this way you can Create Service Details page
