Quantity Changer Minified
This commit is contained in:
parent
f880fd6ab3
commit
2234610f59
File diff suppressed because one or more lines are too long
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="`"${quantityText}"`"
|
||||
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>
|
||||
|
|
@ -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">×</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">×</a>
|
||||
<strong>${messageLabel ? messageLabel + '!' : ''} </strong> ${message}.
|
||||
</div>`;
|
||||
|
||||
$('#alert-container').append(html).ready(() => {
|
||||
window.setTimeout(() => {
|
||||
$(`#alert-container #${alertId}`).remove();
|
||||
}, 5000);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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=""{{ __('shop::app.products.quantity') }}""
|
||||
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',
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue