221 lines
7.1 KiB
JavaScript
221 lines
7.1 KiB
JavaScript
/**
|
|
* Form Wizard
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
// rateyo (jquery)
|
|
$(function () {
|
|
var readOnlyRating = $('.read-only-ratings');
|
|
|
|
// Star rating
|
|
if (readOnlyRating) {
|
|
readOnlyRating.rateYo({
|
|
rtl: isRtl,
|
|
rating: 4,
|
|
starWidth: '20px',
|
|
spacing: '2px', // Spacing between the stars
|
|
starSvg:
|
|
'<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" /></svg>'
|
|
});
|
|
}
|
|
});
|
|
|
|
(function () {
|
|
// Init custom option check
|
|
window.Helpers.initCustomOptionCheck();
|
|
|
|
// libs
|
|
const creditCardMask = document.querySelector('.credit-card-mask'),
|
|
expiryDateMask = document.querySelector('.expiry-date-mask'),
|
|
cvvMask = document.querySelector('.cvv-code-mask');
|
|
|
|
// Credit Card
|
|
if (creditCardMask) {
|
|
new Cleave(creditCardMask, {
|
|
creditCard: true,
|
|
onCreditCardTypeChanged: function (type) {
|
|
if (type != '' && type != 'unknown') {
|
|
document.querySelector('.card-type').innerHTML =
|
|
'<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="20"/>';
|
|
} else {
|
|
document.querySelector('.card-type').innerHTML = '';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
// Expiry Date Mask
|
|
if (expiryDateMask) {
|
|
new Cleave(expiryDateMask, {
|
|
date: true,
|
|
delimiter: '/',
|
|
datePattern: ['m', 'y']
|
|
});
|
|
}
|
|
|
|
// CVV
|
|
if (cvvMask) {
|
|
new Cleave(cvvMask, {
|
|
numeral: true,
|
|
numeralPositiveOnly: true
|
|
});
|
|
}
|
|
|
|
// Wizard Checkout
|
|
// --------------------------------------------------------------------
|
|
|
|
const wizardCheckout = document.querySelector('#wizard-checkout');
|
|
if (typeof wizardCheckout !== undefined && wizardCheckout !== null) {
|
|
// Wizard form
|
|
const wizardCheckoutForm = wizardCheckout.querySelector('#wizard-checkout-form');
|
|
// Wizard steps
|
|
const wizardCheckoutFormStep1 = wizardCheckoutForm.querySelector('#checkout-cart');
|
|
const wizardCheckoutFormStep2 = wizardCheckoutForm.querySelector('#checkout-address');
|
|
const wizardCheckoutFormStep3 = wizardCheckoutForm.querySelector('#checkout-payment');
|
|
const wizardCheckoutFormStep4 = wizardCheckoutForm.querySelector('#checkout-confirmation');
|
|
// Wizard next prev button
|
|
const wizardCheckoutNext = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-next'));
|
|
const wizardCheckoutPrev = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-prev'));
|
|
|
|
let validationStepper = new Stepper(wizardCheckout, {
|
|
linear: false
|
|
});
|
|
|
|
// Cart
|
|
const FormValidation1 = FormValidation.formValidation(wizardCheckoutFormStep1, {
|
|
fields: {
|
|
// * Validate the fields here based on your requirements
|
|
},
|
|
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
|
// Use this for enabling/changing valid/invalid class
|
|
// eleInvalidClass: '',
|
|
eleValidClass: ''
|
|
// rowSelector: '.col-lg-6'
|
|
}),
|
|
autoFocus: new FormValidation.plugins.AutoFocus(),
|
|
submitButton: new FormValidation.plugins.SubmitButton()
|
|
}
|
|
}).on('core.form.valid', function () {
|
|
// Jump to the next step when all fields in the current step are valid
|
|
validationStepper.next();
|
|
});
|
|
|
|
// Address
|
|
const FormValidation2 = FormValidation.formValidation(wizardCheckoutFormStep2, {
|
|
fields: {
|
|
// * Validate the fields here based on your requirements
|
|
},
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
|
// Use this for enabling/changing valid/invalid class
|
|
// eleInvalidClass: '',
|
|
eleValidClass: ''
|
|
// rowSelector: '.col-lg-6'
|
|
}),
|
|
autoFocus: new FormValidation.plugins.AutoFocus(),
|
|
submitButton: new FormValidation.plugins.SubmitButton()
|
|
}
|
|
}).on('core.form.valid', function () {
|
|
// Jump to the next step when all fields in the current step are valid
|
|
validationStepper.next();
|
|
});
|
|
|
|
// Payment
|
|
const FormValidation3 = FormValidation.formValidation(wizardCheckoutFormStep3, {
|
|
fields: {
|
|
// * Validate the fields here based on your requirements
|
|
},
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
|
// Use this for enabling/changing valid/invalid class
|
|
// eleInvalidClass: '',
|
|
eleValidClass: ''
|
|
// rowSelector: '.col-lg-6'
|
|
}),
|
|
autoFocus: new FormValidation.plugins.AutoFocus(),
|
|
submitButton: new FormValidation.plugins.SubmitButton()
|
|
}
|
|
}).on('core.form.valid', function () {
|
|
validationStepper.next();
|
|
});
|
|
|
|
// Confirmation
|
|
const FormValidation4 = FormValidation.formValidation(wizardCheckoutFormStep4, {
|
|
fields: {
|
|
// * Validate the fields here based on your requirements
|
|
},
|
|
plugins: {
|
|
trigger: new FormValidation.plugins.Trigger(),
|
|
bootstrap5: new FormValidation.plugins.Bootstrap5({
|
|
// Use this for enabling/changing valid/invalid class
|
|
// eleInvalidClass: '',
|
|
eleValidClass: '',
|
|
rowSelector: '.col-md-12'
|
|
}),
|
|
autoFocus: new FormValidation.plugins.AutoFocus(),
|
|
submitButton: new FormValidation.plugins.SubmitButton()
|
|
}
|
|
}).on('core.form.valid', function () {
|
|
// You can submit the form
|
|
// wizardCheckoutForm.submit()
|
|
// or send the form data to server via an Ajax request
|
|
// To make the demo simple, I just placed an alert
|
|
alert('Submitted..!!');
|
|
});
|
|
|
|
wizardCheckoutNext.forEach(item => {
|
|
item.addEventListener('click', event => {
|
|
// When click the Next button, we will validate the current step
|
|
switch (validationStepper._currentIndex) {
|
|
case 0:
|
|
FormValidation1.validate();
|
|
break;
|
|
|
|
case 1:
|
|
FormValidation2.validate();
|
|
break;
|
|
|
|
case 2:
|
|
FormValidation3.validate();
|
|
break;
|
|
|
|
case 3:
|
|
FormValidation4.validate();
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
wizardCheckoutPrev.forEach(item => {
|
|
item.addEventListener('click', event => {
|
|
switch (validationStepper._currentIndex) {
|
|
case 3:
|
|
validationStepper.previous();
|
|
break;
|
|
|
|
case 2:
|
|
validationStepper.previous();
|
|
break;
|
|
|
|
case 1:
|
|
validationStepper.previous();
|
|
break;
|
|
|
|
case 0:
|
|
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
})();
|