product update event trigger

Oksydan · Oct 1, 2023 · c55cdfc · c55cdfc
1 parent bf8d402
commit c55cdfc
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 22 deletions.
diff --git a/_dev/js/theme/core/product/handler/product/productFormChangeHandler.js b/_dev/js/theme/core/product/handler/product/productFormChangeHandler.js
@@ -0,0 +1,15 @@
+import prestashop from 'prestashop';
+import productStateStore from '../../store/productStateStore';
+
+const { setFormChanged } = productStateStore();
+
+const productFormChangeHandler = (event) => {
+  setFormChanged(true);
+
+  prestashop.emit('updateProduct', {
+    eventType: 'updatedProductCombination',
+    event,
+  });
+};
+
+export default productFormChangeHandler;
diff --git a/_dev/js/theme/core/product/productController.js b/_dev/js/theme/core/product/productController.js
@@ -6,6 +6,7 @@ import productUpdateErrorHandler from './handler/product/productUpdateErrorHandl
 import productFormDataPersister from './persister/productFormDataPersister';
 import productPopStateHandler from './handler/product/productPopStateHandler';
 import updatedProductHandler from './handler/product/updatedProductHandler';
+import productFormChangeHandler from './handler/product/productFormChangeHandler';
 
 const { on } = useEvent();
 const { persist } = productFormDataPersister();
@@ -22,6 +23,7 @@ const productController = () => {
   const init = () => {
     persistFormDataOnInit();
     on(document, 'click', prestashop.selectors.listing.quickview, quickViewClickHandler);
+    on(document, 'change', `${prestashop.selectors.product.variants} *[name]`, productFormChangeHandler);
 
     window.addEventListener('popstate', productPopStateHandler);
     prestashop.on('updatedProduct', updatedProductHandler);

diff --git a/_dev/js/theme/core/product/updateProduct.js b/_dev/js/theme/core/product/updateProduct.js
@@ -2,16 +2,13 @@ import prestashop from 'prestashop';
 import { fromSerializeObject } from '@js/theme/utils/formSerialize';
 import parseToHtml from '@js/theme/utils/parseToHtml';
 import useAlertToast from '@js/theme/components/useAlertToast';
-import useEvent from '@js/theme/components/event/useEvent';
 import isQuickViewOpen from './utils/isQuickViewOpen';
 import isProductPreview from './utils/isProductPreview';
 import updateProductRequest from './request/product/updateProductRequest';
 import productFormDataPersister from './persister/productFormDataPersister';
 import productStateStore from './store/productStateStore';
 
-const { setFormChanged, getCurrentRequestDelayedId, setCurrentRequestDelayedId } = productStateStore();
-
-const { on } = useEvent();
+const { getCurrentRequestDelayedId, setCurrentRequestDelayedId } = productStateStore();
 
 const { danger } = useAlertToast();
 
@@ -233,20 +230,6 @@ const updateProductData = async (event, eventType) => {
   setCurrentRequestDelayedId(timeoutId);
 };
 
-const handleProductFormChange = (event) => {
-  setFormChanged(true);
-
-  prestashop.emit('updateProduct', {
-    eventType: 'updatedProductCombination',
-    event,
-    // Following variables are not used anymore, but kept for backward compatibility
-    resp: {},
-    reason: {
-      productUrl: prestashop.urls.pages.product || '',
-    },
-  });
-};
-
 const handleUpdateCart = (event) => {
   if (!event || !event.reason || event.reason.linkAction !== 'add-to-cart') {
     return;
@@ -265,8 +248,6 @@ const handleUpdateProduct = ({ event, eventType }) => {
 };
 
 const attachEventListeners = () => {
-  on(document, 'change', `${prestashop.selectors.product.variants} *[name]`, handleProductFormChange);
-
   prestashop.on('updateCart', handleUpdateCart);
   // Refresh all the product content
   prestashop.on('updateProduct', handleUpdateProduct);

diff --git a/_dev/js/theme/core/selectors.js b/_dev/js/theme/core/selectors.js
@@ -14,8 +14,8 @@ prestashop.selectors = {
     customizationModal: '.js-customization-modal',
     imageContainer: '.js-quickview js-images-container, .page-product:not(.js-quickview-open) .js-product-container .images-container',
     container: '.js-product-container',
-    availability: '#product-availability, .js-product-availability',
-    actions: '.product-actions, .js-product-actions',
+    availability: '.js-product-availability',
+    actions: '.js-product-actions',
     variants: '.js-product-variants',
     refresh: '.js-product-refresh',
     miniature: '.js-product-miniature',