220 lines
4.9 KiB
JavaScript
220 lines
4.9 KiB
JavaScript
/* global wu_template_switching_params, Vue, wu_create_cookie, wu_listen_to_cookie_change */
|
|
(function($, hooks) {
|
|
|
|
/*
|
|
* Sets up the cookie listener for template selection.
|
|
*/
|
|
hooks.addAction('wu_checkout_loaded', 'nextpress/wp-ultimo', function() {
|
|
|
|
/*
|
|
* Resets the template selection cookie.
|
|
*/
|
|
wu_create_cookie('wu_template', false);
|
|
|
|
/*
|
|
* Listens for changes and set the template if one is detected.
|
|
*/
|
|
wu_listen_to_cookie_change('wu_template', function(value) {
|
|
|
|
window.wu_template_switching.template_id = value;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
|
|
const dynamic = {
|
|
functional: true,
|
|
template: '#dynamic',
|
|
props: ['template'],
|
|
render(h, context) {
|
|
|
|
const template = context.props.template;
|
|
|
|
const component = template ? { template } : '<div>nbsp;</div>';
|
|
|
|
return h(component);
|
|
|
|
},
|
|
};
|
|
|
|
hooks.doAction('wu_checkout_loaded');
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
window.wu_template_switching = new Vue({
|
|
el: '#wp-ultimo-form-wu-template-switching-form',
|
|
data() {
|
|
|
|
return {
|
|
template_id: 0,
|
|
original_template_id: -1,
|
|
template_category: '',
|
|
stored_templates: {},
|
|
confirm_switch: 0,
|
|
ready: false,
|
|
};
|
|
|
|
},
|
|
directives: {
|
|
init: {
|
|
bind(el, binding, vnode) {
|
|
|
|
vnode.context[binding.arg] = binding.value;
|
|
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
dynamic,
|
|
},
|
|
watch: {
|
|
ready() {
|
|
|
|
const that = this;
|
|
|
|
if (that.ready !== false) {
|
|
|
|
that.switch_template();
|
|
|
|
} // end if;
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
get_template(template, data) {
|
|
|
|
if (typeof data.id === 'undefined') {
|
|
|
|
data.id = 'default';
|
|
|
|
} // end if;
|
|
|
|
const template_name = template + '/' + data.id;
|
|
|
|
if (typeof this.stored_templates[template_name] !== 'undefined') {
|
|
|
|
return this.stored_templates[template_name];
|
|
|
|
} // end if;
|
|
|
|
const template_data = {
|
|
duration: this.duration,
|
|
duration_unit: this.duration_unit,
|
|
products: this.products,
|
|
...data,
|
|
};
|
|
|
|
this.fetch_template(template, template_data);
|
|
|
|
return '<div class="wu-p-4 wu-bg-gray-100 wu-text-center wu-rounded">Loading</div>';
|
|
|
|
},
|
|
fetch_template(template, data) {
|
|
|
|
const that = this;
|
|
|
|
if (typeof data.id === 'undefined') {
|
|
|
|
data.id = 'default';
|
|
|
|
} // end if;
|
|
|
|
this.request('wu_render_field_template', {
|
|
template,
|
|
attributes: data,
|
|
}, function(results) {
|
|
|
|
const template_name = template + '/' + data.id;
|
|
|
|
if (results.success) {
|
|
|
|
Vue.set(that.stored_templates, template_name, results.data.html);
|
|
|
|
} else {
|
|
|
|
Vue.set(that.stored_templates, template_name, '<div>' + results.data[0].message + '</div>');
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
},
|
|
switch_template() {
|
|
|
|
const that = this;
|
|
|
|
that.block();
|
|
|
|
this.request('wu_switch_template', {
|
|
template_id: that.template_id,
|
|
}, function(results) {
|
|
|
|
/*
|
|
* Redirect of we get a redirect URL back.
|
|
*/
|
|
if (typeof results.data.redirect_url === 'string') {
|
|
|
|
window.location.href = results.data.redirect_url;
|
|
|
|
} // end if;
|
|
|
|
});
|
|
|
|
},
|
|
block() {
|
|
|
|
/*
|
|
* Get the first bg color from a parent.
|
|
*/
|
|
const bg_color = jQuery(this.$el).parents().filter(function() {
|
|
|
|
return $(this).css('backgroundColor') !== 'rgba(0, 0, 0, 0)';
|
|
|
|
}).first().css('backgroundColor');
|
|
|
|
jQuery(this.$el).wu_block({
|
|
message: '<div class="spinner is-active wu-float-none" style="float: none !important;"></div>',
|
|
overlayCSS: {
|
|
backgroundColor: bg_color ? bg_color : '#ffffff',
|
|
opacity: 0.6,
|
|
},
|
|
css: {
|
|
padding: 0,
|
|
margin: 0,
|
|
width: '50%',
|
|
fontSize: '14px !important',
|
|
top: '40%',
|
|
left: '35%',
|
|
textAlign: 'center',
|
|
color: '#000',
|
|
border: 'none',
|
|
backgroundColor: 'none',
|
|
cursor: 'wait',
|
|
},
|
|
});
|
|
|
|
},
|
|
unblock() {
|
|
|
|
jQuery(this.$el).wu_unblock();
|
|
|
|
},
|
|
request(action, data, success_handler, error_handler) {
|
|
|
|
jQuery.ajax({
|
|
method: 'POST',
|
|
url: wu_template_switching_params.ajaxurl + '&action=' + action,
|
|
data,
|
|
success: success_handler,
|
|
error: error_handler,
|
|
});
|
|
|
|
},
|
|
},
|
|
});
|
|
|
|
});
|
|
|
|
}(jQuery, wp.hooks));
|