153 lines
4.0 KiB
JavaScript
153 lines
4.0 KiB
JavaScript
(($) => {
|
|
if (typeof shopmagic_presubmit_params === 'undefined') {
|
|
return false;
|
|
}
|
|
|
|
const {
|
|
email_capture_selectors: emailFields,
|
|
checkout_capture_selectors: checkoutFields,
|
|
language,
|
|
capture_email_url: captureEmailUrl,
|
|
capture_checkout_field_url: captureCheckoutFieldUrl,
|
|
} = shopmagic_presubmit_params;
|
|
|
|
class CheckoutStrategy {
|
|
constructor() {
|
|
this.email = '';
|
|
this.checkoutFieldsData = Object.fromEntries(checkoutFields.map(field => [field, '']));
|
|
this.captureEmailXhr = null;
|
|
}
|
|
|
|
init() {
|
|
throw new Error('init method must be implemented');
|
|
}
|
|
|
|
captureEmail(newEmail) {
|
|
if (!newEmail || this.email === newEmail) {
|
|
return;
|
|
}
|
|
|
|
this.email = newEmail;
|
|
|
|
const data = {
|
|
email: this.email,
|
|
language,
|
|
checkout_fields: this.getCheckoutFieldValues()
|
|
};
|
|
|
|
if (this.captureEmailXhr) {
|
|
this.captureEmailXhr.abort();
|
|
}
|
|
|
|
this.captureEmailXhr = $.post(captureEmailUrl, data);
|
|
}
|
|
|
|
captureCheckoutField(fieldName, fieldValue) {
|
|
if (!fieldName || !checkoutFields.includes(fieldName)) {
|
|
return;
|
|
}
|
|
|
|
if (!fieldValue || this.checkoutFieldsData[fieldName] === fieldValue) {
|
|
return;
|
|
}
|
|
|
|
this.checkoutFieldsData[fieldName] = fieldValue;
|
|
|
|
$.post(captureCheckoutFieldUrl, {
|
|
field_name: fieldName,
|
|
field_value: fieldValue
|
|
});
|
|
}
|
|
|
|
getCheckoutFieldValues() {
|
|
throw new Error('getCheckoutFieldValues method must be implemented');
|
|
}
|
|
}
|
|
|
|
class LegacyCheckoutStrategy extends CheckoutStrategy {
|
|
constructor() {
|
|
super();
|
|
this.$checkoutForm = $('form.checkout');
|
|
}
|
|
|
|
init() {
|
|
$(document).on('blur change', emailFields.join(', '), (e) => this.captureEmail(e.target.value));
|
|
this.$checkoutForm.on('change', 'select', (e) => this.captureCheckoutField(e.target.name, e.target.value));
|
|
this.$checkoutForm.on('blur change', '.input-text', (e) => this.captureCheckoutField(e.target.name, e.target.value));
|
|
}
|
|
|
|
getCheckoutFieldValues() {
|
|
return Object.fromEntries(
|
|
checkoutFields.map(
|
|
fieldName => [
|
|
fieldName,
|
|
this.$checkoutForm.find(`[name="${fieldName}"]`).val()
|
|
]
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
class BlockCheckoutStrategy extends CheckoutStrategy {
|
|
init() {
|
|
$(document).on('blur change', emailFields.join(', '), (e) => this.captureEmail(e.target.value));
|
|
$(document).on(
|
|
'blur change',
|
|
'[class*="wc-block-components-address-form__"] input, [class*="wc-block-components-address-form__"] select',
|
|
(e) => {
|
|
const fieldName = this.getFieldNameFromClass(e.target);
|
|
this.captureCheckoutField(fieldName, e.target.value);
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @param {HTMLElement} element
|
|
*/
|
|
getFieldNameFromClass(element) {
|
|
const containerElement = element.closest('[class*="wc-block-components-address-form__"');
|
|
if (!containerElement) {
|
|
return element.name;
|
|
}
|
|
|
|
const nameFromClass = [...containerElement.classList]
|
|
.find(className => className.startsWith('wc-block-components-address-form__'))
|
|
.replace('wc-block-components-address-form__', '');
|
|
|
|
return nameFromClass || element.name;
|
|
}
|
|
|
|
getCheckoutFieldValues() {
|
|
return Object.fromEntries(
|
|
checkoutFields.map(
|
|
fieldName => [
|
|
fieldName,
|
|
$(`[class*="wc-block-components-address-form__${fieldName}"] input, [class*="wc-block-components-address-form__${fieldName}"] select`).val()
|
|
]
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
class CheckoutContext {
|
|
constructor() {
|
|
this.strategy = this.detectCheckoutType();
|
|
}
|
|
|
|
detectCheckoutType() {
|
|
return $('.wc-block-checkout').length > 0
|
|
? new BlockCheckoutStrategy()
|
|
: new LegacyCheckoutStrategy();
|
|
}
|
|
|
|
init() {
|
|
this.strategy.init();
|
|
}
|
|
}
|
|
|
|
$(document).on('init_checkout', () => {
|
|
const checkoutContext = new CheckoutContext();
|
|
checkoutContext.init();
|
|
})
|
|
})(jQuery);
|