Search Bar Component Breaked And Minified
This commit is contained in:
devansh bawari
parent
4ea3627a53
commit
b0bd3a30a9
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=1129edb15ba84e3f7d83",
|
||||
"/js/velocity.js": "/js/velocity.js?id=9d0aebc2bf58444011cd",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=10aa7ac507fb85f8acbc"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<a class="compare-btn unset" :href="src">
|
||||
<i class="material-icons">compare_arrows</i>
|
||||
|
||||
<div class="badge-container" v-if="compareCount > 0">
|
||||
<span class="badge" v-text="compareCount"></span>
|
||||
</div>
|
||||
|
||||
<span v-text="__('customer.compare.text')"></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['isCustomer', 'src'],
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
compareCount: 0
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$root.headerItemsCount': function() {
|
||||
this.updateHeaderItemsCount();
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this.updateHeaderItemsCount();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateHeaderItemsCount: function() {
|
||||
if (this.isCustomer !== 'true') {
|
||||
let comparedItems = this.getStorageValue('compared_product');
|
||||
|
||||
if (comparedItems) {
|
||||
this.compareCount = comparedItems.length;
|
||||
}
|
||||
} else {
|
||||
this.$http
|
||||
.get(`${this.$root.baseUrl}/items-count`)
|
||||
.then(response => {
|
||||
this.compareCount = response.data.compareProductsCount;
|
||||
})
|
||||
.catch(exception => {
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="btn-group full-width force-center">
|
||||
<div class="selectdiv">
|
||||
<select
|
||||
class="form-control fs13 styled-select"
|
||||
name="category"
|
||||
aria-label="Category"
|
||||
@change="focusInput($event)"
|
||||
>
|
||||
<option value="" v-text="__('header.all-categories')"></option>
|
||||
|
||||
<template
|
||||
v-for="(category, index) in $root.sharedRootCategories"
|
||||
>
|
||||
<option
|
||||
:key="index"
|
||||
selected="selected"
|
||||
:value="category.id"
|
||||
v-if="category.id == searchedQuery.category"
|
||||
v-text="category.name"
|
||||
>
|
||||
</option>
|
||||
|
||||
<option
|
||||
:key="index"
|
||||
:value="category.id"
|
||||
v-text="category.name"
|
||||
v-else
|
||||
></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<div class="select-icon-container d-inline-block float-right">
|
||||
<span class="select-icon rango-arrow-down"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
required
|
||||
name="term"
|
||||
type="search"
|
||||
class="form-control"
|
||||
:placeholder="__('header.search-text')"
|
||||
aria-label="Search"
|
||||
v-model:value="inputVal"
|
||||
/>
|
||||
|
||||
<slot name="image-search"></slot>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
id="header-search-icon"
|
||||
aria-label="Search"
|
||||
@click="submitForm"
|
||||
>
|
||||
<i class="fs16 fw6 rango-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
inputVal: '',
|
||||
searchedQuery: []
|
||||
};
|
||||
},
|
||||
|
||||
created: function() {
|
||||
let searchedItem = window.location.search.replace('?', '');
|
||||
searchedItem = searchedItem.split('&');
|
||||
|
||||
let updatedSearchedCollection = {};
|
||||
|
||||
searchedItem.forEach(item => {
|
||||
let splitedItem = item.split('=');
|
||||
updatedSearchedCollection[splitedItem[0]] = decodeURI(
|
||||
splitedItem[1]
|
||||
);
|
||||
});
|
||||
|
||||
if (updatedSearchedCollection['image-search'] == 1) {
|
||||
updatedSearchedCollection.term = '';
|
||||
}
|
||||
|
||||
this.searchedQuery = updatedSearchedCollection;
|
||||
|
||||
if (this.searchedQuery.term) {
|
||||
this.inputVal = decodeURIComponent(
|
||||
this.searchedQuery.term.split('+').join(' ')
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
focusInput: function(event) {
|
||||
$(event.target.parentElement.parentElement)
|
||||
.find('input')
|
||||
.focus();
|
||||
},
|
||||
|
||||
submitForm: function() {
|
||||
if (this.inputVal !== '') {
|
||||
$('input[name=term]').val(this.inputVal);
|
||||
$('#search-form').submit();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<a class="wishlist-btn unset" :href="src">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
<div class="badge-container" v-if="wishlistCount > 0">
|
||||
<span class="badge" v-text="wishlistCount"></span>
|
||||
</div>
|
||||
<span v-text="__('header.wishlist')"></span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['isCustomer', 'src'],
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
wishlistCount: 0
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$root.headerItemsCount': function() {
|
||||
this.updateHeaderItemsCount();
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this.updateHeaderItemsCount();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateHeaderItemsCount: function() {
|
||||
if (this.isCustomer == 'true') {
|
||||
this.$http
|
||||
.get(`${this.$root.baseUrl}/items-count`)
|
||||
.then(response => {
|
||||
this.wishlistCount =
|
||||
response.data.wishlistedProductsCount;
|
||||
})
|
||||
.catch(exception => {
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -85,6 +85,9 @@ Vue.component('star-ratings', require('./UI/components/star-rating'));
|
|||
Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
|
||||
Vue.component('quantity-changer', require('./UI/components/quantity-changer'));
|
||||
Vue.component('proceed-to-checkout', require('./UI/components/proceed-to-checkout'));
|
||||
Vue.component('compare-component-with-badge', require('./UI/components/header-compare-with-badge'));
|
||||
Vue.component('searchbar-component', require('./UI/components/header-searchbar'));
|
||||
Vue.component('wishlist-component-with-badge', require('./UI/components/header-wishlist-with-badge'));
|
||||
Vue.component('sidebar-header', require('./UI/components/sidebar-header'));
|
||||
Vue.component('right-side-header', require('./UI/components/right-side-header'));
|
||||
Vue.component('sidebar-component', require('./UI/components/sidebar'));
|
||||
|
|
|
|||
|
|
@ -389,7 +389,39 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<searchbar-component v-if="isSearchbar"></searchbar-component>
|
||||
<div class="right searchbar" v-if="isSearchbar">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="input-group">
|
||||
<form
|
||||
method="GET"
|
||||
role="search"
|
||||
id="search-form"
|
||||
action="{{ route('velocity.search.index') }}">
|
||||
|
||||
<div
|
||||
class="btn-toolbar full-width search-form"
|
||||
role="toolbar">
|
||||
|
||||
<searchbar-component>
|
||||
<template v-slot:image-search>
|
||||
<image-search-component
|
||||
status="{{core()->getConfigData('general.content.shop.image_search') == '1' ? 'true' : 'false'}}"
|
||||
upload-src="{{ route('shop.image.search.upload') }}"
|
||||
view-src="{{ route('shop.search.index') }}"
|
||||
common-error="{{ __('shop::app.common.error') }}"
|
||||
size-limit-error="{{ __('shop::app.common.image-upload-limit') }}">
|
||||
</image-search-component>
|
||||
</template>
|
||||
</searchbar-component>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,203 +1 @@
|
|||
@include('velocity::UI.header')
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/x-template" id="searchbar-template">
|
||||
<div class="right searchbar">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="input-group">
|
||||
<form
|
||||
method="GET"
|
||||
role="search"
|
||||
id="search-form"
|
||||
action="{{ route('velocity.search.index') }}">
|
||||
|
||||
<div
|
||||
class="btn-toolbar full-width"
|
||||
role="toolbar">
|
||||
|
||||
<div class="btn-group full-width force-center">
|
||||
<div class="selectdiv">
|
||||
<select class="form-control fs13 styled-select" name="category" @change="focusInput($event)" aria-label="Category">
|
||||
<option value="">
|
||||
{{ __('velocity::app.header.all-categories') }}
|
||||
</option>
|
||||
|
||||
<template v-for="(category, index) in $root.sharedRootCategories">
|
||||
<option
|
||||
:key="index"
|
||||
selected="selected"
|
||||
:value="category.id"
|
||||
v-if="(category.id == searchedQuery.category)">
|
||||
@{{ category.name }}
|
||||
</option>
|
||||
|
||||
<option :key="index" :value="category.id" v-else>
|
||||
@{{ category.name }}
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<div class="select-icon-container d-inline-block float-right">
|
||||
<span class="select-icon rango-arrow-down"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
required
|
||||
name="term"
|
||||
type="search"
|
||||
class="form-control"
|
||||
placeholder="{{ __('velocity::app.header.search-text') }}"
|
||||
aria-label="Search"
|
||||
v-model:value="inputVal" />
|
||||
|
||||
<image-search-component
|
||||
status="{{core()->getConfigData('general.content.shop.image_search') == '1' ? 'true' : 'false'}}"
|
||||
upload-src="{{ route('shop.image.search.upload') }}"
|
||||
view-src="{{ route('shop.search.index') }}"
|
||||
common-error="{{ __('shop::app.common.error') }}"
|
||||
size-limit-error="{{ __('shop::app.common.image-upload-limit') }}">
|
||||
</image-search-component>
|
||||
|
||||
<button class="btn" type="button" id="header-search-icon" aria-label="Search" @click="submitForm">
|
||||
<i class="fs16 fw6 rango-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7 col-md-12 vc-full-screen">
|
||||
<div class="left-wrapper">
|
||||
@php
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
|
||||
@if($showWishlist)
|
||||
<a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
|
||||
<i class="material-icons">favorite_border</i>
|
||||
<div class="badge-container" v-if="wishlistCount > 0">
|
||||
<span class="badge" v-text="wishlistCount"></span>
|
||||
</div>
|
||||
<span>{{ __('shop::app.layouts.wishlist') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
|
||||
@if ($showCompare)
|
||||
<a
|
||||
class="compare-btn unset"
|
||||
@auth('customer')
|
||||
href="{{ route('velocity.customer.product.compare') }}"
|
||||
@endauth
|
||||
|
||||
@guest('customer')
|
||||
href="{{ route('velocity.product.compare') }}"
|
||||
@endguest
|
||||
>
|
||||
|
||||
<i class="material-icons">compare_arrows</i>
|
||||
<div class="badge-container" v-if="compareCount > 0">
|
||||
<span class="badge" v-text="compareCount"></span>
|
||||
</div>
|
||||
<span>{{ __('velocity::app.customer.compare.text') }}</span>
|
||||
</a>
|
||||
@endif
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('searchbar-component', {
|
||||
template: '#searchbar-template',
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
inputVal: '',
|
||||
compareCount: 0,
|
||||
wishlistCount: 0,
|
||||
searchedQuery: [],
|
||||
isCustomer: '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$root.headerItemsCount': function () {
|
||||
this.updateHeaderItemsCount();
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
let searchedItem = window.location.search.replace("?", "");
|
||||
searchedItem = searchedItem.split('&');
|
||||
|
||||
let updatedSearchedCollection = {};
|
||||
|
||||
searchedItem.forEach(item => {
|
||||
let splitedItem = item.split('=');
|
||||
updatedSearchedCollection[splitedItem[0]] = decodeURI(splitedItem[1]);
|
||||
});
|
||||
|
||||
if (updatedSearchedCollection['image-search'] == 1) {
|
||||
updatedSearchedCollection.term = '';
|
||||
}
|
||||
|
||||
this.searchedQuery = updatedSearchedCollection;
|
||||
|
||||
if (this.searchedQuery.term) {
|
||||
this.inputVal = decodeURIComponent(this.searchedQuery.term.split('+').join(' '));
|
||||
}
|
||||
|
||||
this.updateHeaderItemsCount();
|
||||
},
|
||||
|
||||
methods: {
|
||||
'focusInput': function (event) {
|
||||
$(event.target.parentElement.parentElement).find('input').focus();
|
||||
},
|
||||
|
||||
'submitForm': function () {
|
||||
if (this.inputVal !== '') {
|
||||
$('input[name=term]').val(this.inputVal);
|
||||
$('#search-form').submit();
|
||||
}
|
||||
},
|
||||
|
||||
'updateHeaderItemsCount': function () {
|
||||
if (! this.isCustomer) {
|
||||
let comparedItems = this.getStorageValue('compared_product');
|
||||
|
||||
if (comparedItems) {
|
||||
this.compareCount = comparedItems.length;
|
||||
}
|
||||
} else {
|
||||
this.$http.get(`${this.$root.baseUrl}/items-count`)
|
||||
.then(response => {
|
||||
this.compareCount = response.data.compareProductsCount;
|
||||
this.wishlistCount = response.data.wishlistedProductsCount;
|
||||
})
|
||||
.catch(exception => {
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@endpush
|
||||
@include('velocity::UI.header')
|
||||
|
|
@ -4,7 +4,84 @@
|
|||
<img class="logo" src="{{ core()->getCurrentChannel()->logo_url ?? asset('themes/velocity/assets/images/logo-text.png') }}" alt="" />
|
||||
</a>
|
||||
|
||||
<searchbar-component></searchbar-component>
|
||||
<div class="right searchbar">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-12">
|
||||
<div class="input-group">
|
||||
<form
|
||||
method="GET"
|
||||
role="search"
|
||||
id="search-form"
|
||||
action="{{ route('velocity.search.index') }}">
|
||||
|
||||
<div
|
||||
class="btn-toolbar full-width"
|
||||
role="toolbar">
|
||||
|
||||
<searchbar-component>
|
||||
<template v-slot:image-search>
|
||||
<image-search-component
|
||||
status="{{core()->getConfigData('general.content.shop.image_search') == '1' ? 'true' : 'false'}}"
|
||||
upload-src="{{ route('shop.image.search.upload') }}"
|
||||
view-src="{{ route('shop.search.index') }}"
|
||||
common-error="{{ __('shop::app.common.error') }}"
|
||||
size-limit-error="{{ __('shop::app.common.image-upload-limit') }}">
|
||||
</image-search-component>
|
||||
</template>
|
||||
</searchbar-component>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7 col-md-12 vc-full-screen">
|
||||
<div class="left-wrapper">
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
|
||||
|
||||
@php
|
||||
$showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
@if($showWishlist)
|
||||
|
||||
<wishlist-component-with-badge
|
||||
is-customer="{{ auth()->guard('customer')->check() ? 'true' : 'false' }}"
|
||||
src="{{ route('customer.wishlist.index') }}">
|
||||
</wishlist-component-with-badge>
|
||||
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
|
||||
|
||||
@php
|
||||
$showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
|
||||
@endphp
|
||||
|
||||
@if ($showCompare)
|
||||
|
||||
<compare-component-with-badge
|
||||
is-customer="{{ auth()->guard('customer')->check() ? 'true' : 'false' }}"
|
||||
src="{{ auth()->guard('customer')->check() ? route('velocity.customer.product.compare') : route('velocity.product.compare') }}">
|
||||
</compare-component-with-badge>
|
||||
|
||||
@endif
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
|
||||
|
||||
@include('shop::checkout.cart.mini-cart')
|
||||
|
||||
{!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -14,7 +91,7 @@
|
|||
document.addEventListener('scroll', e => {
|
||||
scrollPosition = Math.round(window.scrollY);
|
||||
|
||||
if (scrollPosition > 50){
|
||||
if (scrollPosition > 50) {
|
||||
document.querySelector('header').classList.add('header-shadow');
|
||||
} else {
|
||||
document.querySelector('header').classList.remove('header-shadow');
|
||||
|
|
|
|||
Loading…
Reference in New Issue