Customer account's side menu now being generated dynamically

This commit is contained in:
prashant-webkul 2018-07-28 15:15:33 +05:30
parent 15043a249b
commit 6910ca47f5
12 changed files with 221 additions and 137 deletions

View File

@ -42,7 +42,7 @@ class CustomerController extends Controller
return $customer;
}
public function dashboard()
public function profile()
{
$id = auth()->guard('customer')->user()->id;
$customer = $this->getCustomer($id);

View File

@ -9,7 +9,7 @@ Route::group(['middleware' => ['web']], function () {
])->name('customer.session.index');
Route::post('login', 'Webkul\Customer\Http\Controllers\SessionController@create')->defaults('_config', [
'redirect' => 'customer.dashboard.index'
'redirect' => 'customer.account.profile'
])->name('customer.session.create');
@ -19,7 +19,7 @@ Route::group(['middleware' => ['web']], function () {
])->name('customer.register.index');
Route::post('register', 'Webkul\Customer\Http\Controllers\RegistrationController@create')->defaults('_config', [
'redirect' => 'customer.dashboard.index',
'redirect' => 'customer.account.profile',
])->name('customer.register.create');
// Auth Routes
@ -30,15 +30,17 @@ Route::group(['middleware' => ['web']], function () {
'redirect' => 'customer.session.index'
])->name('customer.session.destroy');
//customer dashboard
Route::get('dashboard', 'Webkul\Customer\Http\Controllers\CustomerController@dashboard')->defaults('_config', [
'view' => 'shop::customers.dashboard.index'
])->name('customer.dashboard.index');
//customer account
Route::prefix('account')->group(function () {
Route::get('profile', 'Webkul\Customer\Http\Controllers\CustomerController@profile')->defaults('_config', [
'view' => 'shop::customers.profile.home.index'
])->name('customer.account.profile');
//profile edit
Route::get('profile/edit', 'Webkul\Customer\Http\Controllers\CustomerController@editProfile')->defaults('_config', [
'view' => 'shop::customers.profile.edit'
])->name('customer.profile.edit');
//profile edit
Route::get('profile/edit', 'Webkul\Customer\Http\Controllers\CustomerController@editProfile')->defaults('_config', [
'view' => 'shop::customers.profile.edit.index'
])->name('customer.profile.edit');
});
});
});
});

View File

@ -0,0 +1,29 @@
<?php
namespace Webkul\Customer;
use Illuminate\Support\Facades\HTML;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\URL;
class Menu
{
public $items = array();
public static function create($callback)
{
$menu = new Menu();
$callback($menu);
return $menu;
}
public function add($route, $name)
{
$url = route($route);
$item = [
'name' => $name,
'url' => $url,
];
array_push($this->items, $item);
}
}

View File

@ -7,9 +7,7 @@ use Illuminate\Support\Facades\Event;
use Illuminate\Routing\Router;
use Illuminate\Support\Facades\Blade;
use Webkul\Customer\Http\Middleware\RedirectIfNotCustomer;
use Webkul\Admin\Providers\EventServiceProvider;
// use Webkul\Admin\Providers\ComposerServiceProvider;
use Webkul\Customer\Providers\EventServiceProvider;
class CustomerServiceProvider extends ServiceProvider
{
@ -26,6 +24,14 @@ class CustomerServiceProvider extends ServiceProvider
$this->loadMigrationsFrom(__DIR__ . '/../Database/migrations');
$this->loadViewsFrom(__DIR__ . '/../Resources/views', 'customer');
$this->composeView();
Blade::directive('continue', function () {
return "<?php continue; ?>";
});
$this->app->register(EventServiceProvider::class);
}
/**
@ -37,4 +43,13 @@ class CustomerServiceProvider extends ServiceProvider
{
// $this->app->bind('datagrid', 'Webkul\Ui\DataGrid\DataGrid');
}
protected function composeView()
{
view()->composer(['shop::customers.profile.partials.sidemenu'], function ($view) {
$menu = current(Event::fire('customer.menu.create'));
$view->with('menu', $menu);
});
}
}

View File

@ -0,0 +1,41 @@
<?php
namespace Webkul\Customer\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Event;
use Illuminate\Support\Facades\View;
use Webkul\Customer\Menu;
class EventServiceProvider extends ServiceProvider
{
/**
* Bootstrap services.
*
* @return void
*/
public function boot()
{
$this->createCustomerAccountSideMenu();
}
/**
* This method fires an event for menu creation, any package can add their menu item by listening to the customer.menu.build event
*
* @return void
*/
public function createCustomerAccountSideMenu()
{
Event::listen('customer.menu.create', function () {
return Menu::create(function ($menu) {
Event::fire('customer.menu.build', $menu);
});
});
Event::listen('customer.menu.build', function ($menu) {
$menu->add('customer.account.profile', 'Profile');
$menu->add('customer.account.profile', 'Wishlist');
});
}
}

View File

@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
@import "mixins";
@import "variables";
@ -473,15 +474,15 @@ body {
}
//customer pages styles goes here
//dashboard
.dashboard-content {
//account layout
.account-content {
width: 100%;
display: flex;
flex-direction: row;
margin-top: 5.5%;
margin-bottom: 5.5%;
.dashboard-side-menu {
.account-side-menu {
display: flex;
flex-direction: column;
align-content: center;
@ -512,6 +513,9 @@ body {
li:last-child {
border-bottom: none;
}
li.active {
color: #0031f0;
}
}
.profile {
@ -563,45 +567,43 @@ body {
}
}
}
}
//dashboard ends here
//edit form
.edit-form-content {
margin-left: 5.5%;
margin-top: 1%;
width: 100%;
//edit form
.edit-form-content {
margin-top: 5%;
margin-bottom: 5%;
.edit-text {
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
font-size: 24px;
}
.edit-text {
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 24px;
text-align: center;
}
.edit-form {
// margin-left: auto;
// margin-right: auto;
display: flex;
background: $background-color;
border: 1px solid $border-color;
flex-direction: column;
// max-width: 530px;
// min-width: 380px;
min-height: 345px;
padding: 25px;
.edit-form {
margin-left: auto;
margin-right: auto;
display: flex;
background: $background-color;
border: 1px solid $border-color;
flex-direction: column;
max-width: 530px;
min-width: 380px;
min-height: 345px;
padding: 25px;
.control-group {
input,
select {
font-family: "monserrat", sans-serif;
width: 100%;
.control-group {
input,
select {
font-family: "Montserrat", sans-serif;
width: 100%;
}
}
}
}
//edit form ends
}
//edit form ends
//account ends here
//customers page css ends here

View File

@ -1,53 +0,0 @@
@extends('shop::layouts.master')
@section('content-wrapper')
<div class="edit-form-content">
<div class="edit-text">Edit Profile</div>
<form method="post" action="{{ route('customer.register.create') }}">
<div class="edit-form">
{{ csrf_field() }}
<div class="control-group">
<label for="first_name">First Name</label>
<input type="text" class="control" name="first_name" value="{{ $customer['first_name'] }}" v-validate="'required'">
{{-- <span>@{{ errors.first('first_name') }}</span> --}}
</div>
<div class="control-group">
<label for="last_name">Last Name</label>
<input type="text" class="control" name="last_name" value="{{ $customer['last_name'] }}" v-validate="'required'">
{{-- <span>@{{ errors.first('last_name') }}</span> --}}
</div>
<div class="control-group">
<label for="email">Email</label>
<input type="email" class="control" name="email" value="{{ $customer['email'] }}" v-validate="'required'">
{{-- <span>@{{ errors.first('email') }}</span> --}}
</div>
<div class="control-group">
<label for="email">Gender</label>
<select name="gender" class="control" value="{{ $customer['gender'] }}" v-validate="'required'">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
{{-- <span>@{{ errors.first('gender') }}</span> --}}
</div>
<div class="control-group">
<label for="dob">Date of Birth</label>
<input type="date" class="control" name="dob" value="{{ $customer['date_of_birth'] }}" v-validate="'required'">
{{-- <span>@{{ errors.first('first_name') }}</span> --}}
</div>
<div class="control-group">
<label for="phone">Phone</label>
<input type="text" class="control" name="phone" value="{{ $customer['phone'] }}" v-validate="'required'">
{{-- <span>@{{ errors.first('phone') }}</span> --}}
</div>
<div class="control-group">
<label for="password">Password</label>
<input type="password" class="control" name="password">
</div>
<div class="control-group">
<label for="password">Confirm Password</label>
<input type="password" class="control" name="password">
</div>
<input class="btn btn-primary btn-lg" type="submit" value="Update Profile">
</div>
</form>
</div>
@endsection

View File

@ -0,0 +1,50 @@
@extends('shop::layouts.master')
@section('content-wrapper')
<div class="account-content">
@include('shop::customers.profile.partials.sidemenu')
<div class="edit-form-content">
<div class="edit-text">Edit Profile</div>
<form method="post" action="{{ route('customer.register.create') }}">
<div class="edit-form">
{{ csrf_field() }}
<div class="control-group">
<label for="first_name">First Name</label>
<input type="text" class="control" name="first_name" value="{{ $customer['first_name'] }}" v-validate="'required'"> {{-- <span>@{{ errors.first('first_name') }}</span> --}}
</div>
<div class="control-group">
<label for="last_name">Last Name</label>
<input type="text" class="control" name="last_name" value="{{ $customer['last_name'] }}" v-validate="'required'"> {{-- <span>@{{ errors.first('last_name') }}</span> --}}
</div>
<div class="control-group">
<label for="email">Email</label>
<input type="email" class="control" name="email" value="{{ $customer['email'] }}" v-validate="'required'"> {{-- <span>@{{ errors.first('email') }}</span> --}}
</div>
<div class="control-group">
<label for="email">Gender</label>
<select name="gender" class="control" value="{{ $customer['gender'] }}" v-validate="'required'">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select> {{-- <span>@{{ errors.first('gender') }}</span> --}}
</div>
<div class="control-group">
<label for="dob">Date of Birth</label>
<input type="date" class="control" name="dob" value="{{ $customer['date_of_birth'] }}" v-validate="'required'"> {{-- <span>@{{ errors.first('first_name') }}</span> --}}
</div>
<div class="control-group">
<label for="phone">Phone</label>
<input type="text" class="control" name="phone" value="{{ $customer['phone'] }}" v-validate="'required'"> {{-- <span>@{{ errors.first('phone') }}</span> --}}
</div>
<div class="control-group">
<label for="password">Password</label>
<input type="password" class="control" name="password">
</div>
<div class="control-group">
<label for="password">Confirm Password</label>
<input type="password" class="control" name="password">
</div>
<input class="btn btn-primary btn-lg" type="submit" value="Update Profile">
</div>
</form>
</div>
</div>
@endsection

View File

@ -1,17 +1,11 @@
@extends('shop::layouts.master')
@section('content-wrapper')
<div class="dashboard-content">
<ul class="dashboard-side-menu">
<li>Profile</li>
<li>Orders</li>
<li>Address</li>
<li>Reviews</li>
<li>Wishlist</li>
</ul>
<div class="account-content">
@include('shop::customers.profile.partials.sidemenu')
<div class="profile">
<div class="section-head">
<span class="profile-heading">Profile</span>
<span class="profile-edit">Edit</span>
<span class="profile-edit"><a href="{{ route('customer.profile.edit') }}">Edit</a></span>
<div class="horizontal-rule"></div>
</div>
<div class="profile-content">

View File

@ -0,0 +1,5 @@
<ul class="account-side-menu">
@foreach($menu->items as $key=>$value)
<li class="{{ request()->is('*/account/profile') ? 'active' : '' }}"><a href="{{ $value['url'] }}">{{ $value['name'] }}</a></li>
@endforeach
</ul>

View File

@ -562,7 +562,7 @@
margin-bottom: 4%;
}
.dashboard-content {
.account-content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
@ -575,7 +575,7 @@
margin-bottom: 5.5%;
}
.dashboard-content .dashboard-side-menu {
.account-content .account-side-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -597,7 +597,7 @@
color: #5e5e5e;
}
.dashboard-content .dashboard-side-menu li {
.account-content .account-side-menu li {
font-size: 16px;
width: 95%;
height: 50px;
@ -619,28 +619,32 @@
text-align: center;
}
.dashboard-content .dashboard-side-menu li:first-child {
.account-content .account-side-menu li:first-child {
border-top: none;
}
.dashboard-content .dashboard-side-menu li:last-child {
.account-content .account-side-menu li:last-child {
border-bottom: none;
}
.dashboard-content .profile {
.account-content .account-side-menu li.active {
color: #0031f0;
}
.account-content .profile {
margin-left: 5.5%;
margin-top: 1%;
width: 100%;
}
.dashboard-content .profile .section-head .profile-heading {
.account-content .profile .section-head .profile-heading {
font-size: 28px;
color: #242424;
text-transform: capitalize;
text-align: left;
}
.dashboard-content .profile .section-head .profile-edit {
.account-content .profile .section-head .profile-edit {
font-size: 17px;
margin-top: 1%;
color: #0031f0;
@ -648,7 +652,7 @@
float: right;
}
.dashboard-content .profile .section-head .horizontal-rule {
.account-content .profile .section-head .horizontal-rule {
margin-top: 1.1%;
width: 100%;
height: 1px;
@ -656,38 +660,35 @@
background: #e8e8e8;
}
.dashboard-content .profile-content {
.account-content .profile-content {
font-size: 16px;
color: #5e5e5e;
margin-top: 1.4%;
}
.dashboard-content .profile-content table tbody tr {
.account-content .profile-content table tbody tr {
height: 45px;
}
.dashboard-content .profile-content table tbody tr td {
.account-content .profile-content table tbody tr td {
width: 250px;
text-transform: capitalize;
}
.edit-form-content {
margin-top: 5%;
margin-bottom: 5%;
.account-content .edit-form-content {
margin-left: 5.5%;
margin-top: 1%;
width: 100%;
}
.edit-form-content .edit-text {
.account-content .edit-form-content .edit-text {
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 24px;
text-align: center;
}
.edit-form-content .edit-form {
margin-left: auto;
margin-right: auto;
.account-content .edit-form-content .edit-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -697,15 +698,13 @@
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 530px;
min-width: 380px;
min-height: 345px;
padding: 25px;
}
.edit-form-content .edit-form .control-group input,
.edit-form-content .edit-form .control-group select {
font-family: "monserrat", sans-serif;
.account-content .edit-form-content .edit-form .control-group input,
.account-content .edit-form-content .edit-form .control-group select {
font-family: "Montserrat", sans-serif;
width: 100%;
}