You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.5 KiB
118 lines
3.5 KiB
|
|
$(document).ready( () => {
|
|
console.log('Load component - checkout')
|
|
|
|
const component = $('.component-checkout')
|
|
|
|
if(component.length) {
|
|
const place = component.find('.place-order')
|
|
const extraAddress = component.find('.different-address')
|
|
const extraAddressRadio = component.find('input[name="other_address"]')
|
|
let hasExtraAddress = false
|
|
|
|
place.off('.click').on('click.click', () => {
|
|
checkForm()
|
|
})
|
|
|
|
extraAddressRadio.off('.click').on('click.click', (e) => {
|
|
const checked = $(e.currentTarget).val()
|
|
hasExtraAddress = checked == 'yes'
|
|
if(checked == 'yes') {
|
|
extraAddress.stop().slideDown({
|
|
start: () => { extraAddress.css({ display: "flex" }) }
|
|
})
|
|
} else {
|
|
extraAddress.stop().slideUp()
|
|
}
|
|
})
|
|
|
|
const checkForm = () => {
|
|
const inputs = component.find('.input')
|
|
const passwords = component.find('.input[type="password"]')
|
|
let errors = 0
|
|
|
|
inputs.each( (i,e) => {
|
|
const input = $(e)
|
|
const type = input.prop('type')
|
|
const required = input.prop('required')
|
|
|
|
if(required) {
|
|
switch(type) {
|
|
case 'text':
|
|
case 'select-one':
|
|
if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(input.prop('name')) > -1) {
|
|
if(hasExtraAddress) {
|
|
if(!input.val().length) {
|
|
input.addClass('error')
|
|
errors++
|
|
} else { input.removeClass('error') }
|
|
}
|
|
} else {
|
|
if(!input.val().length) {
|
|
input.addClass('error')
|
|
errors++
|
|
} else { input.removeClass('error') }
|
|
}
|
|
break;
|
|
case 'email':
|
|
if(!/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
|
|
.test(input.val())) {
|
|
input.addClass('error')
|
|
errors++
|
|
} else { input.removeClass('error') }
|
|
break;
|
|
case 'password':
|
|
if(!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/
|
|
.test(input.val())) {
|
|
input.addClass('error')
|
|
errors++
|
|
} else { input.removeClass('error') }
|
|
break;
|
|
case 'checkbox':
|
|
if(!input.is(':checked')) {
|
|
input.closest('.checkbox').addClass('error')
|
|
errors++
|
|
} else {
|
|
input.closest('.checkbox').removeClass('error')
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
})
|
|
|
|
if(passwords[0].value != passwords[1].value) {
|
|
$(passwords[1]).addClass('error')
|
|
errors++
|
|
} else {
|
|
$(passwords[1]).removeClass('error')
|
|
}
|
|
|
|
if(!errors) {
|
|
let body = {}
|
|
inputs.each( (i,e) => {
|
|
const input = $(e)
|
|
const type = input.prop('type')
|
|
const name = input.prop('name')
|
|
|
|
if(['x_address', 'x_city', 'x_zip_code', 'x_province'].indexOf(name) > -1) {
|
|
if(hasExtraAddress) {
|
|
body[name] = input.val()
|
|
}
|
|
} else {
|
|
body[name] = input.val()
|
|
}
|
|
})
|
|
|
|
Apis.placeCart(body).then( (data) => {
|
|
const headerCart = $('.component-header .cart-cta .counter')
|
|
if(headerCart.length) {
|
|
headerCart.text(0)
|
|
}
|
|
}).catch( (error) => {
|
|
console.error(error)
|
|
})
|
|
|
|
}
|
|
}
|
|
}
|
|
})
|