Laravel 8 E-Commerce - Implement Settings
In this video, we will learn how to implement settings in our e-commerce application.
Let's explore how to implement settings to make our application more dynamic.
First, we need to create a new Livewire component for the footer.
Switch to the command prompt and run the following command to create a new Livewire component:
php artisan make:livewire FooterComponent
Next, go to the base.blade.php layout file and select the footer content.
Cut the footer content and go to the footer-component.blade.php view file.
Paste the footer content into the view file.
Now, in the layout file, render the FooterComponent by adding the following code:
@livewire('footer-component')
Go to the FooterComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire;
use App\Models\Setting;
use Livewire\Component;
class FooterComponent extends Component
{
public function render()
{
$setting = Setting::find(1);
return view('livewire.footer-component',['setting'=>$setting]);
}
}
Now, go to the footer-component.blade.php view file and make the necessary changes to the code:
<div>
<footer id="footer">
<div class="wrap-footer-content footer-style-1">
<div class="wrap-function-info">
<div class="container">
<ul>
<li class="fc-info-item">
<i class="fa fa-truck" aria-hidden="true"></i>
<div class="wrap-left-info">
<h4 class="fc-name">Free Shipping</h4>
<p class="fc-desc">Free On Oder Over $99</p>
</div>
</li>
<li class="fc-info-item">
<i class="fa fa-recycle" aria-hidden="true"></i>
<div class="wrap-left-info">
<h4 class="fc-name">Guarantee</h4>
<p class="fc-desc">30 Days Money Back</p>
</div>
</li>
<li class="fc-info-item">
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
<div class="wrap-left-info">
<h4 class="fc-name">Safe Payment</h4>
<p class="fc-desc">Safe your online payment</p>
</div>
</li>
<li class="fc-info-item">
<i class="fa fa-life-ring" aria-hidden="true"></i>
<div class="wrap-left-info">
<h4 class="fc-name">Online Suport</h4>
<p class="fc-desc">We Have Support 24/7</p>
</div>
</li>
</ul>
</div>
</div>
<!--End function info-->
<div class="main-footer-content">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12">
<div class="wrap-footer-item">
<h3 class="item-header">Contact Details</h3>
<div class="item-content">
<div class="wrap-contact-detail">
<ul>
<li>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p class="contact-txt">{{$setting->address}}</p>
</li>
<li>
<i class="fa fa-phone" aria-hidden="true"></i>
<p class="contact-txt">{{$setting->phone}}</p>
</li>
<li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<p class="contact-txt">{{$setting->email}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12">
<div class="wrap-footer-item">
<h3 class="item-header">Hot Line</h3>
<div class="item-content">
<div class="wrap-hotline-footer">
<span class="desc">Call Us toll Free</span>
<b class="phone-number">{{$setting->phone2}}</b>
</div>
</div>
</div>
<div class="wrap-footer-item footer-item-second">
<h3 class="item-header">Sign up for newsletter</h3>
<div class="item-content">
<div class="wrap-newletter-footer">
<form action="#" class="frm-newletter" id="frm-newletter">
<input type="email" class="input-email" name="email" value="" placeholder="Enter your email address">
<button class="btn-submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12 box-twin-content ">
<div class="row">
<div class="wrap-footer-item twin-item">
<h3 class="item-header">My Account</h3>
<div class="item-content">
<div class="wrap-vertical-nav">
<ul>
<li class="menu-item"><a href="#" class="link-term">My Account</a></li>
<li class="menu-item"><a href="#" class="link-term">Brands</a></li>
<li class="menu-item"><a href="#" class="link-term">Gift Certificates</a></li>
<li class="menu-item"><a href="#" class="link-term">Affiliates</a></li>
<li class="menu-item"><a href="#" class="link-term">Wish list</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap-footer-item twin-item">
<h3 class="item-header">Infomation</h3>
<div class="item-content">
<div class="wrap-vertical-nav">
<ul>
<li class="menu-item"><a href="#" class="link-term">Contact Us</a></li>
<li class="menu-item"><a href="#" class="link-term">Returns</a></li>
<li class="menu-item"><a href="#" class="link-term">Site Map</a></li>
<li class="menu-item"><a href="#" class="link-term">Specials</a></li>
<li class="menu-item"><a href="#" class="link-term">Order History</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12">
<div class="wrap-footer-item">
<h3 class="item-header">We Using Safe Payments:</h3>
<div class="item-content">
<div class="wrap-list-item wrap-gallery">
<img src="{{asset('assets/images/payment.png')}}" style="max-width: 260px;">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12">
<div class="wrap-footer-item">
<h3 class="item-header">Social network</h3>
<div class="item-content">
<div class="wrap-list-item social-network">
<ul>
<li><a href="{{$setting->twiter}}" class="link-to-item" title="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="{{$setting->facebook}}" class="link-to-item" title="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="{{$setting->pinterest}}" class="link-to-item" title="pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="{{$setting->instagram}}" class="link-to-item" title="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="{{$setting->youtube}}" class="link-to-item" title="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-12">
<div class="wrap-footer-item">
<h3 class="item-header">Dowload App</h3>
<div class="item-content">
<div class="wrap-list-item apps-list">
<ul>
<li><a href="#" class="link-to-item" title="our application on apple store"><figure><img src="{{asset('assets/images/brands/apple-store.png')}}" alt="apple store" width="128" height="36"></figure></a></li>
<li><a href="#" class="link-to-item" title="our application on google play store"><figure><img src="{{asset('assets/images/brands/google-play-store.png')}}" alt="google play store" width="128" height="36"></figure></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-back-link">
<div class="container">
<div class="back-link-box">
<h3 class="backlink-title">Quick Links</h3>
<div class="back-link-row">
<ul class="list-back-link" >
<li><span class="row-title">Mobiles:</span></li>
<li><a href="#" class="redirect-back-link" title="mobile">Mobiles</a></li>
<li><a href="#" class="redirect-back-link" title="yphones">YPhones</a></li>
<li><a href="#" class="redirect-back-link" title="Gianee Mobiles GL">Gianee Mobiles GL</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Karbonn">Mobiles Karbonn</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Viva">Mobiles Viva</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Intex">Mobiles Intex</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Micrumex">Mobiles Micrumex</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Bsus">Mobiles Bsus</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Samsyng">Mobiles Samsyng</a></li>
<li><a href="#" class="redirect-back-link" title="Mobiles Lenova">Mobiles Lenova</a></li>
</ul>
<ul class="list-back-link" >
<li><span class="row-title">Tablets:</span></li>
<li><a href="#" class="redirect-back-link" title="Plesc YPads">Plesc YPads</a></li>
<li><a href="#" class="redirect-back-link" title="Samsyng Tablets" >Samsyng Tablets</a></li>
<li><a href="#" class="redirect-back-link" title="Qindows Tablets" >Qindows Tablets</a></li>
<li><a href="#" class="redirect-back-link" title="Calling Tablets" >Calling Tablets</a></li>
<li><a href="#" class="redirect-back-link" title="Micrumex Tablets" >Micrumex Tablets</a></li>
<li><a href="#" class="redirect-back-link" title="Lenova Tablets Bsus" >Lenova Tablets Bsus</a></li>
<li><a href="#" class="redirect-back-link" title="Tablets iBall" >Tablets iBall</a></li>
<li><a href="#" class="redirect-back-link" title="Tablets Swipe" >Tablets Swipe</a></li>
<li><a href="#" class="redirect-back-link" title="Tablets TVs, Audio" >Tablets TVs, Audio</a></li>
</ul>
<ul class="list-back-link" >
<li><span class="row-title">Fashion:</span></li>
<li><a href="#" class="redirect-back-link" title="Sarees Silk" >Sarees Silk</a></li>
<li><a href="#" class="redirect-back-link" title="sarees Salwar" >sarees Salwar</a></li>
<li><a href="#" class="redirect-back-link" title="Suits Lehengas" >Suits Lehengas</a></li>
<li><a href="#" class="redirect-back-link" title="Biba Jewellery" >Biba Jewellery</a></li>
<li><a href="#" class="redirect-back-link" title="Rings Earrings" >Rings Earrings</a></li>
<li><a href="#" class="redirect-back-link" title="Diamond Rings" >Diamond Rings</a></li>
<li><a href="#" class="redirect-back-link" title="Loose Diamond Shoes" >Loose Diamond Shoes</a></li>
<li><a href="#" class="redirect-back-link" title="BootsMen Watches" >BootsMen Watches</a></li>
<li><a href="#" class="redirect-back-link" title="Women Watches" >Women Watches</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="coppy-right-box">
<div class="container">
<div class="coppy-right-item item-left">
<p class="coppy-right-text">Copyright © 2020 Surfside Media. All rights reserved</p>
</div>
<div class="coppy-right-item item-right">
<div class="wrap-nav horizontal-nav">
<ul>
<li class="menu-item"><a href="about-us.html" class="link-term">About us</a></li>
<li class="menu-item"><a href="privacy-policy.html" class="link-term">Privacy Policy</a></li>
<li class="menu-item"><a href="terms-conditions.html" class="link-term">Terms & Conditions</a></li>
<li class="menu-item"><a href="return-policy.html" class="link-term">Return Policy</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</footer>
</div>
Save the changes and let's check the result.
Switch to your browser and refresh the page.
You should see that the email address, phone number, and social links are now dynamic.
Next, let's make the contact us page dynamic.
Go to the ContactComponent.php class file and inside the render method, fetch the setting:
$setting = Setting::find(1);
Return the setting to the contact-component.blade.php view file.
Go to the contact-component.blade.php view file and modify the code as follows:
<div>
<main id="main" class="main-site left-sidebar">
<div class="container">
<div class="wrap-breadcrumb">
<ul>
<li class="item-link"><a href="/" class="link">home</a></li>
<li class="item-link"><span>Contact us</span></li>
</ul>
</div>
<div class="row">
<div class=" main-content-area">
<div class="wrap-contacts ">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="contact-box contact-form">
<h2 class="box-title">Leave a Message</h2>
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form name="frm-contact" wire:submit.prevent="sendMessage">
<label for="name">Name<span>*</span></label>
<input type="text" value="" id="name" name="name" wire:model="name" >
@error('name') <p class="text-danger">{{$message}}</p> @enderror
<label for="email">Email<span>*</span></label>
<input type="text" value="" id="email" name="email" wire:model="email" >
@error('email') <p class="text-danger">{{$message}}</p> @enderror
<label for="phone">Number Phone</label>
<input type="text" value="" id="phone" name="phone" wire:model="phone" >
@error('phone') <p class="text-danger">{{$message}}</p> @enderror
<label for="comment">Comment</label>
<textarea name="comment" id="comment" wire:model="comment" ></textarea>
@error('comment') <p class="text-danger">{{$message}}</p> @enderror
<input type="submit" name="ok" value="Submit" >
</form>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="contact-box contact-info">
<div class="wrap-map">
<iframe src="{{$setting->map}}" width="100%" height="320" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<h2 class="box-title">Contact Detail</h2>
<div class="wrap-icon-box">
<div class="icon-box-item">
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="right-info">
<b>Email</b>
<p>{{$setting->email}}</p>
</div>
</div>
<div class="icon-box-item">
<i class="fa fa-phone" aria-hidden="true"></i>
<div class="right-info">
<b>Phone</b>
<p>{{$setting->phone}}</p>
</div>
</div>
<div class="icon-box-item">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<div class="right-info">
<b>Address</b>
<p>{{$setting->address}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--end main products area-->
</div><!--end row-->
</div><!--end container-->
</main>
</div>
Now, let's check the result.
Switch to your browser and go to the contact us page.
You should see that all the content is now dynamic.
And that's how you can implement settings in your e-commerce application.
