In this video we are going to learn about Creating Laravel 8 Project and Layout Setup For the E-Commerce Project.
In this laravel 8 Ecommerce tutorial series we will create complete Ecommerce website.
For design we will use bootstrap ecommerce html template and for authentication we will use Jetstream and livewire.
We will create this ecommerce project using livewire. So lets start with creating a new laravel 8 project
For creating laravel 8 poject go to the command prompt
Now switch to the project directory for that just type on command prompt
now lets install livewire so run the following command on command prompt
After the installation of livewire lets open this project inside the visual studio code , so switch to visual studio code and click on add folder select the project directory.
Now lets create a database. So switch to the browser and open http://localhost/phpmyadmin/
Now just click on databases and here enter the new database name.
Lets say database name is laravel8ecommercedb Now lets configure this database into the project
So just open .env file
And here just write the database name, user name and password as following
Now lets implement the html template in our project.
You and download the e-commerce html template from https://github.com/surfsidemedia/Laravel-8-E-Commerce/.
Now lets use this html template in our project
So first of all lets create a layout page in our project
So switch to project and just go inside the resources directory then views
And inside the views directory lets create a new folder which is Layouts
Inside the layouts directory lets create a new file. Lets say file name is base.blade.php.
This is layout file . Now go the html template directory and open index.html in any text editor
Now select all and copy the all text and just paste inside the base.blade.php file
Alright Now make change in base.blade.php file add @livewireStyles in head section and add @livewireScripts just before the closing body tag and also remove the main content part and add here {{$slot}} for rendering the other component.
Now lets create a livewire component for home page
So go to the command prompt and for creating livewire component just type the command
Now switch to the project and just open the home component class file and here inside the rendor method just add the layout.
Now lets open the home-component.blade.php view file and here add the main part section text from index.html template file.
Now modify the all image url and add the asset here for pointing the public directory
Now lets create the route for this home component. o just open the web.php and here create new route also remove the default welcome route.
All right now from template directory just copy this assets folder
And now go to the project directory and then public directory, and inside the public directory just paste here.
Now all set so lets check this. So first of all run the application. For that go to command prompt and run the following command.
Now switch to the browser and go to the url
Localhost:8000
And here you can see the ecommerce home page
So in this way you can create layout and implement the html template so that's all about Project & Layout Setup for the E-Commerce.
In this laravel 8 Ecommerce tutorial series we will create complete Ecommerce website.
For design we will use bootstrap ecommerce html template and for authentication we will use Jetstream and livewire.
We will create this ecommerce project using livewire. So lets start with creating a new laravel 8 project
For creating laravel 8 poject go to the command prompt
composer create-project --prefer-dist laravel/laravel laravel8ecommerce
Now switch to the project directory for that just type on command prompt
cd larvel8ecommerce
now lets install livewire so run the following command on command prompt
composer require livewire/livewire
After the installation of livewire lets open this project inside the visual studio code , so switch to visual studio code and click on add folder select the project directory.
Now lets create a database. So switch to the browser and open http://localhost/phpmyadmin/
Now just click on databases and here enter the new database name.
Lets say database name is laravel8ecommercedb Now lets configure this database into the project
So just open .env file
And here just write the database name, user name and password as following
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel8ecommercedb
DB_USERNAME=root
DB_PASSWORD=
Now lets implement the html template in our project.
You and download the e-commerce html template from https://github.com/surfsidemedia/Laravel-8-E-Commerce/.
Now lets use this html template in our project
So first of all lets create a layout page in our project
So switch to project and just go inside the resources directory then views
And inside the views directory lets create a new folder which is Layouts
Inside the layouts directory lets create a new file. Lets say file name is base.blade.php.
This is layout file . Now go the html template directory and open index.html in any text editor
Now select all and copy the all text and just paste inside the base.blade.php file
Alright Now make change in base.blade.php file add @livewireStyles in head section and add @livewireScripts just before the closing body tag and also remove the main content part and add here {{$slot}} for rendering the other component.
<!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 lets create a livewire component for home page
So go to the command prompt and for creating livewire component just type the command
php aritisan make:livwire HomeComponent
Now switch to the project and just open the home component class file and here inside the rendor method just add the layout.
class HomeComponent extends Component
{
public function render()
{
return view('livewire.home-component')->layout('layouts.base');
}
}
Now lets open the home-component.blade.php view file and here add the main part section text from index.html template file.
Now modify the all image url and add the asset here for pointing the public directory
Now lets create the route for this home component. o just open the web.php and here create new route also remove the default welcome route.
Route::get(‘/’,HomeComponent::class);
All right now from template directory just copy this assets folder
And now go to the project directory and then public directory, and inside the public directory just paste here.
Now all set so lets check this. So first of all run the application. For that go to command prompt and run the following command.
php artisan serve
Now switch to the browser and go to the url
Localhost:8000
And here you can see the ecommerce home page
So in this way you can create layout and implement the html template so that's all about Project & Layout Setup for the E-Commerce.
