Laravel 11 E-Commerce - Changing the Admin and User Dashboard Layout
Welcome back to the Laravel E-Commerce Tutorial! In this video, we will learn about changing the admin and user dashboard layout.
Changing the Admin Dashboard Template
Let's start by changing the admin dashboard template. Go to the layouts folder and create a new layout file, for example, admin.blade.php.
Copy all the text from the app.blade.php file and paste it inside the admin.blade.php file.
Now, go to the template directory, then admin, and open the index.html file in VS Code.
Copy the content lines of code and paste them inside the admin.blade.php file as follows:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="surfside media" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/animate.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/animation.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-select.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
<link rel="stylesheet" href="{{ asset('font/fonts.css') }}">
<link rel="stylesheet" href="{{ asset('icon/style.css') }}">
<link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}">
<link rel="apple-touch-icon-precomposed" href="{{ asset('images/favicon.ico') }}">
<link rel="stylesheet" type="text/css" href="{{asset('css/sweetalert.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/custom.css') }}">
@stack("styles")
</head>
<body class="body">
<div id="wrapper">
<div id="page" class="">
<div class="layout-wrap">
<div class="section-menu-left">
<div class="box-logo">
<a href="{{route('admin.index')}}" id="site-logo-inner">
<img class="" id="logo_header_1" alt="" src="{{ asset('images/logo/logo.png') }}"
data-light="{{ asset('images/logo/logo.png') }}" data-dark="{{ asset('images/logo/logo.png') }}">
</a>
<div class="button-show-hide">
<i class="icon-menu-left"></i>
</div>
</div>
<div class="center">
<div class="center-item">
<div class="center-heading">Main Home</div>
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="">
<div class="icon"><i class="icon-grid"></i></div>
<div class="text">Dashboard</div>
</a>
</li>
</ul>
</div>
<div class="center-item">
<ul class="menu-list">
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-shopping-cart"></i></div>
<div class="text">Products</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">Add Product</div>
</a>
</li>
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">Products</div>
</a>
</li>
</ul>
</li>
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-layers"></i></div>
<div class="text">Brand</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">New Brand</div>
</a>
</li>
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">Brands</div>
</a>
</li>
</ul>
</li>
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-layers"></i></div>
<div class="text">Category</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">New Category</div>
</a>
</li>
<li class="sub-menu-item">
<a href="#" class="">
<div class="text">Categories</div>
</a>
</li>
</ul>
</li>
<li class="menu-item has-children">
<a href="javascript:void(0);" class="menu-item-button">
<div class="icon"><i class="icon-file-plus"></i></div>
<div class="text">Order</div>
</a>
<ul class="sub-menu">
<li class="sub-menu-item">
<a href="orders.html" class="">
<div class="text">Orders</div>
</a>
</li>
<li class="sub-menu-item">
<a href="order-tracking.html" class="">
<div class="text">Order tracking</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="slider.html" class="">
<div class="icon"><i class="icon-image"></i></div>
<div class="text">Slider</div>
</a>
</li>
<li class="menu-item">
<a href="#" class="">
<div class="icon"><i class="icon-grid"></i></div>
<div class="text">Coupons</div>
</a>
</li>
<li class="menu-item">
<a href="users.html" class="">
<div class="icon"><i class="icon-user"></i></div>
<div class="text">User</div>
</a>
</li>
<li class="menu-item">
<a href="settings.html" class="">
<div class="icon"><i class="icon-settings"></i></div>
<div class="text">Settings</div>
</a>
</li>
<li class="menu-item">
<a href="#" class="">
<div class="icon"><i class="icon-settings"></i></div>
<div class="text">Logout</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="section-content-right">
<div class="header-dashboard">
<div class="wrap">
<div class="header-left">
<a href="index-2.html">
<img class="" id="logo_header_mobile" alt="" src="{{ asset('images/logo/logo.png') }}"
data-light="{{ asset('images/logo/logo.png') }}" data-dark="{{ asset('images/logo/logo.png') }}"
data-width="154px" data-height="52px" data-retina="{{ asset('images/logo/logo.png') }}">
</a>
<div class="button-show-hide">
<i class="icon-menu-left"></i>
</div>
<form class="form-search flex-grow">
<fieldset class="name">
<input type="text" placeholder="Search here..." class="show-search" name="name"
tabindex="2" value="" aria-required="true" required="">
</fieldset>
<div class="button-submit">
<button class="" type="submit"><i class="icon-search"></i></button>
</div>
<div class="box-content-search" id="box-content-search">
<ul class="mb-24">
<li class="mb-14">
<div class="body-title">Top selling product</div>
</li>
<li class="mb-14">
<div class="divider"></div>
</li>
<li>
<ul>
<li class="product-item gap14 mb-10">
<div class="image no-bg">
<img src="images/products/17.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Dog Food
Rachael Ray Nutrish®</a>
</div>
</div>
</li>
<li class="mb-10">
<div class="divider"></div>
</li>
<li class="product-item gap14 mb-10">
<div class="image no-bg">
<img src="images/products/18.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Natural
Dog Food Healthy Dog Food</a>
</div>
</div>
</li>
<li class="mb-10">
<div class="divider"></div>
</li>
<li class="product-item gap14">
<div class="image no-bg">
<img src="images/products/19.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Freshpet
Healthy Dog Food and Cat</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="">
<li class="mb-14">
<div class="body-title">Order product</div>
</li>
<li class="mb-14">
<div class="divider"></div>
</li>
<li>
<ul>
<li class="product-item gap14 mb-10">
<div class="image no-bg">
<img src="images/products/20.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Sojos
Crunchy Natural Grain Free...</a>
</div>
</div>
</li>
<li class="mb-10">
<div class="divider"></div>
</li>
<li class="product-item gap14 mb-10">
<div class="image no-bg">
<img src="images/products/21.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Kristin
Watson</a>
</div>
</div>
</li>
<li class="mb-10">
<div class="divider"></div>
</li>
<li class="product-item gap14 mb-10">
<div class="image no-bg">
<img src="images/products/22.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Mega
Pumpkin Bone</a>
</div>
</div>
</li>
<li class="mb-10">
<div class="divider"></div>
</li>
<li class="product-item gap14">
<div class="image no-bg">
<img src="images/products/23.png" alt="">
</div>
<div class="flex items-center justify-between gap20 flex-grow">
<div class="name">
<a href="product-list.html" class="body-text">Mega
Pumpkin Bone</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
<div class="header-grid">
<div class="popup-wrap message type-header">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
<span class="header-item">
<span class="text-tiny">1</span>
<i class="icon-bell"></i>
</span>
</button>
<ul class="dropdown-menu dropdown-menu-end has-content"
aria-labelledby="dropdownMenuButton2">
<li>
<h6>Notifications</h6>
</li>
<li>
<div class="message-item item-1">
<div class="image">
<i class="icon-noti-1"></i>
</div>
<div>
<div class="body-title-2">Discount available</div>
<div class="text-tiny">Morbi sapien massa, ultricies at rhoncus
at, ullamcorper nec diam</div>
</div>
</div>
</li>
<li>
<div class="message-item item-2">
<div class="image">
<i class="icon-noti-2"></i>
</div>
<div>
<div class="body-title-2">Account has been verified</div>
<div class="text-tiny">Mauris libero ex, iaculis vitae rhoncus
et</div>
</div>
</div>
</li>
<li>
<div class="message-item item-3">
<div class="image">
<i class="icon-noti-3"></i>
</div>
<div>
<div class="body-title-2">Order shipped successfully</div>
<div class="text-tiny">Integer aliquam eros nec sollicitudin
sollicitudin</div>
</div>
</div>
</li>
<li>
<div class="message-item item-4">
<div class="image">
<i class="icon-noti-4"></i>
</div>
<div>
<div class="body-title-2">Order pending: <span>ID 305830</span>
</div>
<div class="text-tiny">Ultricies at rhoncus at ullamcorper</div>
</div>
</div>
</li>
<li><a href="#" class="tf-button w-full">View all</a></li>
</ul>
</div>
</div>
<div class="popup-wrap user type-header">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
<span class="header-user wg-user">
<span class="image">
<img src="images/avatar/user-1.png" alt="">
</span>
<span class="flex flex-column">
<span class="body-title mb-2">Kristin Watson</span>
<span class="text-tiny">Admin</span>
</span>
</span>
</button>
<ul class="dropdown-menu dropdown-menu-end has-content"
aria-labelledby="dropdownMenuButton3">
<li>
<a href="#" class="user-item">
<div class="icon">
<i class="icon-user"></i>
</div>
<div class="body-title-2">Account</div>
</a>
</li>
<li>
<a href="#" class="user-item">
<div class="icon">
<i class="icon-mail"></i>
</div>
<div class="body-title-2">Inbox</div>
<div class="number">27</div>
</a>
</li>
<li>
<a href="#" class="user-item">
<div class="icon">
<i class="icon-file-text"></i>
</div>
<div class="body-title-2">Taskboard</div>
</a>
</li>
<li>
<a href="#" class="user-item">
<div class="icon">
<i class="icon-headphones"></i>
</div>
<div class="body-title-2">Support</div>
</a>
</li>
<li>
<a href="login.html" class="user-item">
<div class="icon">
<i class="icon-log-out"></i>
</div>
<div class="body-title-2">Log out</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="main-content">
@yield('content')
<div class="bottom-page">
<div class="body-text">Copyright © 2024 SurfsideMedia</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/sweetalert.min.js') }}"></script>
<script src="{{ asset('js/apexcharts/apexcharts.js') }}"></script>
<script src="{{ asset('js/main.js') }}"></script>
<script>
(function ($) {
var tfLineChart = (function () {
var chartBar = function () {
var options = {
series: [{
name: 'Total',
data: [0.00, 0.00, 0.00, 0.00, 0.00, 273.22, 208.12, 0.00, 0.00, 0.00, 0.00, 0.00]
}, {
name: 'Pending',
data: [0.00, 0.00, 0.00, 0.00, 0.00, 273.22, 208.12, 0.00, 0.00, 0.00, 0.00, 0.00]
},
{
name: 'Delivered',
data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00]
}, {
name: 'Canceled',
data: [0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00]
}],
chart: {
type: 'bar',
height: 325,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '10px',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
legend: {
show: false,
},
colors: ['#2377FC', '#FFA500', '#078407', '#FF0000'],
stroke: {
show: false,
},
xaxis: {
labels: {
style: {
colors: '#212529',
},
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: {
show: false,
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + ""
}
}
}
};
chart = new ApexCharts(
document.querySelector("#line-chart-8"),
options
);
if ($("#line-chart-8").length > 0) {
chart.render();
}
};
/* Function ============ */
return {
init: function () { },
load: function () {
chartBar();
},
resize: function () { },
};
})();
jQuery(document).ready(function () { });
jQuery(window).on("load", function () {
tfLineChart.load();
});
jQuery(window).on("resize", function () { });
})(jQuery);
</script>
@stack("scripts")
</body>
</html>
Here, inside the Head tag...
In the index.html file, copy the body content and paste it inside the admin.blade.php file.
Now, find the main-content-inner and select and cut it. Add the @yield directive and pass the content. Also, add the @stack directive for styles and scripts.
In the CSS, script, and img URL, add the asset methods.
Change the dashboard link here:
<ul class="menu-list">
<li class="menu-item">
<a href="{{route('admin.index')}}" class="">
<div class="icon"><i class="icon-grid"></i></div>
<div class="text">Dashboard</div>
</a>
</li>
</ul>
Now, go to the admin index view and change the layout to layouts.admin.
Inside the content section, paste the main-content-inner content.
For the logout:
<li class="menu-item">
<form method="POST" action="{{route('logout')}}" id="logout-form">
@csrf
<a href="{{route('logout')}}" class="" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<div class="icon"><i class="icon-settings"></i></div>
<div class="text">Logout</div>
</a>
</form>
</li>
Now, it's done. Let's check this. Refresh the page, and you can see that the template content has been applied on this admin dashboard page.
Now, let's logout from here and login with user credentials. And here is the user dashboard.
Changing the User Dashboard
Now, let's change the user dashboard. For that, go to the template directory and open the website folder. Now, open the my-account.html file in VS Code.
From here, find the main tag and copy it. Paste it inside the user index view file.
Now, let's create a new view file inside the user folder, account-nav.blade.php file.
From the index.blade.php view file, cut the menu and paste it inside this file:
<ul class="account-nav">
<li><a href="{{route('user.account.dashboard')}}" class="menu-link menu-link_us-s {{Route::is('user.account.dashboard') ? 'menu-link_active':''}}">Dashboard</a></li>
<li><a href="{{route('user.account.orders')}}" class="menu-link menu-link_us-s {{Route::is('user.account.orders') ? 'menu-link_active':''}}">Orders</a></li>
<li><a href="{{route('user.account.addresses')}}" class="menu-link menu-link_us-s {{Route::is('user.account.addresses') ? 'menu-link_active':''}}">Addresses</a></li>
<li><a href="{{route('user.account.details')}}" class="menu-link menu-link_us-s {{Route::is('user.account.details') ? 'menu-link_active':''}}">Account Details</a></li>
<li><a href="{{route('user.account.wishlists')}}" class="menu-link menu-link_us-s {{Route::is('user.account.wishlists') ? 'menu-link_active':''}}">Wishlist</a></li>
<li>
<form method="POST" action="{{route('logout')}}" id="logout-form-1">
@csrf
<a href="{{route('logout')}}" class="menu-link menu-link_us-s" onclick="event.preventDefault(); document.getElementById('logout-form-1').submit();">Logout</a>
</form>
</li>
</ul>
For the logout link, add the form here.
Now, in the index file, render the account-nav view file. So, add here:
@include('user.account-nav')
Directive.
For logout, add the form here:
<li>
<form method="POST" action="{{route('logout')}}" id="logout-form-1">
@csrf
<a href="{{route('logout')}}" class="menu-link menu-link_us-s" onclick="event.preventDefault(); document.getElementById('logout-form-1').submit();">Logout</a>
</form>
</li>
Now, it's done. Let's check this. Switch to the browser and refresh the page. Let's login with user credentials, click on this user icon, and you can see that the user dashboard is now changed. The logout link is also working now.
So, in this way, you can change the admin and user dashboard layout.
So, that's all about changing the admin and user dashboard layout.
