Mini Cart Button Minified
This commit is contained in:
devansh bawari
parent
d20b802b0a
commit
f880fd6ab3
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"/js/velocity.js": "/js/velocity.js?id=7dee247dbf6aaea353ac",
|
||||
"/js/velocity.js": "/js/velocity.js?id=cbeee7c4fe3774005f85",
|
||||
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
|
||||
"/css/velocity.css": "/css/velocity.css?id=10aa7ac507fb85f8acbc"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<button
|
||||
type="button"
|
||||
id="mini-cart"
|
||||
@click="toggleMiniCart"
|
||||
:class="
|
||||
`btn btn-link disable-box-shadow ${
|
||||
itemCount == 0 ? 'cursor-not-allowed' : ''
|
||||
}`
|
||||
"
|
||||
>
|
||||
<div class="mini-cart-content">
|
||||
<i class="material-icons-outlined text-down-3">shopping_cart</i>
|
||||
<span class="badge" v-text="itemCount" v-if="itemCount != 0"></span>
|
||||
<span class="fs18 fw6 cart-text" v-text="cartText"></span>
|
||||
</div>
|
||||
|
||||
<div class="down-arrow-container">
|
||||
<span class="rango-arrow-down"></span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['itemCount', 'cartText'],
|
||||
|
||||
methods: {
|
||||
toggleMiniCart: function() {
|
||||
let modal = $('#cart-modal-content')[0];
|
||||
|
||||
if (modal) modal.classList.toggle('hide');
|
||||
|
||||
let accountModal = $('.account-modal')[0];
|
||||
|
||||
if (accountModal) accountModal.classList.add('hide');
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,37 +1,63 @@
|
|||
<template>
|
||||
<div :class="`dropdown ${cartItems.length > 0 ? '' : 'disable-active'}`">
|
||||
<cart-btn :item-count="cartItems.length"></cart-btn>
|
||||
<mini-cart-button
|
||||
:item-count="cartItems.length"
|
||||
:cart-text="cartText"
|
||||
></mini-cart-button>
|
||||
|
||||
<div
|
||||
id="cart-modal-content"
|
||||
v-if="cartItems.length > 0"
|
||||
class="modal-content sensitive-modal cart-modal-content hide">
|
||||
|
||||
class="modal-content sensitive-modal cart-modal-content hide"
|
||||
>
|
||||
<div class="mini-cart-container">
|
||||
<div class="row small-card-container" :key="index" v-for="(item, index) in cartItems">
|
||||
<div
|
||||
class="row small-card-container"
|
||||
:key="index"
|
||||
v-for="(item, index) in cartItems"
|
||||
>
|
||||
<div class="col-3 product-image-container mr15">
|
||||
<a @click="removeProduct(item.id)">
|
||||
<span class="rango-close"></span>
|
||||
</a>
|
||||
|
||||
<a class="unset" :href="`${$root.baseUrl}/${item.url_key}`">
|
||||
<a
|
||||
class="unset"
|
||||
:href="`${$root.baseUrl}/${item.url_key}`"
|
||||
>
|
||||
<div
|
||||
class="product-image"
|
||||
:style="`background-image: url(${item.images.medium_image_url});`">
|
||||
</div>
|
||||
:style="
|
||||
`background-image: url(${item.images.medium_image_url});`
|
||||
"
|
||||
></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-9 no-padding card-body align-vertical-top">
|
||||
<div class="no-padding">
|
||||
<div class="fs16 text-nowrap fw6" v-html="item.name"></div>
|
||||
<div
|
||||
class="fs16 text-nowrap fw6"
|
||||
v-html="item.name"
|
||||
></div>
|
||||
|
||||
<div class="fs18 card-current-price fw6">
|
||||
<div class="display-inbl">
|
||||
<label class="fw5">{{ __('checkout.qty') }}</label>
|
||||
<input type="text" disabled :value="item.quantity" class="ml5" />
|
||||
<label class="fw5">{{
|
||||
__('checkout.qty')
|
||||
}}</label>
|
||||
<input
|
||||
type="text"
|
||||
disabled
|
||||
:value="item.quantity"
|
||||
class="ml5"
|
||||
/>
|
||||
</div>
|
||||
<span class="card-total-price fw6">
|
||||
{{ isTaxInclusive == '1' ? item.base_total_with_tax : item.base_total }}
|
||||
{{
|
||||
isTaxInclusive == '1'
|
||||
? item.base_total_with_tax
|
||||
: item.base_total
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,17 +70,25 @@
|
|||
{{ subtotalText }}
|
||||
</h5>
|
||||
|
||||
<h5 class="col-6 text-right fw6 no-padding">{{ isTaxInclusive == '1' ? cartInformation.base_grand_total : cartInformation.base_sub_total }}</h5>
|
||||
<h5 class="col-6 text-right fw6 no-padding">
|
||||
{{
|
||||
isTaxInclusive == '1'
|
||||
? cartInformation.base_grand_total
|
||||
: cartInformation.base_sub_total
|
||||
}}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<a class="col text-left fs16 link-color remove-decoration" :href="viewCart">{{ cartText }}</a>
|
||||
<a
|
||||
class="col text-left fs16 link-color remove-decoration"
|
||||
:href="viewCartRoute"
|
||||
>{{ viewCartText }}</a
|
||||
>
|
||||
|
||||
<div class="col text-right no-padding">
|
||||
<a :href="checkoutUrl" @click="checkMinimumOrder($event)">
|
||||
<button
|
||||
type="button"
|
||||
class="theme-btn fs16 fw6">
|
||||
<a :href="checkoutRoute" @click="checkMinimumOrder($event)">
|
||||
<button type="button" class="theme-btn fs16 fw6">
|
||||
{{ checkoutText }}
|
||||
</button>
|
||||
</a>
|
||||
|
|
@ -65,79 +99,88 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'isTaxInclusive',
|
||||
'cartText',
|
||||
'viewCart',
|
||||
'checkoutUrl',
|
||||
'checkoutText',
|
||||
'subtotalText',
|
||||
'checkMinimumOrderUrl'
|
||||
],
|
||||
export default {
|
||||
props: [
|
||||
'isTaxInclusive',
|
||||
'viewCartRoute',
|
||||
'checkoutRoute',
|
||||
'checkMinimumOrderRoute',
|
||||
'cartText',
|
||||
'viewCartText',
|
||||
'checkoutText',
|
||||
'subtotalText'
|
||||
],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
cartItems: [],
|
||||
cartInformation: [],
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
cartItems: [],
|
||||
cartInformation: []
|
||||
};
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
mounted: function() {
|
||||
this.getMiniCartDetails();
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$root.miniCartKey': function() {
|
||||
this.getMiniCartDetails();
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$root.miniCartKey': function () {
|
||||
this.getMiniCartDetails();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getMiniCartDetails: function () {
|
||||
this.$http.get(`${this.$root.baseUrl}/mini-cart`)
|
||||
methods: {
|
||||
getMiniCartDetails: function() {
|
||||
this.$http
|
||||
.get(`${this.$root.baseUrl}/mini-cart`)
|
||||
.then(response => {
|
||||
if (response.data.status) {
|
||||
this.cartItems = response.data.mini_cart.cart_items;
|
||||
this.cartInformation = response.data.mini_cart.cart_details;
|
||||
this.cartInformation =
|
||||
response.data.mini_cart.cart_details;
|
||||
}
|
||||
})
|
||||
.catch(exception => {
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
removeProduct: function (productId) {
|
||||
this.$http.delete(`${this.$root.baseUrl}/cart/remove/${productId}`)
|
||||
removeProduct: function(productId) {
|
||||
this.$http
|
||||
.delete(`${this.$root.baseUrl}/cart/remove/${productId}`)
|
||||
.then(response => {
|
||||
this.cartItems = this.cartItems.filter(item => item.id != productId);
|
||||
this.cartItems = this.cartItems.filter(
|
||||
item => item.id != productId
|
||||
);
|
||||
this.$root.miniCartKey++;
|
||||
|
||||
window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
|
||||
window.showAlert(
|
||||
`alert-${response.data.status}`,
|
||||
response.data.label,
|
||||
response.data.message
|
||||
);
|
||||
})
|
||||
.catch(exception => {
|
||||
console.log(this.__('error.something_went_wrong'));
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
checkMinimumOrder: function (e) {
|
||||
e.preventDefault();
|
||||
checkMinimumOrder: function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.$http.post(this.checkMinimumOrderUrl)
|
||||
.then(({ data }) => {
|
||||
if (! data.status) {
|
||||
window.showAlert(`alert-warning`, 'Warning', data.message);
|
||||
} else {
|
||||
window.location.href = this.checkoutUrl;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$http.post(this.checkMinimumOrderRoute).then(({ data }) => {
|
||||
if (!data.status) {
|
||||
window.showAlert(`alert-warning`, 'Warning', data.message);
|
||||
} else {
|
||||
window.location.href = this.checkoutRoute;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ Vue.filter('currency', function(value, argument) {
|
|||
* UI components.
|
||||
**/
|
||||
Vue.component('vue-slider', require('vue-slider-component'));
|
||||
Vue.component('mini-cart-button', require('./UI/components/mini-cart-button'));
|
||||
Vue.component('mini-cart', require('./UI/components/mini-cart'));
|
||||
Vue.component('modal-component', require('./UI/components/modal'));
|
||||
Vue.component('add-to-cart', require('./UI/components/add-to-cart'));
|
||||
|
|
|
|||
|
|
@ -1,22 +1,4 @@
|
|||
@push('scripts')
|
||||
<script type="text/x-template" id="cart-btn-template">
|
||||
<button
|
||||
type="button"
|
||||
id="mini-cart"
|
||||
@click="toggleMiniCart"
|
||||
:class="`btn btn-link disable-box-shadow ${itemCount == 0 ? 'cursor-not-allowed' : ''}`">
|
||||
|
||||
<div class="mini-cart-content">
|
||||
<i class="material-icons-outlined text-down-3">shopping_cart</i>
|
||||
<span class="badge" v-text="itemCount" v-if="itemCount != 0"></span>
|
||||
<span class="fs18 fw6 cart-text">{{ __('velocity::app.minicart.cart') }}</span>
|
||||
</div>
|
||||
<div class="down-arrow-container">
|
||||
<span class="rango-arrow-down"></span>
|
||||
</div>
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="close-btn-template">
|
||||
<button type="button" class="close disable-box-shadow">
|
||||
<span class="white-text fs20" @click="togglePopup">×</span>
|
||||
|
|
@ -169,26 +151,6 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
(() => {
|
||||
Vue.component('cart-btn', {
|
||||
template: '#cart-btn-template',
|
||||
|
||||
props: ['itemCount'],
|
||||
|
||||
methods: {
|
||||
toggleMiniCart: function () {
|
||||
let modal = $('#cart-modal-content')[0];
|
||||
if (modal)
|
||||
modal.classList.toggle('hide');
|
||||
|
||||
let accountModal = $('.account-modal')[0];
|
||||
if (accountModal)
|
||||
accountModal.classList.add('hide');
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('close-btn', {
|
||||
template: '#close-btn-template',
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<div class="mini-cart-container">
|
||||
<mini-cart
|
||||
is-tax-inclusive="{{ Webkul\Tax\Helpers\Tax::isTaxInclusive() }}"
|
||||
view-cart="{{ route('shop.checkout.cart.index') }}"
|
||||
cart-text="{{ __('shop::app.minicart.view-cart') }}"
|
||||
view-cart-route="{{ route('shop.checkout.cart.index') }}"
|
||||
checkout-route="{{ route('shop.checkout.onepage.index') }}"
|
||||
check-minimum-order-route="{{ route('shop.checkout.check-minimum-order') }}"
|
||||
cart-text="{{ __('shop::app.minicart.cart') }}"
|
||||
view-cart-text="{{ __('shop::app.minicart.view-cart') }}"
|
||||
checkout-text="{{ __('shop::app.minicart.checkout') }}"
|
||||
checkout-url="{{ route('shop.checkout.onepage.index') }}"
|
||||
subtotal-text="{{ __('shop::app.checkout.cart.cart-subtotal') }}"
|
||||
check-minimum-order-url="{{ route('shop.checkout.check-minimum-order') }}">
|
||||
subtotal-text="{{ __('shop::app.checkout.cart.cart-subtotal') }}">
|
||||
</mini-cart>
|
||||
</div>
|
||||
Loading…
Reference in New Issue