Skip to content

feat(storefront): SD-10943 Update behaviour to delay displaying the alert message until all required product options are selected #2535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
bc-alexsaiannyi wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

feat(storefront): SD-10943 Update behaviour to delay displaying the alert message until all required product options are selected #2535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
678a7fe
feat(storefront): SD-10943 Update behaviour to delay displaying the a…
bc-alexsaiannyi Jan 22, 2025
5f0d845
sync behaviour for add to cart and increments buttons with alert mess…
bc-alexsaiannyi Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [#2535](https://github.com/bigcommerce/cornerstone/pull/2535)

## 6.16.0 (01-15-2025)
- Remove escaping of "=" symbol for <head> for blog and brand [#2528](https://github.com/bigcommerce/cornerstone/pull/2528)
Expand Down
20 changes: 13 additions & 7 deletions assets/js/theme/common/product-details-base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@ export function optionChangeDecorator(areDefaultOptionsSet) {
return (err, response) => {
const attributesData = response.data || {};
const attributesContent = response.content || {};
const shouldAttributesBeUpdated = true;

this.updateProductAttributes(attributesData);
if (areDefaultOptionsSet) {
this.updateView(attributesData, attributesContent);
this.updateView(attributesData, attributesContent, shouldAttributesBeUpdated);
} else {
this.updateDefaultAttributesForOOS(attributesData);
this.updateDefaultAttributesForOOS(attributesData, shouldAttributesBeUpdated);
}
};
}
Expand Down Expand Up @@ -223,11 +224,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) {
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);
Expand Down Expand Up @@ -273,7 +279,7 @@ export default class ProductDetailsBase {
viewModel.stock.$input.text(data.stock);
}

this.updateDefaultAttributesForOOS(data);
this.updateDefaultAttributesForOOS(data, shouldMessageAppear);
this.updateWalletButtonsView(data);

// If Bulk Pricing rendered HTML is available
Expand Down Expand Up @@ -361,9 +367,9 @@ export default class ProductDetailsBase {
}
}

updateDefaultAttributesForOOS(data) {
updateDefaultAttributesForOOS(data, shouldUpdateAttributes) {
const viewModel = this.getViewModel(this.$scope);
if (!data.purchasable || !data.instock) {
if (shouldUpdateAttributes && (!data.purchasable || !data.instock)) {
viewModel.$addToCart.prop('disabled', true);
viewModel.$increments.prop('disabled', true);
} else {
Expand Down
4 changes: 3 additions & 1 deletion assets/js/theme/common/product-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);

Expand Down
Loading