feat(storefront): Dispatch an event on productOptionsChanged (bigcomm…

…erce#2400)

* feat(storefront): Dispatch an event on productOptionsChanged

Including all the information fetched in the previous request to the API to improve extensibility.

Having this mechanism, developers can set a listener and get as much information as they need regarding the selected option, so a new API call can be potentially avoided for further actions associated this event.

* chore: update CHANGELOG.md

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
+- Dispatch an event on productOptionsChanged [#2400](https://github.com/bigcommerce/cornerstone/pull/2400)
 - Check lang helpers usage and existence of key in translation file [#2403](https://github.com/bigcommerce/cornerstone/pull/2403)
 - Display fees on cart page [#2376](https://github.com/bigcommerce/cornerstone/pull/2376)
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)

assets/js/theme/common/product-details.js

@@ -272,6 +272,14 @@ export default class ProductDetails extends ProductDetailsBase {
                 const $context = $form.parents('.productView').find('.productView-info');
                 modalFactory('[data-reveal]', { $context });
             }
+
+            document.dispatchEvent(new CustomEvent('onProductOptionsChanged', {
+                bubbles: true,
+                detail: {
+                    content: productAttributesData,
+                    data: productAttributesContent,
+                },
+            }));
         });
     }