Laravel 8 E-Commerce - Admin Making Home Page Slider Dynamic
In this video, we will learn about making the home page slider dynamic.
Let's see how we can make the home page slider dynamic. First, we need to create a model for the slider.
To create the model, go to the command prompt and run the command:
php artisan make:model HomeSlider –m
Next, switch to the project and open the HomeSlider migration file. Add the following code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateHomeSlidersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('home_sliders', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('subtitle');
$table->string('price');
$table->string('link');
$table->string('image');
$table->boolean('status');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('home_sliders');
}
}
Now, let's migrate the migration. Go to the command prompt and run the command:
php artisan migrate
Alright, now let's create three Livewire components: one for listing all slides, one for adding a new slide, and one for editing a slide.
To create the Livewire components, run the command:
php artisan make:livewire admin/AdminHomeSliderComponent
Php artisan make:livewire admin/AdminAddHomeSliderComponent
php artisan make:livewire admin/AdminEditHomeSliderComponent
Now, switch to the project and create the routes for these three components. Open the web.php file and add the new routes inside the admin middleware group:
Route::get('/admin/slider',AdminHomeSliderComponent::class)->name('admin.homesliders');
Route::get('/admin/slider/add',AdminAddHomeSliderComponent::class)->name('admin.homeaddslider');
Route::get('/admin/slider/edit/{slide_id}',AdminEditHomeSliderComponent::class)->name('admin.homeslideredit');
Next, open the AdminHomeSliderComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\HomeSlider;
use Livewire\Component;
class AdminHomeSliderComponent extends Component
{
public function deleteSlide($slide_id)
{
$slider = HomeSlider::find($slide_id);
$slider->delete();
session()->flash('message','Slider has been deleted successfully!');
}
public function render()
{
$sliders = HomeSlider::all();
return view('livewire.admin.admin-home-slider-component',['sliders'=>$sliders])->layout('layouts.base');
}
}
Now, open the home-slider-component.blade.php view file and add the following code:
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
All Slides
</div>
<div class="col-md-6">
<a href="{{route('admin.addhomeslider')}}" class="btn btn-success pull-right">Add New Slide</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Image</th>
<th>Title</th>
<th>Subtitle</th>
<th>Price</th>
<th>Link</th>
<th>Status</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($sliders as $slider)
<tr>
<td>{{$slider->id}}</td>
<td><img src="{{asset('assets/images/sliders')}}/{{$slider->image}}" width="120" /></td>
<td>{{$slider->title}}</td>
<td>{{$slider->subtitle}}</td>
<td>{{$slider->price}}</td>
<td>{{$slider->link}}</td>
<td>{{$slider->status == 1 ? 'Active':'Inactive'}}</td>
<td>{{$slider->created_at}}</td>
<td>
<a href="{{route('admin.edithomeslider',['slide_id'=>$slider->id])}}"><i class="fa fa-edit fa-2x text-info"></i></a>
<a href="#" wire:click.prevent="deleteSlide({{$slider->id}})"><i class="fa fa-times fa-2x text-danger"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Open the AdminAddHomeSliderComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\HomeSlider;
use Carbon\Carbon;
use Livewire\Component;
use Livewire\WithFileUploads;
class AdminAddHomeSliderComponent extends Component
{
use WithFileUploads;
public $title;
public $subtitle;
public $price;
public $link;
public $image;
public $status;
public function mount()
{
$this->status = 0;
}
public function addSlide()
{
$slider = new HomeSlider();
$slider->title = $this->title;
$slider->subtitle = $this->subtitle;
$slider->price = $this->price;
$slider->link = $this->link;
$imagename = Carbon::now()->timestamp. '.' . $this->image->extension();
$this->image->storeAs('sliders',$imagename);
$slider->image = $imagename;
$slider->status = $this->status;
$slider->save();
session()->flash('message','Slide has been created successfully!');
}
public function render()
{
return view('livewire.admin.admin-add-home-slider-component')->layout('layouts.base');
}
}
Now, open the admin-add-slider-component.blade.php view file and add the following code:
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Add New Slide
</div>
<div class="col-md-6">
<a href="{{route('admin.homeslider')}}" class="btn btn-success pull-right">All Slides</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="addSlide">
<div class="form-group">
<label class="col-md-4 control-label">Title</label>
<div class="col-md-4 ">
<input type="text" placeholder="Title" class="form-control input-md" wire:model="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Subtitle</label>
<div class="col-md-4 ">
<input type="text" placeholder="Subtitle" class="form-control input-md" wire:model="subtitle" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Price</label>
<div class="col-md-4 ">
<input type="text" placeholder="Price" class="form-control input-md" wire:model="price" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Link</label>
<div class="col-md-4 ">
<input type="text" placeholder="Link" class="form-control input-md" wire:model="link" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Image</label>
<div class="col-md-4 ">
<input type="file" class="input-file" wire:model="image" />
@if($image)
<img src="{{$image->temporaryUrl()}}" width="120" />
@endif
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Status</label>
<div class="col-md-4 ">
<select class="form-control" wire:model="status">
<option value="0">Inactive</option>
<option value="1">Active</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4 ">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Open the AdminEditHomeSliderComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\HomeSlider;
use Livewire\Component;
use Livewire\WithFileUploads;
use Carbon\Carbon;
class AdminEditHomeSliderComponent extends Component
{
use WithFileUploads;
public $title;
public $subtitle;
public $price;
public $link;
public $image;
public $status;
public $newimage;
public $slider_id;
public function mount($slide_id)
{
$slider = HomeSlider::find($slide_id);
$this->title = $slider->title;
$this->subtitle = $slider->subtitle;
$this->price = $slider->price;
$this->link = $slider->link;
$this->image = $slider->image;
$this->status = $slider->status;
$this->slider_id = $slider->id;
}
public function updateSlide()
{
$slider = HomeSlider::find($this->slider_id);
$slider->title = $this->title;
$slider->subtitle = $this->subtitle;
$slider->price = $this->price;
$slider->link = $this->link;
if($this->newimage)
{
$imagename = Carbon::now()->timestamp. '.' . $this->newimage->extension();
$this->newimage->storeAs('sliders',$imagename);
$slider->image = $imagename;
}
$slider->status = $this->status;
$slider->save();
session()->flash('message','Slide has been updated successfully!');
}
public function render()
{
return view('livewire.admin.admin-edit-home-slider-component')->layout('layouts.base');
}
}
Now, open the admin-edit-home-slider-component.blade.php file and add the following code:
<div>
<div class="container" style="padding: 30px 0;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Edit Slide
</div>
<div class="col-md-6">
<a href="{{route('admin.homeslider')}}" class="btn btn-success pull-right">All Slides</a>
</div>
</div>
</div>
<div class="panel-body">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form class="form-horizontal" wire:submit.prevent="updateSlide">
<div class="form-group">
<label class="col-md-4 control-label">Title</label>
<div class="col-md-4 ">
<input type="text" placeholder="Title" class="form-control input-md" wire:model="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Subtitle</label>
<div class="col-md-4 ">
<input type="text" placeholder="Subtitle" class="form-control input-md" wire:model="subtitle" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Price</label>
<div class="col-md-4 ">
<input type="text" placeholder="Price" class="form-control input-md" wire:model="price" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Link</label>
<div class="col-md-4 ">
<input type="text" placeholder="Link" class="form-control input-md" wire:model="link" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Image</label>
<div class="col-md-4 ">
<input type="file" class="input-file" wire:model="newimage" />
@if($newimage)
<img src="{{$newimage->temporaryUrl()}}" width="120" />
@else
<img src="{{asset('assets/images/sliders')}}/{{$image}}" width="120" />
@endif
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Status</label>
<div class="col-md-4 ">
<select class="form-control" wire:model="status">
<option value="0">Inactive</option>
<option value="1">Active</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4 ">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Next, open the base.blade.php layout file and add the link for Home Slider to the admin menu:
<li class="menu-item">
<a title="Manage Home Slider" href="{{route('admin.homeslider')}}">Manage Home Slider</a>
</li>
Now, everything is set up. Let's check it. Switch to the browser and click on the Manage Home Slider link from the admin menu.
To add a new slide, click on the Add New Button. Enter the slider details and click on Add Slide. Similarly, add 2 or 3 slides.
Now, let's use these slides on the home page. Go to the HomeComponent.php class file and inside the render method, fetch the slides with an active status:
$sliders = HomeSlider::where('status',1)->get();
return view('livewire.home-component',['sliders'=>$sliders])->layout('layouts.base');
Open the home-component.blade.php view file and add the following code:
<div class="wrap-main-slide">
<div class="slide-carousel owl-carousel style-nav-1" data-items="1" data-loop="1" data-nav="true" data-dots="false">
@foreach ($sliders as $slide)
<div class="item-slide">
<img src="{{ asset('assets/images/sliders') }}/{{$slide->image}}" alt="" class="img-slide">
<div class="slide-info slide-1">
<h2 class="f-title"><b>{{$slide->title}}</b></h2>
<span class="subtitle">{{$slide->subtitle}}</span>
<p class="sale-info">Only price: <span class="price">${{$slide->price}}</span></p>
<a href="{{$slide->link}}" class="btn-link">Shop Now</a>
</div>
</div>
@endforeach
</div>
</div>
Alright, now everything is done. Let's check it. Switch to the browser and refresh the page. Go to the home page, and you can see the slider, which is now dynamic.
You can add, edit, and delete slides from the Manage Home Slider Page. So, in this way, you can make the home page slider dynamic.
