+
+
+
+
+
+
+
diff --git a/product_web_hover/static/src/js/popover.js b/product_web_hover/static/src/js/popover.js
new file mode 100644
index 000000000..0efb79548
--- /dev/null
+++ b/product_web_hover/static/src/js/popover.js
@@ -0,0 +1,52 @@
+/** @odoo-module **/
+import {registry} from "@web/core/registry";
+import {useService} from "@web/core/utils/hooks";
+import {usePopover} from "@web/core/popover/popover_hook";
+import {Component} from "@odoo/owl";
+
+/**
+ * The `productDetailPopover` class defines a component to display detailed information about a product in a popover.
+ */
+export class productDetailPopover extends Component {
+ setup() {
+ this.actionService = useService("action");
+ }
+}
+
+productDetailPopover.template = "product_web_hover.productDetailPopover";
+
+export class productDetailWidget extends Component {
+ setup() {
+ this.orm = useService("orm");
+ this.popover = usePopover(this.constructor.components.Popover, {position: "bottom"});
+ this.productDetails = {};
+
+ }
+ async fetchProductDetails(productId) {
+ const product = await this.orm.call("product.product", "read", [[productId], ["name", "image_1920", "lst_price","categ_id","default_code","qty_available", "standard_price"]]);
+ return product[0];
+ }
+
+ async onMouseEnter(ev) {
+ const productId = this.props.record.data.product_id?.[0];
+ if (productId) {
+ this.productDetails = this.fetchProductDetails(productId);
+ }
+ this.popover.open(ev.currentTarget, {
+ record: this.props.record,
+ productDetails: await this.productDetails,
+
+ });
+ }
+
+ onMouseLeave() {
+ this.popover.close();
+ }
+}
+
+productDetailWidget.components = {Popover: productDetailPopover};
+productDetailWidget.template = "product_web_hover.productDetail";
+export const ProductDetailWidget = {
+ component: productDetailWidget,
+};
+registry.category("view_widgets").add("product_detail_popover_widget", ProductDetailWidget);
\ No newline at end of file
diff --git a/product_web_hover/static/src/xml/hoverTemplate.xml b/product_web_hover/static/src/xml/hoverTemplate.xml
new file mode 100644
index 000000000..2982b540c
--- /dev/null
+++ b/product_web_hover/static/src/xml/hoverTemplate.xml
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + product details card will display when hovering over an product in order line +
+Product Web Hover +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Widget for product. +
+Product main features can see on hovering product in order line +
+
+
+
+
+
+
+
+
+ + Community & Enterprise Support +
+Available in Odoo 18.0 Community and Enterprise. +
+
+
+
+
+
+
+
+
+
+ Product Web Hover
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Hovering over the product order line + + icon +
+
+
+ + While hovering over the product order line icon, you can see the product details. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Product details card will display when hovering over an product in order line.
+
+
+
+
+
+
+
+
+
+ + Product web hover in Odoo 18 Community Edition
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + The product detail popover is + triggered when the user hovers + over the product order line icon. + The popover appears near the cursor, + providing detailed information about the product. +
+
+
+
+
+
+ + The Product Web Hover feature + can be implemented in other + forms and views in Odoo by following + a similar approach. You would need + to extend the relevant views and + include the widget with the + desired product details. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 19th November, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+ |
+ + Product Name: + Reference: + Category: + Cost: + Quantity: + Price: + Quantity_available: + |
+