From b5a66ff5e12da292872e180089747c59d8c13eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Tue, 10 Oct 2023 00:05:00 +0200
Subject: [PATCH] Vanilla.js

---
 _dev/js/theme/components/product.js | 38 +++++++++++++++++++----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/_dev/js/theme/components/product.js b/_dev/js/theme/components/product.js
index 4a11a510..66e584f8 100644
--- a/_dev/js/theme/components/product.js
+++ b/_dev/js/theme/components/product.js
@@ -1,18 +1,20 @@
-import $ from 'jquery';
 import prestashop from 'prestashop';
 import useCustomQuantityInput from './useCustomQuantityInput';
 import { each } from '../utils/DOMHelpers';
+import DOMReady from "../utils/DOMReady";
 import productEventContextSelector from '../core/product/utils/productEventContextSelector';
 
-$(() => {
+DOMReady(() => {
   const createInputFile = () => {
-    $('.js-file-input').on('change', (event) => {
-      const target = $(event.currentTarget)[0];
-      const file = (target) ? target.files[0] : null;
+    each('.js-file-input', (input) => {
+      input.addEventListener('change', (event) => {
+        const target = event.currentTarget;
+        const file = (target) ? target.files[0] : null;
 
-      if (target && file) {
-        $(target).prev().text(file.name);
-      }
+        if (target && file) {
+          target.previousElementSibling.textContent = file.name;
+        }
+      });
     });
   };
 
@@ -42,9 +44,10 @@ $(() => {
   });
 
   prestashop.on('updateCart', (event) => {
-    if (
-      prestashop.page.page_name === 'product'
-      && parseInt(event.reason.idProduct, 10) === parseInt($('#add-to-cart-or-refresh').find('[name="id_product"]').val(), 10)) {
+    const productForm = document.getElementById('add-to-cart-or-refresh');
+    const idProduct = productForm ? parseInt(productForm.querySelector('[name="id_product"]').value, 10) : null;
+
+    if (prestashop.page.page_name === 'product' && parseInt(event.reason.idProduct, 10) === idProduct) {
       prestashop.emit('updateProduct', {
         event,
         resp: {},
@@ -60,8 +63,17 @@ $(() => {
     const contextSelector = productEventContextSelector();
 
     if (updateEvenType === 'updatedProductCombination') {
-      $(`${contextSelector} .js-product-images`).replaceWith(event.product_cover_thumbnails);
-      $(`${contextSelector} .js-product-images-modal`).replaceWith(event.product_images_modal);
+      const productImages = document.querySelector(`${contextSelector} .js-product-images`);
+      const productImagesModal = document.querySelector(`${contextSelector} .js-product-images-modal`);
+
+      if (productImages) {
+        productImages.replaceWith(event.product_cover_thumbnails);
+      }
+
+      if (productImagesModal) {
+        productImagesModal.replaceWith(event.product_images_modal);
+      }
+
       prestashop.emit('updatedProductCombination', event);
     }