: Dec 04: [FIX] Bug Fixed 'pos_magnify_image'

pos_magnify_image/__manifest__.py

@@ -21,7 +21,7 @@
 ################################################################################
 {
     'name': "Pos Product Magnify Image",
-    'version': '18.0.1.0.0',
+    'version': '18.0.1.1.0',
     'category': 'Point of Sale',
     'summary': """Magnify product image in PoS""",
     'description': "Allows to enlarge the image in a button click for every"

pos_magnify_image/doc/RELEASE_NOTES.md

@@ -5,3 +5,9 @@
 #### ADD
 
 - Initial commit for Pos Product Magnify Image
+
+#### 26.11.2025
+#### Version 18.0.1.1.0
+#### BUG FIX
+
+- Fixed the issues in the module where the image was blurred while zooming.

pos_magnify_image/static/src/js/prouct_magnify_image.js

@@ -3,14 +3,19 @@ import { useService } from "@web/core/utils/hooks";
 import { patch } from "@web/core/utils/patch";
 import { ProductCard } from "@point_of_sale/app/generic_components/product_card/product_card";
 import { MagnifyProductPopup } from "@pos_magnify_image/js/MagnifyProductPopup";
-//Inside ProductsWidget adding clickMagnifyProduct function for magnify image
+
 patch(ProductCard.prototype, {
     setup() {
         super.setup(...arguments);
         this.dialog = useService("dialog");
     },
-    async onProductMagnifyClick(product){
-        this.magnifyProduct = true;
-        this.dialog.add(MagnifyProductPopup, {product: this.props})
+    async onProductMagnifyClick(ev) {  // Optional: Add (ev) if needed for event handling
+        // Extract the actual product from props (adjust key if it's not 'product')
+        const productData = this.props.product;  // Or this.props if product is flat—log to confirm
+        if (!productData || !productData.id) {
+            console.error("Product ID not found in props:", this.props);  // Debug log
+            return;
+        }
+        this.dialog.add(MagnifyProductPopup, { product: productData });
     }
-});
+});

pos_magnify_image/static/src/xml/MagnifyProductPopup.xml

@@ -1,23 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
-<!--    Custom Popup Template-->
     <t t-name="MagnifyProductPopup">
-        <Dialog title.translate="Product Image" size="'md'">
+        <Dialog title="'Product Image'" size="'lg'">
             <main class="body">
                 <div class="section-product-info-title">
-                    <span t-esc="props.product.name"
-                      class="global-info-title fs-2 fw-bolder text-truncate"/>
-                <span class="fs-3"><t t-if="props.product.product.default_code" t-esc="props.product.product.default_code"/>
-                    <t t-if="props.product.product.default_code and props.product.product.barcode"> - </t>
-                    <t t-if="props.product.product.barcode"
-                       t-esc="props.product.product.barcode"/></span>
+                    <span t-esc="props.product.name" class="global-info-title fs-2 fw-bolder text-truncate"/>
                 </div>
-                <div class="product-large-image">
-                    <img class="rounded mx-auto d-block" t-att-src="props.product.imageUrl" t-att-alt="props.product.name" style="width:450px"/>
+                <div class="product-large-image d-flex justify-content-center align-items-center" style="height: 500px; overflow: hidden;">
+                    <img
+                        ref="imageRef"
+                        t-att-alt="props.product.name"
+                        t-att-src="'/web/image/product.product/' + props.product.id + '/image_1024'"
+                        class="rounded"
+                        style="max-width: 100%; max-height: 100%; cursor: zoom-in; transition: transform 0.3s ease; transform-origin: center;"
+                        t-on-wheel.stop="onZoom"
+                    />
                 </div>
             </main>
             <t t-set-slot="footer">
-                <button class="btn btn-primary btn-lg lh-lg" t-on-click="props.close">Close</button>
+                <button class="btn btn-primary" t-on-click="props.close">Close</button>
             </t>
         </Dialog>
     </t>