From f4cd6898506691d1eb146db4e8bb911bf56d5fd3 Mon Sep 17 00:00:00 2001 From: jay-bailey-creative Date: Sat, 28 Sep 2024 17:50:29 +1000 Subject: [PATCH] Update block-variant-picker.js With the delay to load the custom element, the variants can be changed before the event listeners are in place, resulting in the wrong variant being added to cart. This change checks for a variant change and completes an update. --- .../assets/block-variant-picker.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/components/block-variant-picker/assets/block-variant-picker.js b/components/block-variant-picker/assets/block-variant-picker.js index 7fa6b23..c2ee2c3 100644 --- a/components/block-variant-picker/assets/block-variant-picker.js +++ b/components/block-variant-picker/assets/block-variant-picker.js @@ -7,6 +7,11 @@ class BlockVariantPicker extends HTMLElement { this.addEventListener('change', this.handleVariantChange.bind(this)) this.addEventListener('touchstart', this.handleElementEvent.bind(this)) this.addEventListener('mousedown', this.handleElementEvent.bind(this)) + + // Calling the handle variant change event when + // the component is loaded to catch if the user + // clicked a variant before component was loaded + this.handleVariantChange(true) } handleElementEvent(event) { @@ -22,9 +27,20 @@ class BlockVariantPicker extends HTMLElement { this.currentVariant && this.getProductInfo() } - async handleVariantChange() { + async handleVariantChange(initial) { this.updateOptions() this.updateMasterId() + // If initial load check to see if the currentVariant + // differs from id stored in product form, if different + // force an update, otherwise return from function + if (initial) { + const productForm = document.querySelector( + `#product-form-${this.dataset.sectionId}` + ) + const input = productForm.querySelector('input[name="id"]') + if (this.currentVariant.id === input.value) return + } + this.updateVariantStatuses() if (this.currentVariant) {