Quantity Changer Minified

This commit is contained in:
devansh bawari 2021-07-28 12:15:50 +05:30
parent f880fd6ab3
commit 2234610f59
9 changed files with 124 additions and 117 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
{
"/js/velocity.js": "/js/velocity.js?id=cbeee7c4fe3774005f85",
"/js/velocity.js": "/js/velocity.js?id=e8c790ebdb079c2160e5",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=10aa7ac507fb85f8acbc"
}

View File

@ -0,0 +1,96 @@
<template>
<div
:class="
`quantity control-group ${
errors.has(controlName) ? 'has-error' : ''
}`
"
>
<label
class="required"
for="quantity-changer"
v-text="quantityText"
></label>
<button type="button" class="decrease" @click="decreaseQty()">-</button>
<input
:value="qty"
class="control"
:name="controlName"
:v-validate="validations"
id="quantity-changer"
:data-vv-as="`&quot;${quantityText}&quot;`"
readonly
/>
<button type="button" class="increase" @click="increaseQty()">+</button>
<span class="control-error" v-if="errors.has(controlName)">{{
errors.first(controlName)
}}</span>
</div>
</template>
<script>
export default {
template: '#quantity-changer-template',
inject: ['$validator'],
props: {
controlName: {
type: String,
default: 'quantity'
},
quantity: {
type: [Number, String],
default: 1
},
quantityText: {
type: String,
default: 'Quantity'
},
minQuantity: {
type: [Number, String],
default: 1
},
validations: {
type: String,
default: 'required|numeric|min_value:1'
}
},
data: function() {
return {
qty: this.quantity
};
},
watch: {
quantity: function(val) {
this.qty = val;
this.$emit('onQtyUpdated', this.qty);
}
},
methods: {
decreaseQty: function() {
if (this.qty > this.minQuantity) this.qty = parseInt(this.qty) - 1;
this.$emit('onQtyUpdated', this.qty);
},
increaseQty: function() {
this.qty = parseInt(this.qty) + 1;
this.$emit('onQtyUpdated', this.qty);
}
}
};
</script>

View File

@ -30,6 +30,22 @@ window.Carousel = VueCarousel;
window.VeeValidate = VeeValidate;
window.jQuery = window.$ = require('jquery');
window.BootstrapSass = require('bootstrap-sass');
window.showAlert = (messageType, messageLabel, message) => {
if (messageType && message !== '') {
let alertId = Math.floor(Math.random() * 1000);
let html = `<div class="alert ${messageType} alert-dismissible" id="${alertId}">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>${messageLabel ? messageLabel + '!' : ''} </strong> ${message}.
</div>`;
$('#alert-container').append(html).ready(() => {
window.setTimeout(() => {
$(`#alert-container #${alertId}`).remove();
}, 5000);
});
}
};
/**
* Vue use.
@ -67,6 +83,7 @@ Vue.component('modal-component', require('./UI/components/modal'));
Vue.component('add-to-cart', require('./UI/components/add-to-cart'));
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('sidebar-component', require('./UI/components/sidebar'));
Vue.component('product-card', require('./UI/components/product-card'));
@ -94,7 +111,7 @@ Vue.component('velocity-overlay-loader', require('./UI/components/overlay-loader
/**
* Start from here.
**/
$(document).ready(function() {
$(function() {
/**
* Define a mixin object.
*/
@ -439,21 +456,4 @@ $(document).ready(function() {
});
window.app = app;
window.showAlert = (messageType, messageLabel, message) => {
if (messageType && message !== '') {
let alertId = Math.floor(Math.random() * 1000);
let html = `<div class="alert ${messageType} alert-dismissible" id="${alertId}">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>${messageLabel ? messageLabel + '!' : ''} </strong> ${message}.
</div>`;
$('#alert-container').append(html).ready(() => {
window.setTimeout(() => {
$(`#alert-container #${alertId}`).remove();
}, 5000);
});
}
};
});

View File

@ -1,31 +1,3 @@
@push('scripts')
<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>
</button>
</script>
<script type="text/x-template" id="quantity-changer-template">
<div :class="`quantity control-group ${errors.has(controlName) ? 'has-error' : ''}`">
<label class="required" for="quantity-changer">{{ __('shop::app.products.quantity') }}</label>
<button type="button" class="decrease" @click="decreaseQty()">-</button>
<input
:value="qty"
class="control"
:name="controlName"
:v-validate="validations"
id="quantity-changer"
data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;"
readonly />
<button type="button" class="increase" @click="increaseQty()">+</button>
<span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
</div>
</script>
@endpush
@include('velocity::UI.header')
@push('scripts')
@ -151,71 +123,6 @@
<script type="text/javascript">
(() => {
Vue.component('close-btn', {
template: '#close-btn-template',
methods: {
togglePopup: function () {
$('#cart-modal-content').hide();
}
}
});
Vue.component('quantity-changer', {
template: '#quantity-changer-template',
inject: ['$validator'],
props: {
controlName: {
type: String,
default: 'quantity'
},
quantity: {
type: [Number, String],
default: 1
},
minQuantity: {
type: [Number, String],
default: 1
},
validations: {
type: String,
default: 'required|numeric|min_value:1'
}
},
data: function() {
return {
qty: this.quantity
}
},
watch: {
quantity: function (val) {
this.qty = val;
this.$emit('onQtyUpdated', this.qty)
}
},
methods: {
decreaseQty: function() {
if (this.qty > this.minQuantity)
this.qty = parseInt(this.qty) - 1;
this.$emit('onQtyUpdated', this.qty)
},
increaseQty: function() {
this.qty = parseInt(this.qty) + 1;
this.$emit('onQtyUpdated', this.qty)
}
}
});
Vue.component('searchbar-component', {
template: '#searchbar-template',

View File

@ -166,7 +166,8 @@
<div class="product-quantity col-3 no-padding">
<quantity-changer
:control-name="'qty[{{$item->id}}]'"
quantity="{{ $item->quantity }}">
quantity="{{ $item->quantity }}"
quantity-text="{{ __('shop::app.products.quantity') }}">
</quantity-changer>
</div>
@ -222,7 +223,8 @@
<div class="product-quantity col-lg-4 col-6 no-padding">
<quantity-changer
:control-name="'qty[{{$item->id}}]'"
quantity="{{ $item->quantity }}">
quantity="{{ $item->quantity }}"
quantity-text="{{ __('shop::app.products.quantity') }}">
</quantity-changer>
</div>

View File

@ -175,7 +175,7 @@
@if ($product->getTypeInstance()->showQuantityBox())
<div>
<quantity-changer></quantity-changer>
<quantity-changer quantity-text="{{ __('shop::app.products.quantity') }}"></quantity-changer>
</div>
@else
<input type="hidden" name="quantity" value="1">

View File

@ -34,7 +34,7 @@
<div class="bundle-summary">
<h3 class="mb10">{{ __('shop::app.products.your-customization') }}</h3>
<quantity-changer></quantity-changer>
<quantity-changer quantity-text="{{ __('shop::app.products.quantity') }}"></quantity-changer>
<div class="control-group">
<label>{{ __('shop::app.products.total-amount') }}</label>
@ -132,6 +132,7 @@
:control-name="'bundle_option_qty[' + option.id + ']'"
:validations="parseInt(selected_product) ? 'required|numeric|min_value:1' : ''"
:quantity="product_qty"
quantity-text="{{ __('shop::app.products.quantity') }}"
@onQtyUpdated="qtyUpdated($event)">
</quantity-changer>
</div>

View File

@ -23,6 +23,7 @@
:control-name="'qty[{{$groupedProduct->associated_product_id}}]'"
:validations="'required|numeric|min_value:0'"
quantity="{{ $groupedProduct->qty }}"
quantity-text="{{ __('shop::app.products.quantity') }}"
min-quantity="0">
</quantity-changer>
</span>