TPS/elektronika_bagisto
TPS
/
elektronika_bagisto
6
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Front category navigation and store front account dropdown complete

This commit is contained in:
prashant-webkul 2018-08-01 20:30:31 +05:30
parent b868148d4d
commit 9e3c3a357a
9 changed files with 197 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/Webkul/Core/src/Eloquent/TranslatableModel.php
View File

@ -24,7 +24,7 @@ class TranslatableModel extends Model
} elseif(Locale::where('code', '=', $key)->first()) {
return true;
}
return false;
}
@ -52,12 +52,4 @@ class TranslatableModel extends Model
{
return false;
}
/**
* @return string
*/
protected function getLocaleSeparator()
{
return config('translatable.locale_separator', '%');
}
}
}

10
packages/Webkul/Shop/src/Resources/assets/images/icon-dropdown-left.svg Normal file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<title>icon-dropdown-left</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-dropdown-left" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="›" fill="#242424" transform="translate(3.519196, 4.000000) scale(1, -1) translate(-3.519196, -4.000000) " points="1 8 4.06610107 4 1 0 3.00469971 0 6.03839111 4 3.00469971 8"></polygon>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

13
packages/Webkul/Shop/src/Resources/assets/images/icon-menu-close.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<title>icon-menu-close</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-menu-close" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
<g id="Group" transform="translate(5.000000, 5.000000)" stroke="#242424" stroke-width="3">
<path d="M0.0685261796,14.2496556 L13.5678375,0.750344361" id="Line-2"></path>
<path d="M0.0685261796,0.750344361 L13.5678375,14.2496556" id="Line-2"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 780 B

4
packages/Webkul/Shop/src/Resources/assets/images/offer-zone.svg
View File

@ -1,13 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
<title>icon-offer</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-offer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon id="Star" fill="#FF6472" points="12 21.8341033 8.29179607 23.8299999 6.46471607 20.0352146 2.29179607 19.4698579 3.04372246 15.325663 0 12.415 3.04372246 9.50433697 2.29179607 5.360142 6.46471607 4.79478531 8.29179607 1 12 2.99589665 15.7082039 1 17.5352839 4.79478531 21.7082039 5.360142 20.9562775 9.50433697 24 12.415 20.9562775 15.325663 21.7082039 19.4698579 17.5352839 20.0352146 15.7082039 23.8299999"></polygon>
<text id="%" font-family="Montserrat-Regular, Montserrat" font-size="12" font-weight="normal" letter-spacing="-0.2879999" fill="#FFFFFF">
<tspan x="7.8559999" y="17">%</tspan>
<tspan x="7.3399999" y="17">%</tspan>
</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

19
packages/Webkul/Shop/src/Resources/assets/js/components/category-item.vue
View File

@ -1,7 +1,7 @@
<template>
<li>
<a href="">{{ item.name }}</a>
<!-- replace the below inner-child class with dropdown -->
<a href="">{{ this.item['translations'][0].name }}&emsp;<i class="icon dropdown-right-icon"
v-if="haveChildren"></i></a>
<ul v-if="haveChildren">
<category-item
v-for="(child, index) in item.children"
@ -11,7 +11,6 @@
</ul>
</li>
</template>
<script>
// define the item component
@ -19,17 +18,13 @@
export default {
props: {
item: Object,
url: String
url: String,
},
methods:{
change: function () {
this.isActive = true;
}
},
created() {
// console.log(this.item)
data(){
return {
items_count:0
};
},
computed: {

107
packages/Webkul/Shop/src/Resources/assets/js/components/category-nav.vue
View File

@ -1,5 +1,6 @@
<template>
<ul class="nav">
<category-item
v-for="(item, index) in items"
:key="index"
@ -9,13 +10,16 @@
<li>
<img class="icon" src="vendor/webkul/shop/assets/images/offer-zone.svg" style="margin-right:5px;" />Offer Zone
</li>
</ul>
</template>
<script>
// define the item component
export default {
props: {
props: {
categories: {
type: [Array, String, Object],
required: false,
@ -24,107 +28,16 @@ export default {
url: String
},
created () {
console.log(this.url)
data(){
return {
items_count:0
};
},
computed: {
items () {
return JSON.parse(this.categories)
}
}
},
}
</script>
<style>
ul.nav {
display: block;
text-align: center;
font-size:16px;
}
.nav ul {
margin: 0;
padding:0;
list-style: none;
}
.nav a {
display:block;
color: black;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
box-shadow:
1px -1px -1px 1px #000,
-1px 1px -1px 1px #fff,
0 0 6px 3px #fff;
border-radius:6px;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
margin-right: 1px;
}
.nav > li > a {
margin-bottom: 1px;
}
.nav > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav > li:last-child > a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border: 1px solid #B1B1B1;
background-color:white;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
/* border: 5px solid transparent;
border-bottom-color: orange; */
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {
/* border-left-color: #aaa; */
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
right: 10px;
}
</style>

145
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -1,5 +1,6 @@
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500");
@import "icons";
@import "mixins";
@import "variables";
@ -12,7 +13,6 @@ body {
}
.header {
// border: 1px solid black;
margin-top: 16px;
margin-bottom: 21px;
@ -93,17 +93,19 @@ body {
margin-right: 14px;
.account-icon {
margin: 0;
padding-right: 8px;
cursor: pointer;
margin-right: 8px;
height: 24px;
width: 24px;
}
.account {
cursor: pointer;
padding-top: 3px;
padding-right: 5px;
margin-left: 8px;
}
.icon.arrow-down-icon {
cursor: pointer;
margin-top: 10px;
}
}
@ -168,29 +170,130 @@ body {
font-size: 16px;
display: block;
.menu-bar {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
// .menu-bar {
// display: flex;
// flex-direction: row;
// justify-content: flex-start;
// align-items: center;
// height: 48px;
// width: 80%;
// margin-left: auto;
// margin-right: auto;
// li {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: center;
// // background-color: blue;
// height: 100%;
// margin: 2.5%;
// }
// li:last-child {
// margin-left: auto;
// color: $offer-color;
// }
// }
ul.nav {
display: block;
font-size:16px;
height: 48px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// background-color: blue;
height: 100%;
margin: 2.5%;
}
li:last-child {
margin-left: auto;
color: $offer-color;
}
.nav ul {
margin: 0;
padding:0;
border: 1px solid #B1B1B1;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40);
}
.nav a {
display:block;
color: #242424;
text-decoration: none;
padding: 0.8em 0.3em 0.8em 0.5em;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
}
.nav{
vertical-align: top;
display: inline-block;
}
.nav li {
position: relative;
height:45px;
}
.nav > li {
float: left;
margin-right: 1px;
}
.nav > li > a {
margin-bottom: 1px;
}
.nav > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav > li:last-child > a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50% ;
right:5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border: 1px solid #B1B1B1;
background-color:white;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
right: 10px;
}
}
}

11
packages/Webkul/Shop/src/Resources/assets/sass/icons.scss vendored Normal file
View File

@ -0,0 +1,11 @@
.icon {
display: inline-block;
background-size: cover;
}
.dropdown-right-icon{
background-image:URL('../images/icon-dropdown-left.svg');
width: 8px;
height: 8px;
margin-left:auto;
margin-bottom: 2px;
}

23
packages/Webkul/Shop/src/Resources/views/store/header/index.blade.php
View File

@ -2,9 +2,6 @@
<div class="header-top">
<div class="left-content">
<ul class="logo-container">
{{-- @for($i=0;$i<sizeof($categories);$i++)
{{ $categories[$i] }}
@endfor --}}
<li>
<a href="">
<img class="logo" src="vendor/webkul/shop/assets/images/logo.svg" />
@ -12,25 +9,41 @@
</li>
</ul>
<ul class="search-container">
<li class="search-group">
<input type="search" class="search-field" placeholder="Search for products">
<div class="q-c">
<span class="icon search-icon"></span>
</div>
</li>
</ul>
</div>
<div class="right-content">
<ul class="search-dropdown-container">
<li class="search-dropdown">
</li>
</ul>
<ul class="account-dropdown-container">
<li class="account-dropdown">
<span class="icon account-icon"></span>
<span class="account">Account</span>
<span class="icon arrow-down-icon"></span>
<div class="dropdown-toggle">
<div style="display: inline-block; cursor: pointer;">
<span class="name">Account</span>
</div>
<i class="icon arrow-down-icon active"></i>
</div>
<div class="dropdown-list bottom-right" style="display: none;">
<div class="dropdown-container">
<ul>
<li><a href="{{ route('customer.session.index') }}">Sign In</a></li>
<li><a href="{{ route('customer.register.index') }}">Sign Up</a></li>
</ul>
</div>
</div>
</li>
</ul>