From 4a2deffc0642c7e6005f5203ae918697d5b89b1c Mon Sep 17 00:00:00 2001
From: arat-odoo <arat@odoo.com>
Date: Wed, 2 Jul 2025 17:51:53 +0530
Subject: [PATCH] [ADD] redesign_catalog_view: click to zoom image feature in
 product catalog

In product catalog added feature of zoom when click image and make it responsive
in mobile screen device using usefileviwer function.
---
 redesign_catalog_view/__init__.py             |  0
 redesign_catalog_view/__manifest__.py         | 15 +++++++++
 .../static/src/js/redesign_catalog_record.js  | 33 +++++++++++++++++++
 .../src/js/redesign_catalog_renderer.js       |  8 +++++
 .../static/src/js/redesign_catalog_view.js    | 12 +++++++
 .../src/scss/redesign_catalog_view.scss       | 13 ++++++++
 .../views/redesign_catalog_view.xml           | 16 +++++++++
 7 files changed, 97 insertions(+)
 create mode 100644 redesign_catalog_view/__init__.py
 create mode 100644 redesign_catalog_view/__manifest__.py
 create mode 100644 redesign_catalog_view/static/src/js/redesign_catalog_record.js
 create mode 100644 redesign_catalog_view/static/src/js/redesign_catalog_renderer.js
 create mode 100644 redesign_catalog_view/static/src/js/redesign_catalog_view.js
 create mode 100644 redesign_catalog_view/static/src/scss/redesign_catalog_view.scss
 create mode 100644 redesign_catalog_view/views/redesign_catalog_view.xml

diff --git a/redesign_catalog_view/__init__.py b/redesign_catalog_view/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/redesign_catalog_view/__manifest__.py b/redesign_catalog_view/__manifest__.py
new file mode 100644
index 00000000000..e583cc51d2c
--- /dev/null
+++ b/redesign_catalog_view/__manifest__.py
@@ -0,0 +1,15 @@
+{
+    "name": "Redesign Catalog View",
+    "version": "1.0",
+    "depends": ["purchase"],
+    "data": ["views/redesign_catalog_view.xml"],
+    "appication": True,
+    "sequence": 1,
+    "license": "LGPL-3",
+    "installable": True,
+    "assets": {
+        "web.assets_backend": [
+            "redesign_catalog_view/static/src/**/*",
+        ],
+    },
+}
diff --git a/redesign_catalog_view/static/src/js/redesign_catalog_record.js b/redesign_catalog_view/static/src/js/redesign_catalog_record.js
new file mode 100644
index 00000000000..8a26a8b4079
--- /dev/null
+++ b/redesign_catalog_view/static/src/js/redesign_catalog_record.js
@@ -0,0 +1,33 @@
+import { ProductCatalogKanbanRecord } from "@product/product_catalog/kanban_record";
+import { useFileViewer } from "@web/core/file_viewer/file_viewer_hook";
+
+export class RedesignCatalogViewRecord extends ProductCatalogKanbanRecord {
+  setup() {
+    super.setup();
+    this.fileViewer = useFileViewer();
+  }
+
+  onGlobalClick(e) {
+    const imageContainer = e.target.closest(".o_product_image");
+    if (imageContainer) {
+      const imageUrl = e.target.getAttribute("src");
+
+      if (imageUrl) {
+        this.openImage(imageUrl);
+        return;
+      }
+    }
+    super.onGlobalClick(e);
+  }
+
+  openImage(imageUrl) {
+    const fileModel = {
+      isImage: true,
+      isViewable: true,
+      displayName: imageUrl,
+      defaultSource: imageUrl,
+      downloadUrl: imageUrl,
+    };
+    this.fileViewer.open(fileModel);
+  }
+}
diff --git a/redesign_catalog_view/static/src/js/redesign_catalog_renderer.js b/redesign_catalog_view/static/src/js/redesign_catalog_renderer.js
new file mode 100644
index 00000000000..0d01fd2a018
--- /dev/null
+++ b/redesign_catalog_view/static/src/js/redesign_catalog_renderer.js
@@ -0,0 +1,8 @@
+import { ProductCatalogKanbanRenderer } from "@product/product_catalog/kanban_renderer";
+import { RedesignCatalogViewRecord } from "./redesign_catalog_record";
+export class RedesignCatalogViewRenderer extends ProductCatalogKanbanRenderer {
+  static components = {
+    ...ProductCatalogKanbanRenderer.components,
+    KanbanRecord: RedesignCatalogViewRecord,
+  };
+}
diff --git a/redesign_catalog_view/static/src/js/redesign_catalog_view.js b/redesign_catalog_view/static/src/js/redesign_catalog_view.js
new file mode 100644
index 00000000000..278f96ed7ef
--- /dev/null
+++ b/redesign_catalog_view/static/src/js/redesign_catalog_view.js
@@ -0,0 +1,12 @@
+import { productCatalogKanbanView } from "@product/product_catalog/kanban_view";
+import { registry } from "@web/core/registry";
+import { RedesignCatalogViewRenderer } from "./redesign_catalog_renderer";
+
+export const RedesignCatalogView = {
+  ...productCatalogKanbanView,
+  Renderer: RedesignCatalogViewRenderer,
+};
+
+registry
+  .category("views")
+  .add("product_mobile_kanban_catalog", RedesignCatalogView);
diff --git a/redesign_catalog_view/static/src/scss/redesign_catalog_view.scss b/redesign_catalog_view/static/src/scss/redesign_catalog_view.scss
new file mode 100644
index 00000000000..0c42f1e01f7
--- /dev/null
+++ b/redesign_catalog_view/static/src/scss/redesign_catalog_view.scss
@@ -0,0 +1,13 @@
+.o_product_image {
+    max-width: 100px;
+    height: auto;
+}
+@media (max-width: 768px) {
+    .o_product_image img {
+        max-width: 100px !important;
+        max-height: auto;
+        width: 150px !important;
+        height: auto;
+        object-fit: cover;
+    }
+}
diff --git a/redesign_catalog_view/views/redesign_catalog_view.xml b/redesign_catalog_view/views/redesign_catalog_view.xml
new file mode 100644
index 00000000000..0cacd77c9e1
--- /dev/null
+++ b/redesign_catalog_view/views/redesign_catalog_view.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="resign_catalog_view_inherit_from_product_kanban_view" model="ir.ui.view">
+        <field name="name">product.kanban.redesign.catalog.view</field>
+        <field name="model">product.product</field>
+        <field name="inherit_id" ref="product.product_view_kanban_catalog" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='image_128']" position="replace">
+                <field name="image_1920" class="ms-auto o_product_image img-fluid" widget="image" />
+            </xpath>
+            <xpath expr="//kanban" position="attributes">
+                <attribute name="js_class">product_mobile_kanban_catalog</attribute>
+            </xpath>
+        </field>
+    </record>
+</odoo>