fix(extra-features): Fixed the sync product image/gallery

2026-05-29 12:07:12 +02:00
parent d2d1dc4302
commit 1dc5ceb241
4 changed files with 336 additions and 122 deletions
@@ -0,0 +1,175 @@
+//Add functionality to the custom form in product miniatures
+
+import useAlertToast from "@js/theme/components/useAlertToast";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const toast = useAlertToast();
+
+    const parsePositiveInteger = (value, fallback = 1) => {
+        const parsedValue = parseInt(value, 10);
+        return Number.isFinite(parsedValue) && parsedValue > 0
+            ? parsedValue
+            : fallback;
+    };
+
+    const isInvalidStepMultiple = (rawValue, minQuantity, stepQuantity) => {
+        const parsedValue = parseInt(rawValue, 10);
+
+        if (!Number.isFinite(parsedValue) || parsedValue <= 0) {
+            return false;
+        }
+
+        return (parsedValue - minQuantity) % stepQuantity !== 0;
+    };
+
+    const normalizeQuantityByStep = (rawValue, minQuantity, stepQuantity) => {
+        const parsedValue = parseInt(rawValue, 10);
+        const safeValue = Number.isFinite(parsedValue)
+            ? Math.max(parsedValue, minQuantity)
+            : minQuantity;
+
+        return (
+            minQuantity +
+            Math.ceil((safeValue - minQuantity) / stepQuantity) * stepQuantity
+        );
+    };
+
+    const getPackWarningMessage = (input, stepQuantity) => {
+        const messageTemplate = input.getAttribute(
+            "data-pack-message-template",
+        );
+
+        if (!messageTemplate) {
+            return "";
+        }
+
+        return messageTemplate.replace("__PACK__", stepQuantity);
+    };
+
+    let $forms = document.querySelectorAll(".product-miniature__form");
+
+    $forms.forEach(($form) => {
+        let $quantityInput = $form.querySelector("input[name='qty-field']");
+        let $quantityHidden = $form.querySelector("input[name='qty']");
+        let $incrementBtn = $form.querySelector(
+            "button[name='qty-field-plus']",
+        );
+        let $decrementBtn = $form.querySelector(
+            "button[name='qty-field-minus']",
+        );
+
+        if (
+            !$quantityInput ||
+            !$quantityHidden ||
+            !$incrementBtn ||
+            !$decrementBtn
+        ) {
+            return;
+        }
+
+        const minQuantity = parsePositiveInteger(
+            $quantityInput.getAttribute("min"),
+            parsePositiveInteger($quantityHidden.value, 1),
+        );
+        const stepQuantity = parsePositiveInteger(
+            $quantityInput.getAttribute("step"),
+            minQuantity,
+        );
+
+        $quantityInput.setAttribute("min", minQuantity);
+        $quantityInput.setAttribute("step", stepQuantity);
+
+        function updateHiddenQuantity() {
+            const normalizedQuantity = normalizeQuantityByStep(
+                $quantityInput.value,
+                minQuantity,
+                stepQuantity,
+            );
+
+            $quantityHidden.value = normalizedQuantity;
+        }
+
+        function normalizeTypedQuantity(showToast = false) {
+            const enteredQuantity = $quantityInput.value;
+            const normalizedQuantity = normalizeQuantityByStep(
+                enteredQuantity,
+                minQuantity,
+                stepQuantity,
+            );
+
+            if (
+                showToast &&
+                isInvalidStepMultiple(
+                    enteredQuantity,
+                    minQuantity,
+                    stepQuantity,
+                )
+            ) {
+                const warningMessage = getPackWarningMessage(
+                    $quantityInput,
+                    stepQuantity,
+                );
+
+                if (warningMessage) {
+                    toast.warning(warningMessage);
+                }
+            }
+
+            if (parseInt($quantityInput.value, 10) !== normalizedQuantity) {
+                $quantityInput.value = normalizedQuantity;
+            }
+
+            $quantityHidden.value = normalizedQuantity;
+        }
+
+        $quantityInput.addEventListener("input", function () {
+            if ($quantityInput.value === "") {
+                $quantityHidden.value = minQuantity;
+                return;
+            }
+
+            updateHiddenQuantity();
+        });
+
+        $incrementBtn.addEventListener("click", function (event) {
+            event.preventDefault();
+
+            const currentValue = normalizeQuantityByStep(
+                $quantityInput.value,
+                minQuantity,
+                stepQuantity,
+            );
+
+            $quantityInput.value = currentValue + stepQuantity;
+            updateHiddenQuantity();
+        });
+
+        $decrementBtn.addEventListener("click", function (event) {
+            event.preventDefault();
+
+            const currentValue = normalizeQuantityByStep(
+                $quantityInput.value,
+                minQuantity,
+                stepQuantity,
+            );
+
+            $quantityInput.value = Math.max(
+                minQuantity,
+                currentValue - stepQuantity,
+            );
+            updateHiddenQuantity();
+        });
+
+        $quantityInput.addEventListener("focusout", function () {
+            normalizeTypedQuantity(true);
+        });
+
+        $quantityInput.addEventListener("keyup", function (event) {
+            if (event.keyCode === 13) {
+                normalizeTypedQuantity(true);
+            }
+        });
+
+        normalizeTypedQuantity(false);
+    });
+});