From c926d1669e03dacbb99ddddb3d0ea913130dcdd5 Mon Sep 17 00:00:00 2001 From: Alexander Saiannyi Date: Wed, 22 Jan 2025 19:39:33 +0100 Subject: [PATCH] feat(storefront): SD-10935 Update behaviour to delay displaying the alert message until all required product options are selected --- CHANGELOG.md | 1 + assets/js/theme/common/product-details-base.js | 9 +++++++-- assets/js/theme/common/product-details.js | 4 +++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33bd315224..735c7e97ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Update behaviour to delay displaying the alert message until all required product options are selected [#2534](https://github.com/bigcommerce/cornerstone/pull/2534) ## 6.16.0 (01-15-2025) - Remove escaping of "=" symbol for for blog and brand [#2528](https://github.com/bigcommerce/cornerstone/pull/2528) diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js index 547a0a8bb5..fef79b9482 100644 --- a/assets/js/theme/common/product-details-base.js +++ b/assets/js/theme/common/product-details-base.js @@ -223,11 +223,16 @@ export default class ProductDetailsBase { /** * Update the view of price, messages, SKU and stock options when a product option changes * @param {Object} data Product attribute data + * @param {Object} content Product attribute content + * @param {Boolean} shouldMessageAppear indicates if product attributes form has no validity problems + * and message can be shown to User */ - updateView(data, content = null) { + updateView(data, content, shouldMessageAppear = true) { const viewModel = this.getViewModel(this.$scope); - this.showMessageBox(data.stock_message || data.purchasing_message); + if (shouldMessageAppear) { + this.showMessageBox(data.stock_message || data.purchasing_message); + } if (data.price instanceof Object) { this.updatePriceView(viewModel, data.price); diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index 7ef5c481cf..659f496461 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -255,6 +255,7 @@ export default class ProductDetails extends ProductDetailsBase { const $changedOption = $(event.target); const $form = $changedOption.parents('form'); const productId = $('[name="product_id"]', $form).val(); + const isFormValid = $form[0].checkValidity(); // Do not trigger an ajax request if it's a file or if the browser doesn't support FormData if ($changedOption.attr('type') === 'file' || window.FormData === undefined) { @@ -264,8 +265,9 @@ export default class ProductDetails extends ProductDetailsBase { utils.api.productAttributes.optionChange(productId, $form.serialize(), 'products/bulk-discount-rates', (err, response) => { const productAttributesData = response.data || {}; const productAttributesContent = response.content || {}; + this.updateProductAttributes(productAttributesData); - this.updateView(productAttributesData, productAttributesContent); + this.updateView(productAttributesData, productAttributesContent, isFormValid); this.updateProductDetailsData(); bannerUtils.dispatchProductBannerEvent(productAttributesData);