Laravel 8 E-Commerce - Project & Layout Setup
In this video, we will learn about creating a Laravel 8 project and setting up the layout for an e-commerce project. In this Laravel 8 e-commerce tutorial series, we will create a complete e-commerce website.
For design, we will use a Bootstrap e-commerce HTML template, and for authentication, we will use Jetstream and Livewire. We will create this e-commerce project using Livewire. So, let's start with creating a new Laravel 8 project.
To create a Laravel 8 project, go to the command prompt and run the following command:
composer create-project --prefer-dist laravel/laravel laravel8ecommerce
Now, switch to the project directory by typing the following command:
cd larvel8ecommerce
Next, let's install Livewire by running the following command:
composer require livewire/livewire
After installing Livewire, let's open the project in Visual Studio Code. Switch to Visual Studio Code and click on "Add Folder" to select the project directory.
Now, let's create a database. Switch to the browser and open http://localhost/phpmyadmin/. Click on "Databases" and enter a new database name, such as "laravel8ecommercedb".
Next, let's configure the database in the project. Open the .env file and add the database name, username, and password as follows:
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel8ecommercedb
DB_USERNAME=root
DB_PASSWORD=
Now, let's implement the HTML template in our project. You can download the e-commerce HTML template from https://github.com/surfsidemedia/Laravel-8-E-Commerce/.
Let's use this HTML template in our project. First, create a layout page in the project. Switch to the project directory and go to the resources/views directory. Create a new folder called Layouts and inside it, create a new file called base.blade.php.
This is the layout file. Now, go to the HTML template directory and open index.html in any text editor. Select all and copy the text, then paste it inside the base.blade.php file.
Make changes to the base.blade.php file by adding @livewireStyles in the head section and @livewireScripts just before the closing body tag. Remove the main content part and add {{$slot}} for rendering other components.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="shortcut icon" type="image/x-icon" href="{{asset('assets/images/favicon.ico')}}">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&subset=latin,latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:300,400,400italic,600,600italic,700,700italic&subset=latin,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/font-awesome.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/owl.carousel.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/chosen.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/color-01.css') }}">
@livewireStyles
</head>
<body class="home-page home-01 ">
<!-- mobile menu -->
<div class="mercado-clone-wrap">
<div class="mercado-panels-actions-wrap">
<a class="mercado-close-btn mercado-close-panels" href="#">x</a>
</div>
<div class="mercado-panels"></div>
</div>
<!--header-->
<header id="header" class="header header-style-1">
<div class="container-fluid">
<div class="row">
<div class="topbar-menu-area">
<div class="container">
<div class="topbar-menu left-menu">
<ul>
<li class="menu-item" >
<a title="Hotline: (+123) 456 789" href="#" ><span class="icon label-before fa fa-mobile"></span>Hotline: (+123) 456 789</a>
</li>
</ul>
</div>
<div class="topbar-menu right-menu">
<ul>
<li class="menu-item" ><a title="Register or Login" href="login.html">Login</a></li>
<li class="menu-item" ><a title="Register or Login" href="register.html">Register</a></li>
<li class="menu-item lang-menu menu-item-has-children parent">
<a title="English" href="#"><span class="img label-before"><img src="{{asset('assets/images/lang-en.png')}}" alt="lang-en"></span>English<i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="submenu lang" >
<li class="menu-item" ><a title="hungary" href="#"><span class="img label-before"><img src="{{asset('assets/images/lang-hun.png')}}" alt="lang-hun"></span>Hungary</a></li>
<li class="menu-item" ><a title="german" href="#"><span class="img label-before"><img src="{{asset('assets/images/lang-ger.png')}}" alt="lang-ger" ></span>German</a></li>
<li class="menu-item" ><a title="french" href="#"><span class="img label-before"><img src="{{asset('assets/images/lang-fra.png')}}" alt="lang-fre"></span>French</a></li>
<li class="menu-item" ><a title="canada" href="#"><span class="img label-before"><img src="{{asset('assets/images/lang-can.png')}}" alt="lang-can"></span>Canada</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children parent" >
<a title="Dollar (USD)" href="#">Dollar (USD)<i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="submenu curency" >
<li class="menu-item" >
<a title="Pound (GBP)" href="#">Pound (GBP)</a>
</li>
<li class="menu-item" >
<a title="Euro (EUR)" href="#">Euro (EUR)</a>
</li>
<li class="menu-item" >
<a title="Dollar (USD)" href="#">Dollar (USD)</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="mid-section main-info-area">
<div class="wrap-logo-top left-section">
<a href="index.html" class="link-to-home"><img src="assets/images/logo-top-1.png" alt="mercado"></a>
</div>
<div class="wrap-search center-section">
<div class="wrap-search-form">
<form action="#" id="form-search-top" name="form-search-top">
<input type="text" name="search" value="" placeholder="Search here...">
<button form="form-search-top" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
<div class="wrap-list-cate">
<input type="hidden" name="product-cate" value="0" id="product-cate">
<a href="#" class="link-control">All Category</a>
<ul class="list-cate">
<li class="level-0">All Category</li>
<li class="level-1">-Electronics</li>
<li class="level-2">Batteries & Chargens</li>
<li class="level-2">Headphone & Headsets</li>
<li class="level-2">Mp3 Player & Acessories</li>
<li class="level-1">-Smartphone & Table</li>
<li class="level-2">Batteries & Chargens</li>
<li class="level-2">Mp3 Player & Headphones</li>
<li class="level-2">Table & Accessories</li>
<li class="level-1">-Electronics</li>
<li class="level-2">Batteries & Chargens</li>
<li class="level-2">Headphone & Headsets</li>
<li class="level-2">Mp3 Player & Acessories</li>
<li class="level-1">-Smartphone & Table</li>
<li class="level-2">Batteries & Chargens</li>
<li class="level-2">Mp3 Player & Headphones</li>
<li class="level-2">Table & Accessories</li>
</ul>
</div>
</form>
</div>
</div>
<div class="wrap-icon right-section">
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<span class="title">Wishlist</span>
</div>
</a>
</div>
<div class="wrap-icon-section minicart">
<a href="#" class="link-direction">
<i class="fa fa-shopping-basket" aria-hidden="true"></i>
<div class="left-info">
<span class="index">4 items</span>
<span class="title">CART</span>
</div>
</a>
</div>
<div class="wrap-icon-section show-up-after-1024">
<a href="#" class="mobile-navigation">
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
</div>
</div>
<div class="nav-section header-sticky">
<div class="header-nav-section">
<div class="container">
<ul class="nav menu-nav clone-main-menu" id="mercado_haead_menu" data-menuname="Sale Info" >
<li class="menu-item"><a href="#" class="link-term">Weekly Featured</a><span class="nav-label hot-label">hot</span></li>
<li class="menu-item"><a href="#" class="link-term">Hot Sale items</a><span class="nav-label hot-label">hot</span></li>
<li class="menu-item"><a href="#" class="link-term">Top new items</a><span class="nav-label hot-label">hot</span></li>
<li class="menu-item"><a href="#" class="link-term">Top Selling</a><span class="nav-label hot-label">hot</span></li>
<li class="menu-item"><a href="#" class="link-term">Top rated items</a><span class="nav-label hot-label">hot</span></li>
</ul>
</div>
</div>
<div class="primary-nav-section">
<div class="container">
<ul class="nav primary clone-main-menu" id="mercado_main" data-menuname="Main menu" >
<li class="menu-item home-icon">
<a href="index.html" class="link-term mercado-item-title"><i class="fa fa-home" aria-hidden="true"></i></a>
</li>
<li class="menu-item">
<a href="about-us.html" class="link-term mercado-item-title">About Us</a>
</li>
<li class="menu-item">
<a href="shop.html" class="link-term mercado-item-title">Shop</a>
</li>
<li class="menu-item">
<a href="cart.html" class="link-term mercado-item-title">Cart</a>
</li>
<li class="menu-item">
<a href="checkout.html" class="link-term mercado-item-title">Checkout</a>
</li>
<li class="menu-item">
<a href="contact-us.html" class="link-term mercado-item-title">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
{{$slot}}
<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">45 Grand Central Terminal New York,NY 1017 United State USA</p>
</li>
<li>
<i class="fa fa-phone" aria-hidden="true"></i>
<p class="contact-txt">(+123) 456 789 - (+123) 666 888</p>
</li>
<li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<p class="contact-txt">Contact@yourcompany.com</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">(+123) 456 789 - (+123) 666 888</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="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="#" class="link-to-item" title="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#" class="link-to-item" title="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="link-to-item" title="pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#" class="link-to-item" title="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#" class="link-to-item" title="vimeo"><i class="fa fa-vimeo" 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="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="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>
<script src="{{ asset('assets/js/jquery-1.12.4.minb8ff.js?ver=1.12.4') }}"></script>
<script src="{{ asset('assets/js/jquery-ui-1.12.4.minb8ff.js?ver=1.12.4') }}"></script>
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.flexslider.js') }}"></script>
<script src="{{ asset('assets/js/chosen.jquery.min.js') }}"></script>
<script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.countdown.min.js') }}"></script>
<script src="{{ asset('assets/js/jquery.sticky.js') }}"></script>
<script src="{{ asset('assets/js/functions.js') }}"></script>
@livewireScripts
</body>
</html>
Now, let's create a Livewire component for the home page. Go to the command prompt and run the following command:
php aritisan make:livwire HomeComponent
Switch to the project and open the home component class file. Inside the render method, add the layout.
class HomeComponent extends Component
{
public function render()
{
return view('livewire.home-component')->layout('layouts.base');
}
}
Now, open the home-component.blade.php view file and add the main part section text from the index.html template file. Modify the image URLs and add the asset for pointing to the public directory.
Let's create a route for this home component. Open the web.php file and create a new route. Remove the default welcome route.
Route::get('/',HomeComponent::class);
Copy the assets folder from the template directory and paste it into the project directory's public directory.
Now, let's check the application. Run the following command:
php artisan serve
Switch to the browser and go to the URL http://localhost:8000. You should see the e-commerce home page.
That's all about project and layout setup for the e-commerce project.
