[18.0][MIG] product_attribute_description and website_product_attribute_description: Migration to v18.0 (#221)

hitesh-erpharbor · jans23 · web-flow · commit 30a20529f4da · 2025-12-03T16:32:09.000+01:00
* [18.0][MIG] product_attribute_description: migration to v18.0

* [18.0][MIG] website_product_attribute_description: Migration to v18.0

* update descriptions

* [18.0][IMP] Display info (i) icon inline next to attribute values.

---------

Co-authored-by: jans23 &lt;jans23@users.noreply.github.com&gt;
diff --git a/product_attribute_description/README.rst b/product_attribute_description/README.rst
@@ -0,0 +1,10 @@
+=============================
+Product Attribute Description
+=============================
+
+This module adds description to product's attributes. It can be shown in the online shop using module website_product_attribute_description.
+
+Usage
+=====
+
+#. Go to Sales or Inventory -> Configuration -> Attributea -> Choose an atribute -> Add your description
diff --git a/product_attribute_description/__init__.py b/product_attribute_description/__init__.py
@@ -0,0 +1 @@
+from . import models
diff --git a/product_attribute_description/__manifest__.py b/product_attribute_description/__manifest__.py
@@ -0,0 +1,16 @@
+{
+    "name": "Product Attribute Description",
+    "version": "18.0.1.0.0",
+    "category": "Website",
+    "author": "ERP Harbor Consulting Services, Nitrokey GmbH",
+    "website": "https://github.com/nitrokey/odoo-modules",
+    "summary": """
+    This module adds description to product's attributes.
+     """,
+    "depends": ["product"],
+    "data": [
+        "views/product_attribute_view.xml",
+    ],
+    "license": "AGPL-3",
+    "installable": True,
+}
diff --git a/product_attribute_description/models/__init__.py b/product_attribute_description/models/__init__.py
@@ -0,0 +1 @@
+from . import product_attribute
diff --git a/product_attribute_description/models/product_attribute.py b/product_attribute_description/models/product_attribute.py
@@ -0,0 +1,7 @@
+from odoo import fields, models
+
+
+class ProductAttribute(models.Model):
+    _inherit = "product.attribute"
+
+    description = fields.Text(translate=True)
diff --git a/product_attribute_description/readme/CONTRIBUTORS.rst b/product_attribute_description/readme/CONTRIBUTORS.rst
@@ -0,0 +1 @@
+* Dhara Solanki <dsolanki@initos.com>
diff --git a/product_attribute_description/readme/DESCRIPTION.rst b/product_attribute_description/readme/DESCRIPTION.rst
@@ -0,0 +1 @@
+This module adds description to product's attributes. It can be shown in the online shop using module website_product_attribute_description.
diff --git a/product_attribute_description/readme/USAGE.rst b/product_attribute_description/readme/USAGE.rst
@@ -0,0 +1 @@
+#. Go to Sales or Inventory -> Configuration -> Attributea -> Choose an atribute -> Add your description
diff --git a/product_attribute_description/views/product_attribute_view.xml b/product_attribute_description/views/product_attribute_view.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <record id="product_attribute_form_view_extended" model="ir.ui.view">
+        <field name="name">product.attribute.form.view.extended</field>
+        <field name="model">product.attribute</field>
+        <field name="inherit_id" ref="product.product_attribute_view_form" />
+        <field name="arch" type="xml">
+            <field name="value_ids" position="after">
+                <group name="description">
+                    <field name="description" />
+                </group>
+            </field>
+        </field>
+    </record>
+</odoo>
diff --git a/website_product_attribute_description/README.rst b/website_product_attribute_description/README.rst
@@ -0,0 +1,12 @@
+=====================================
+Website Product Attribute Description
+=====================================
+
+This module shows attribute descriptions in tooltip from product details in website's online shop.
+
+Usage
+=====
+
+#. Go to Sales or Inventory -> Configuration -> Attributea -> Choose an atribute -> Add your description
+#. To check your description go to the shop, find a product with that attribute
+#. Move cursor over attribute and you will get your description from as a attribute tooltip
diff --git a/website_product_attribute_description/__manifest__.py b/website_product_attribute_description/__manifest__.py
@@ -0,0 +1,23 @@
+{
+    "name": "Website Product Attribute Description",
+    "version": "18.0.1.0.0",
+    "category": "Website",
+    "author": "ERP Harbor Consulting Services, Nitrokey GmbH",
+    "website": "https://github.com/nitrokey/odoo-modules",
+    "summary": """
+    This module adds the information icon next to the attribute name in the
+    website and display the related description on mouse hover.
+     """,
+    "depends": ["product_attribute_description", "website_sale"],
+    "data": [
+        "views/template.xml",
+    ],
+    "assets": {
+        "website.frontend_assets": [
+            "/website_product_attribute_description/static/src/css/tooltip.css",
+            "/website_product_attribute_description/static/src/js/tooltip.js",
+        ],
+    },
+    "license": "AGPL-3",
+    "installable": True,
+}
diff --git a/website_product_attribute_description/readme/CONTRIBUTORS.rst b/website_product_attribute_description/readme/CONTRIBUTORS.rst
@@ -0,0 +1 @@
+* Dhara Solanki <dsolanki@initos.com>
diff --git a/website_product_attribute_description/readme/DESCRIPTION.rst b/website_product_attribute_description/readme/DESCRIPTION.rst
@@ -0,0 +1 @@
+This module shows attribute descriptions in tooltip from product details in website's online shop.
diff --git a/website_product_attribute_description/readme/USAGE.rst b/website_product_attribute_description/readme/USAGE.rst
@@ -0,0 +1,3 @@
+#. Go to Sales or Inventory -> Configuration -> Attributea -> Choose an atribute -> Add your description
+#. To check your description go to the shop, find a product with that attribute
+#. Move cursor over attribute and you will get your description from as a attribute tooltip
diff --git a/website_product_attribute_description/static/src/css/tooltip.css b/website_product_attribute_description/static/src/css/tooltip.css
@@ -0,0 +1,25 @@
+.tooltip-inner {
+    max-width: 200px;
+    padding: 0.12rem 0.5rem;
+    color: #ffffff;
+    text-align: center;
+    background-color: #000000;
+    border-radius: 0rem;
+    font-size: 14.5px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Noto,
+        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol", "Noto Color Emoji";
+    /* font-weight: 700; */
+    /* color: white; */
+    border: 1px solid white;
+    position: relative;
+    left: 80px;
+    bottom: -3px;
+}
+
+.bs-tooltip-bottom .arrow::before,
+.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+    bottom: 0;
+    border-width: 0 0.4rem 0.4rem;
+    border-bottom-color: #000000;
+}
diff --git a/website_product_attribute_description/static/src/js/tooltip.js b/website_product_attribute_description/static/src/js/tooltip.js
@@ -0,0 +1,16 @@
+odoo.define(
+    "website_product_attribute_description.product_attribute_description",
+    function () {
+        $('[data-toggle="tooltip"]').tooltip("show").tooltip("hide");
+
+        $("#description_tooltip").on({
+            click: function () {
+                $(this).tooltip("show");
+            },
+        });
+
+        $("#description_tooltip").mouseover(function () {
+            $(this).tooltip("show");
+        });
+    }
+);
diff --git a/website_product_attribute_description/views/template.xml b/website_product_attribute_description/views/template.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <template id="product_variants_extended" inherit_id="website_sale.variants">
+        <xpath
+            expr="//select[@t-att-data-attribute_id='attribute.id']"
+            position="replace"
+        >
+            <div class="d-flex align-items-center">
+                <t
+                    t-if="ptal.attribute_id.description and attribute.display_type == 'select'"
+                >
+                    <i
+                        class="fa fa-info-circle"
+                        data-toggle="tooltip"
+                        data-placement="bottom"
+                        t-att-title="ptal.attribute_id.description"
+                        style="margin-right: 5px; margin-bottom: 5px;"
+                        id="description_tooltip"
+                    />
+                </t>
+                <select
+                    t-att-data-attribute_id="attribute.id"
+                    t-attf-class="form-select css_attribute_select o_wsale_product_attribute js_variant_change #{attribute.create_variant} #{'d-none' if single_and_custom else ''}"
+                    t-att-name="'ptal-%s' % ptal.id"
+                >
+                    <t t-foreach="ptavs" t-as="ptav">
+                        <option
+                            t-att-value="ptav.id"
+                            t-att-data-attribute-value-id="ptav.product_attribute_value_id.id"
+                            t-att-data-value_id="ptav.id"
+                            t-att-data-value_name="ptav.name"
+                            t-att-data-attribute_name="attribute.name"
+                            t-att-data-is_custom="ptav.is_custom"
+                            t-att-selected="ptav in combination"
+                            t-att-data-is_single="single"
+                            t-att-data-is_single_and_custom="single_and_custom"
+                        >
+                            <span t-field="ptav.name" />
+                            <t t-call="website_sale.badge_extra_price" />
+                        </option>
+                    </t>
+                </select>
+            </div>
+        </xpath>
+        <xpath
+            expr="//ul[@t-att-data-attribute_id='attribute.id']/t[@t-foreach='ptavs']"
+            position="before"
+        >
+            <t
+                t-if="ptal.attribute_id.description and attribute.display_type in ('radio', 'multi')"
+            >
+                <i
+                    class="fa fa-info-circle"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    t-att-title="ptal.attribute_id.description"
+                    style="margin-right: 5px;"
+                    id="description_tooltip"
+                />
+            </t>
+        </xpath>
+        <xpath
+            expr="//ul[@data-bs-toggle='buttons']/t[@t-foreach='ptavs']"
+            position="before"
+        >
+            <t
+                t-if="ptal.attribute_id.description and attribute.display_type == 'pills'"
+            >
+                <i
+                    class="fa fa-info-circle"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    t-att-title="ptal.attribute_id.description"
+                    style="margin-right: 5px;"
+                    id="description_tooltip"
+                />
+            </t>
+        </xpath>
+        <xpath
+            expr="//ul[@t-att-data-attribute_id='attribute.id']/li[@t-foreach='ptavs']"
+            position="before"
+        >
+            <t
+                t-if="ptal.attribute_id.description and attribute.display_type == 'color'"
+            >
+                <i
+                    class="fa fa-info-circle"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    t-att-title="ptal.attribute_id.description"
+                    style="margin-right: 5px;"
+                    id="description_tooltip"
+                />
+            </t>
+        </xpath>
+    </template>
+</odoo>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+This module adds description to product's attributes. It can be shown in the online shop using module website_product_attribute_description.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+#. Go to Sales or Inventory -> Configuration -> Attributea -> Choose an atribute -> Add your description`