https://app.veralytic.com/assets/js/wizard-ex-checkout.kw5g21kl5k.js

1/**
2 *  Form Wizard
3 */
4
5'use strict';
6
7// rateyo (jquery)
8$(function () {
9  var readOnlyRating = $('.read-only-ratings');
10
11  // Star rating
12  if (readOnlyRating) {
13    readOnlyRating.rateYo({
14      rtl: isRtl,
15      rating: 4,
16      starWidth: '20px',
17      spacing: '5px'
18    });
19  }
20});
21
22(function () {
23  // Init custom option check
24  window.Helpers.initCustomOptionCheck();
25
26  // libs
27  const creditCardMask = document.querySelector('.credit-card-mask'),
28    expiryDateMask = document.querySelector('.expiry-date-mask'),
29    cvvMask = document.querySelector('.cvv-code-mask');
30
31  // Credit Card
32  if (creditCardMask) {
33    new Cleave(creditCardMask, {
34      creditCard: true,
35      onCreditCardTypeChanged: function (type) {
36        if (type != '' && type != 'unknown') {
37          document.querySelector('.card-type').innerHTML =
38            '<img src="' + assetsPath + 'img/icons/payments/' + type + '-cc.png" height="28"/>';
39        } else {
40          document.querySelector('.card-type').innerHTML = '';
41        }
42      }
43    });
44  }
45  // Expiry Date Mask
46  if (expiryDateMask) {
47    new Cleave(expiryDateMask, {
48      date: true,
49      delimiter: '/',
50      datePattern: ['m', 'y']
51    });
52  }
53
54  // CVV
55  if (cvvMask) {
56    new Cleave(cvvMask, {
57      numeral: true,
58      numeralPositiveOnly: true
59    });
60  }
61
62  // Wizard Checkout
63  // --------------------------------------------------------------------
64
65  const wizardCheckout = document.querySelector('#wizard-checkout');
66  if (typeof wizardCheckout !== undefined && wizardCheckout !== null) {
67    // Wizard form
68    const wizardCheckoutForm = wizardCheckout.querySelector('#wizard-checkout-form');
69    // Wizard steps
70    const wizardCheckoutFormStep1 = wizardCheckoutForm.querySelector('#checkout-cart');
71    const wizardCheckoutFormStep2 = wizardCheckoutForm.querySelector('#checkout-address');
72    const wizardCheckoutFormStep3 = wizardCheckoutForm.querySelector('#checkout-payment');
73    const wizardCheckoutFormStep4 = wizardCheckoutForm.querySelector('#checkout-confirmation');
74    // Wizard next prev button
75    const wizardCheckoutNext = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-next'));
76    const wizardCheckoutPrev = [].slice.call(wizardCheckoutForm.querySelectorAll('.btn-prev'));
77
78    let validationStepper = new Stepper(wizardCheckout, {
79      linear: false
80    });
81
82    // Cart
83    const FormValidation1 = FormValidation.formValidation(wizardCheckoutFormStep1, {
84      fields: {
85        // * Validate the fields here based on your requirements
86      },
87
88      plugins: {
89        trigger: new FormValidation.plugins.Trigger(),
90        bootstrap5: new FormValidation.plugins.Bootstrap5({
91          // Use this for enabling/changing valid/invalid class
92          // eleInvalidClass: '',
93          eleValidClass: ''
94          // rowSelector: '.col-lg-6'
95        }),
96        autoFocus: new FormValidation.plugins.AutoFocus(),
97        submitButton: new FormValidation.plugins.SubmitButton()
98      }
99    }).on('core.form.valid', function () {
100      // Jump to the next step when all fields in the current step are valid
101      validationStepper.next();
102    });
103
104    // Address
105    const FormValidation2 = FormValidation.formValidation(wizardCheckoutFormStep2, {
106      fields: {
107        // * Validate the fields here based on your requirements
108      },
109      plugins: {
110        trigger: new FormValidation.plugins.Trigger(),
111        bootstrap5: new FormValidation.plugins.Bootstrap5({
112          // Use this for enabling/changing valid/invalid class
113          // eleInvalidClass: '',
114          eleValidClass: ''
115          // rowSelector: '.col-lg-6'
116        }),
117        autoFocus: new FormValidation.plugins.AutoFocus(),
118        submitButton: new FormValidation.plugins.SubmitButton()
119      }
120    }).on('core.form.valid', function () {
121      // Jump to the next step when all fields in the current step are valid
122      validationStepper.next();
123    });
124
125    // Payment
126    const FormValidation3 = FormValidation.formValidation(wizardCheckoutFormStep3, {
127      fields: {
128        // * Validate the fields here based on your requirements
129      },
130      plugins: {
131        trigger: new FormValidation.plugins.Trigger(),
132        bootstrap5: new FormValidation.plugins.Bootstrap5({
133          // Use this for enabling/changing valid/invalid class
134          // eleInvalidClass: '',
135          eleValidClass: ''
136          // rowSelector: '.col-lg-6'
137        }),
138        autoFocus: new FormValidation.plugins.AutoFocus(),
139        submitButton: new FormValidation.plugins.SubmitButton()
140      }
141    }).on('core.form.valid', function () {
142      validationStepper.next();
143    });
144
145    // Confirmation
146    const FormValidation4 = FormValidation.formValidation(wizardCheckoutFormStep4, {
147      fields: {
148        // * Validate the fields here based on your requirements
149      },
150      plugins: {
151        trigger: new FormValidation.plugins.Trigger(),
152        bootstrap5: new FormValidation.plugins.Bootstrap5({
153          // Use this for enabling/changing valid/invalid class
154          // eleInvalidClass: '',
155          eleValidClass: '',
156          rowSelector: '.col-md-12'
157        }),
158        autoFocus: new FormValidation.plugins.AutoFocus(),
159        submitButton: new FormValidation.plugins.SubmitButton()
160      }
161    }).on('core.form.valid', function () {
162      // You can submit the form
163      // wizardCheckoutForm.submit()
164      // or send the form data to server via an Ajax request
165      // To make the demo simple, I just placed an alert
166      alert('Submitted..!!');
167    });
168
169    wizardCheckoutNext.forEach(item => {
170      item.addEventListener('click', event => {
171        // When click the Next button, we will validate the current step
172        switch (validationStepper._currentIndex) {
173          case 0:
174            FormValidation1.validate();
175            break;
176
177          case 1:
178            FormValidation2.validate();
179            break;
180
181          case 2:
182            FormValidation3.validate();
183            break;
184
185          case 3:
186            FormValidation4.validate();
187            break;
188
189          default:
190            break;
191        }
192      });
193    });
194
195    wizardCheckoutPrev.forEach(item => {
196      item.addEventListener('click', event => {
197        switch (validationStepper._currentIndex) {
198          case 3:
199            validationStepper.previous();
200            break;
201
202          case 2:
203            validationStepper.previous();
204            break;
205
206          case 1:
207            validationStepper.previous();
208            break;
209
210          case 0:
211
212          default:
213            break;
214        }
215      });
216    });
217  }
218})();