← All changes | includes/widgets/Woo_Product_Variations/script.js +138 -20 51.1.83 → 51.1.87 View file →

		@@ -1,8 +1,9 @@
1	1	/**
2	2	* Woo Product Variations widget behavior.
3	3	*
4		- * Enhances variation selects with swatches.
	4	+ * Enhances variation selects with swatches and keeps WooCommerce's
	5	+ * variation resolver in sync when the form lives in a split builder widget.
5	6	*/
6	7	(function ($) {
7	8	"use strict";
8	9
		@@ -10,15 +11,13 @@
10	11
11	12	const initVariations = (wrap) => {
12	13	if (!wrap || !wrap.dataset) return;
13	14	if (wrap.dataset[INIT_FLAG] === "1") return;
14		- wrap.dataset[INIT_FLAG] = "1";
15	15
16	16	const form = wrap.querySelector('form.variations_form');
17	17	if (!form) return;
	18	+ wrap.dataset[INIT_FLAG] = "1";
18	19
19		- if (wrap.dataset.swatches !== 'yes') return;
20		-
21	20	let map = {};
22	21	try {
23	22	map = wrap.dataset.swatchesMap ? JSON.parse(wrap.dataset.swatchesMap) : {};
24	23	} catch (e) {
		@@ -45,8 +44,133 @@
45	44	} catch (e) {
46	45	productVariations = [];
47	46	}
48	47
	48	+ const priceRoots = () => document.querySelectorAll('.ka-woo-product-price');
	49	+ priceRoots().forEach((el) => {
	50	+ if (!el.dataset.kaOriginalPrice) {
	51	+ el.dataset.kaOriginalPrice = el.innerHTML;
	52	+ }
	53	+ });
	54	+
	55	+ const setAtcNotice = (hide) => {
	56	+ document.querySelectorAll('.ka-woo-product-atc__notice').forEach((el) => {
	57	+ el.hidden = !!hide;
	58	+ });
	59	+ };
	60	+
	61	+ const applyVariationPrice = (variation) => {
	62	+ priceRoots().forEach((el) => {
	63	+ if (!variation || !variation.price_html) {
	64	+ if (el.dataset.kaOriginalPrice) {
	65	+ el.innerHTML = el.dataset.kaOriginalPrice;
	66	+ }
	67	+ return;
	68	+ }
	69	+ const discount = el.querySelector('.ka-woo-product-price__discount');
	70	+ const discountHtml = discount ? discount.outerHTML : '';
	71	+ el.innerHTML = variation.price_html + discountHtml;
	72	+ });
	73	+ };
	74	+
	75	+ const ensureWcVariationForm = () => {
	76	+ if (!window.jQuery || typeof window.jQuery.fn.wc_variation_form !== 'function') {
	77	+ return false;
	78	+ }
	79	+ const $form = window.jQuery(form);
	80	+ if (!$form.data('wc_variation_form')) {
	81	+ $form.wc_variation_form();
	82	+ }
	83	+ return true;
	84	+ };
	85	+
	86	+ const findMatchedVariation = () => {
	87	+ if (!Array.isArray(productVariations) || !productVariations.length) {
	88	+ return null;
	89	+ }
	90	+ const selected = {};
	91	+ let hasEmpty = false;
	92	+ form.querySelectorAll('select[name^="attribute_"]').forEach((sel) => {
	93	+ selected[sel.name] = sel.value;
	94	+ if (!sel.value) {
	95	+ hasEmpty = true;
	96	+ }
	97	+ });
	98	+ if (hasEmpty) {
	99	+ return null;
	100	+ }
	101	+ return productVariations.find((variation) => {
	102	+ const attrs = variation.attributes || {};
	103	+ return Object.keys(attrs).every((key) => {
	104	+ const want = attrs[key];
	105	+ return !want || want === selected[key];
	106	+ });
	107	+ }) || null;
	108	+ };
	109	+
	110	+ const applyFallbackVariation = () => {
	111	+ if (window.jQuery && window.jQuery(form).data('wc_variation_form')) {
	112	+ return;
	113	+ }
	114	+ const match = findMatchedVariation();
	115	+ const varInput = form.querySelector('input.variation_id, input[name="variation_id"]');
	116	+ const single = form.querySelector('.single_variation');
	117	+ if (match) {
	118	+ if (varInput) {
	119	+ varInput.value = String(match.variation_id || '');
	120	+ }
	121	+ if (single) {
	122	+ single.innerHTML = (match.price_html ? '<div class="woocommerce-variation-price">' + match.price_html + '</div>' : '')
	123	+ + (match.availability_html ? '<div class="woocommerce-variation-availability">' + match.availability_html + '</div>' : '');
	124	+ }
	125	+ applyVariationPrice(match);
	126	+ setAtcNotice(true);
	127	+ } else {
	128	+ if (varInput) {
	129	+ varInput.value = '0';
	130	+ }
	131	+ if (single) {
	132	+ single.innerHTML = '';
	133	+ }
	134	+ applyVariationPrice(null);
	135	+ setAtcNotice(false);
	136	+ }
	137	+ };
	138	+
	139	+ const wcReady = ensureWcVariationForm();
	140	+ if (window.jQuery) {
	141	+ const $form = window.jQuery(form);
	142	+ $form.on('found_variation', function (event, variation) {
	143	+ applyVariationPrice(variation);
	144	+ setAtcNotice(!!(variation && variation.variation_id));
	145	+ });
	146	+ $form.on('reset_data hide_variation', function () {
	147	+ applyVariationPrice(null);
	148	+ setAtcNotice(false);
	149	+ });
	150	+ $form.on('woocommerce_update_variation_values woocommerce_variation_has_changed reset_data found_variation hide_variation', runAll);
	151	+ }
	152	+ if (!wcReady) {
	153	+ form.addEventListener('change', applyFallbackVariation);
	154	+ applyFallbackVariation();
	155	+ if (window.jQuery) {
	156	+ window.jQuery(function () {
	157	+ if (ensureWcVariationForm()) {
	158	+ const selected = form.querySelector('select[name^="attribute_"]');
	159	+ if (selected && selected.value) {
	160	+ window.jQuery(selected).trigger('change');
	161	+ }
	162	+ } else {
	163	+ applyFallbackVariation();
	164	+ }
	165	+ });
	166	+ }
	167	+ }
	168	+
	169	+ if (wrap.dataset.swatches !== 'yes') {
	170	+ return;
	171	+ }
	172	+
49	173	const attributeMatches = (variationAttr, selected) => {
50	174	if (!variationAttr) {
51	175	return true;
52	176	}
		@@ -129,10 +253,12 @@
129	253	}
130	254	select.value = opt.value;
131	255	select.dispatchEvent(new Event('change', { bubbles: true }));
132	256	if (window.jQuery) {
	257	+ window.jQuery(select).trigger('check_variations');
133	258	window.jQuery(select).trigger('change');
134	259	}
	260	+ applyFallbackVariation();
135	261	runAll();
136	262	});
137	263
138	264	container.appendChild(btn);
		@@ -170,18 +296,16 @@
170	296	});
171	297
172	298	runAll();
173	299
174		- // Sync with WooCommerce variation script events.
175		- if (window.jQuery) {
176		- const $form = window.jQuery(form);
177		- $form.on('woocommerce_update_variation_values woocommerce_variation_has_changed reset_data found_variation hide_variation', runAll);
178		- const resetBtn = form.querySelector('.reset_variations');
179		- if (resetBtn) {
180		- resetBtn.addEventListener('click', () => {
181		- setTimeout(runAll, 50);
182		- });
183		- }
	300	+ const resetBtn = form.querySelector('.reset_variations');
	301	+ if (resetBtn) {
	302	+ resetBtn.addEventListener('click', () => {
	303	+ setTimeout(() => {
	304	+ runAll();
	305	+ applyFallbackVariation();
	306	+ }, 50);
	307	+ });
184	308	}
185	309	};
186	310
187	311	const initAll = (root) => {
		@@ -199,10 +323,4 @@
199	323	}
200	324	);
201	325	});
202	326	})(jQuery);
203		-
204		-
205		-
206		-
207		-
208		-