isue fixed
This commit is contained in:
prateek srivastava
parent
4bef67fd7f
commit
cefad5c834
|
|
@ -157,39 +157,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sub-category {
|
||||
border-top: 1px solid rgba(0,0,0,0.24);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.24);
|
||||
font-weight: 520;
|
||||
display: none;
|
||||
letter-spacing: 0.2px;
|
||||
// can work with layered navigation class
|
||||
// .sub-category {
|
||||
// border: 1px solid blue;
|
||||
// border-top: 1px solid rgba(0,0,0,0.24);
|
||||
// border-bottom: 1px solid rgba(0,0,0,0.24);
|
||||
// font-weight: 520;
|
||||
// display: none;
|
||||
// letter-spacing: 0.2px;
|
||||
|
||||
.category-icon {
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
padding-right: 5px;
|
||||
display: inline-block;
|
||||
// .category-icon {
|
||||
// width: 25px;
|
||||
// height: 20px;
|
||||
// padding-right: 5px;
|
||||
// display: inline-block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// vertical-align: text-top;
|
||||
// }
|
||||
// }
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin : 16px 0px 16px 15px;
|
||||
font-weight: 400px;
|
||||
i {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
margin: 3px 20px 0px 0px;
|
||||
// li {
|
||||
// font-size: 14px;
|
||||
// margin : 16px 0px 16px 15px;
|
||||
// font-weight: 400px;
|
||||
// i {
|
||||
// float: right;
|
||||
// font-size: 16px;
|
||||
// margin: 3px 20px 0px 0px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.greeting {
|
||||
display: table;
|
||||
|
|
@ -220,6 +222,8 @@
|
|||
line-height: 20px;
|
||||
font-weight: 530;
|
||||
border-top: 1px solid rgba(0,0,0,0.24);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.24);
|
||||
|
||||
li {
|
||||
font-size: 16px;
|
||||
margin : 16px 0px 16px 15px;
|
||||
|
|
@ -227,14 +231,14 @@
|
|||
}
|
||||
|
||||
.layered-category{
|
||||
border-top: 1px solid rgba(0,0,0,0.24);
|
||||
font-weight: 520;
|
||||
font-weight: 501;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 16px 0px 0px 0px;
|
||||
|
||||
.category-icon {
|
||||
width: 25px;
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
padding-right: 5px;
|
||||
padding-left: 12px;
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
|
|
@ -245,15 +249,22 @@
|
|||
}
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
margin : 16px 0px 16px 15px;
|
||||
font-weight: 400px;
|
||||
margin: 18px 0px 18px 5px;
|
||||
font-size: 17px;
|
||||
a {
|
||||
span {
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
margin : 16px 0px 16px 15px !important;
|
||||
font-weight: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
i {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
margin: 3px 20px 0px 0px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -232,6 +232,53 @@
|
|||
top: 60px;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.right {
|
||||
.swatch-container {
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
|
||||
.swatch {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
|
||||
span {
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
float: left;
|
||||
border: 1px solid #C7C7C7;
|
||||
border-radius: 3px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid #C7C7C7;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
background: rgb(242, 242, 242);
|
||||
}
|
||||
|
||||
input:checked + span, input:checked + img {
|
||||
border: 1px solid #242424;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.no-options {
|
||||
color: rgb(251, 57, 73);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -256,4 +303,5 @@
|
|||
height: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
{!! view_render_event('bagisto.shop.layout.header.category.before') !!}
|
||||
|
||||
@php
|
||||
$velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
|
||||
|
||||
$categories = [];
|
||||
|
||||
foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category) {
|
||||
if ($category->slug)
|
||||
array_push($categories, $category);
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="nav-container">
|
||||
<div class="wrapper">
|
||||
<div class="category-title">
|
||||
<span>
|
||||
<i class="material-icons" onclick="closeSubCategory()">chevron_left</i>
|
||||
Mens
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-category">
|
||||
<ul type="none">
|
||||
<li>Top</li>
|
||||
|
||||
<li>Bottom</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="greeting">
|
||||
<i class="material-icons">perm_identity</i>
|
||||
<span>
|
||||
|
|
@ -35,8 +29,6 @@
|
|||
|
||||
<div class="offers">
|
||||
<ul type="none">
|
||||
|
||||
|
||||
@foreach ($velocityContent as $index => $content)
|
||||
<li>{{ $content->title }}</li>
|
||||
@endforeach
|
||||
|
|
@ -44,44 +36,136 @@
|
|||
</div>
|
||||
|
||||
<div class="layered-category">
|
||||
<ul type="none">
|
||||
@foreach ($categories as $index => $category)
|
||||
<li>
|
||||
@if($category->category_icon_path)
|
||||
<img
|
||||
class="category-icon"
|
||||
src="{{ asset('storage/' . $category->category_icon_path) }}"/>
|
||||
@endif
|
||||
|
||||
{{ $category->name }}
|
||||
|
||||
@if(sizeof($category->children) > 0)
|
||||
<i class="material-icons" onclick="openSubCategory()">chevron_right</i>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.category.after') !!}
|
||||
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="category-nav-template">
|
||||
|
||||
<script type="text/javascript">
|
||||
<ul type="none">
|
||||
<category-item
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:url="url"
|
||||
:item="item"
|
||||
:parent="index">
|
||||
</category-item>
|
||||
</ul>
|
||||
|
||||
function openSubCategory() {
|
||||
$('.greeting, .offers, .layered-category').hide();
|
||||
$('.sub-category, .category-title').show();
|
||||
}
|
||||
</script>
|
||||
|
||||
function closeSubCategory() {
|
||||
$('.greeting, .offers, .layered-category').show();
|
||||
$('.sub-category, .category-title').hide();
|
||||
}
|
||||
<script>
|
||||
Vue.component('category-nav', {
|
||||
|
||||
// function closeDrawer() {
|
||||
// $('.nav-container').hide();
|
||||
// }
|
||||
</script>
|
||||
template: '#category-nav-template',
|
||||
|
||||
props: {
|
||||
categories: {
|
||||
type: [Array, String, Object],
|
||||
required: false,
|
||||
default: (function () {
|
||||
return [];
|
||||
})
|
||||
},
|
||||
|
||||
url: String
|
||||
},
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
items_count:0
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
items: function() {
|
||||
return JSON.parse(this.categories)
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="category-item-template">
|
||||
<li>
|
||||
<img
|
||||
class="category-icon"
|
||||
src="{{ asset('storage/'.$category->category_icon_path) }}"/>
|
||||
|
||||
<a class="category-name" :href="url+'/'+this.item['translations'][0].url_path">
|
||||
<span>@{{ name }}</span>
|
||||
</a>
|
||||
|
||||
<!-- <i class="material-icons"
|
||||
v-if="haveChildren && item.parent_id != null"
|
||||
@click="showOrHide(item.id)">
|
||||
chevron_right
|
||||
</i> -->
|
||||
|
||||
<!--
|
||||
<div class="sub-category" v-if="haveChildren && show">
|
||||
@include('shop::UI.shared.subCategories-header', [
|
||||
'category_id' => 12
|
||||
])
|
||||
-->
|
||||
</div>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('category-item', {
|
||||
|
||||
template: '#category-item-template',
|
||||
|
||||
props: {
|
||||
item: Object,
|
||||
url: String,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
items_count:0,
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
haveChildren: function() {
|
||||
return this.item.children.length ? true : false;
|
||||
},
|
||||
|
||||
name: function() {
|
||||
if (this.item.translations && this.item.translations.length) {
|
||||
this.item.translations.forEach(function(translation) {
|
||||
if (translation.locale == document.documentElement.lang)
|
||||
return translation.name;
|
||||
});
|
||||
}
|
||||
return this.item.name;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
showOrHide: function(id) {
|
||||
$('.category-name').html("").hide();
|
||||
$("img").attr("src", "").hide();
|
||||
$(".demo").html("").hide();
|
||||
this.item.children = this.item;
|
||||
this.show = true;
|
||||
$('.greeting, .offers').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function closeSubCategory() {
|
||||
$('.greeting, .offers, .layered-category').show();
|
||||
$('.sub-category, .sub-category').hide();
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
@php
|
||||
$category = app('Webkul\Category\Repositories\CategoryRepository');
|
||||
$categoryData = $category->find($category_id);
|
||||
$categoryNestedData = $category->getVisibleCategoryTree($category_id);
|
||||
@endphp
|
||||
|
||||
<child-category></child-category>
|
||||
|
||||
<script type="text/x-template" id="child-category-template">
|
||||
<i class="material-icons">chevron_right</i>
|
||||
|
||||
<h1>{{ $categoryData->name }}</h1>
|
||||
|
||||
@foreach($categoryNestedData as $index => $childrens)
|
||||
<li>
|
||||
{{ $childrens->name }}
|
||||
|
||||
@if($childrens->children && sizeof($childrens->children) > 0)
|
||||
<i class="material-icons"
|
||||
onclick="showOrHide()">
|
||||
chevron_right
|
||||
</i>
|
||||
@endif
|
||||
|
||||
</li>
|
||||
@endforeach
|
||||
</script>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
Vue.component('child-category', {
|
||||
|
||||
template: '#child-category-template',
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
categoryName: ''
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
this.categoryName = "menswear";
|
||||
},
|
||||
|
||||
created: function() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
showOrHide: function(id) {
|
||||
alert(id);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type=text/javascript>
|
||||
function showOrHide() {
|
||||
alert("showOrHide");
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
$isCustomer = auth()->guard('customer')->check();
|
||||
@endphp
|
||||
|
||||
<form>
|
||||
@if (isset($shipping) && $shipping)
|
||||
<div :class="`row col-12 ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
|
||||
<label for="shipping[first_name]" class="required">
|
||||
|
|
@ -494,5 +493,4 @@
|
|||
@php
|
||||
@endphp
|
||||
@endauth
|
||||
@endif
|
||||
</form>
|
||||
@endif
|
||||
Loading…
Reference in New Issue