[IMP] website_sale_product_reference_displayed: Show reference of variant

SirPyTech · Chionne27 · commit 93197b1b2a46 · 2025-08-14T12:06:31.000+02:00
diff --git a/website_sale_product_reference_displayed/README.rst b/website_sale_product_reference_displayed/README.rst
@@ -1,7 +1,3 @@
-.. image:: https://odoo-community.org/readme-banner-image
-   :target: https://odoo-community.org/get-involved?utm_source=readme
-   :alt: Odoo Community Association
-
 =======================================
 Display product reference in e-commerce
 =======================================
@@ -17,7 +13,7 @@ Display product reference in e-commerce
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
     :target: https://odoo-community.org/page/development-status
     :alt: Beta
-.. |badge2| image:: https://img.shields.io/badge/license-AGPL--3-blue.png
+.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fe--commerce-lightgray.png?logo=github
@@ -35,6 +31,8 @@ Display product reference in e-commerce
 This module extends the ``website_sale`` views to display the product's full
 display name, with its product reference included.
 
+The Internal Reference is also shown explicitly in the product details and automatically updated when the chosen variant changes.
+
 **Table of contents**
 
 .. contents::
@@ -76,6 +74,9 @@ Contributors
 
   * David Vidal
   * Carlos Roca
+* `PyTech <https://www.pytech.it>`_:
+
+  * Simone Rubino <simone.rubino@pytech.it>
 
 Maintainers
 ~~~~~~~~~~~
diff --git a/website_sale_product_reference_displayed/__init__.py b/website_sale_product_reference_displayed/__init__.py
@@ -0,0 +1,3 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import controllers
diff --git a/website_sale_product_reference_displayed/__manifest__.py b/website_sale_product_reference_displayed/__manifest__.py
@@ -10,5 +10,5 @@
     "application": False,
     "installable": True,
     "depends": ["website_sale"],
-    "data": ["views/website_sale_views.xml"],
+    "data": ["views/assets.xml", "views/website_sale_views.xml"],
 }
diff --git a/website_sale_product_reference_displayed/controllers/__init__.py b/website_sale_product_reference_displayed/controllers/__init__.py
@@ -0,0 +1,3 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import variant
diff --git a/website_sale_product_reference_displayed/controllers/variant.py b/website_sale_product_reference_displayed/controllers/variant.py
@@ -0,0 +1,25 @@
+# Copyright 2025 Simone Rubino - PyTech
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from odoo import http
+from odoo.http import request
+
+from odoo.addons.website_sale.controllers.variant import WebsiteSaleVariantController
+
+
+class WebsiteSaleReferenceDisplayed(WebsiteSaleVariantController):
+    @http.route()
+    def get_combination_info_website(
+        self, product_template_id, product_id, combination, add_qty, **kw
+    ):
+        res = super().get_combination_info_website(
+            product_template_id, product_id, combination, add_qty, **kw
+        )
+        variant_id = res.get("product_id")
+        if variant_id:
+            variant = request.env["product.product"].browse(variant_id)
+            variant_reference = variant.default_code or None
+        else:
+            variant_reference = None
+        res["variant_reference"] = variant_reference
+        return res
diff --git a/website_sale_product_reference_displayed/readme/CONTRIBUTORS.rst b/website_sale_product_reference_displayed/readme/CONTRIBUTORS.rst
@@ -2,3 +2,6 @@
 
   * David Vidal
   * Carlos Roca
+* `PyTech <https://www.pytech.it>`_:
+
+  * Simone Rubino <simone.rubino@pytech.it>
diff --git a/website_sale_product_reference_displayed/readme/DESCRIPTION.rst b/website_sale_product_reference_displayed/readme/DESCRIPTION.rst
@@ -1,2 +1,4 @@
 This module extends the ``website_sale`` views to display the product's full
 display name, with its product reference included.
+
+The Internal Reference is also shown explicitly in the product details and automatically updated when the chosen variant changes.
diff --git a/website_sale_product_reference_displayed/static/description/index.html b/website_sale_product_reference_displayed/static/description/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
-<title>README.rst</title>
+<title>Display product reference in e-commerce</title>
 <style type="text/css">
 
 /*
@@ -360,23 +360,19 @@
 </style>
 </head>
 <body>
-<div class="document">
+<div class="document" id="display-product-reference-in-e-commerce">
+<h1 class="title">Display product reference in e-commerce</h1>
 
-
-<a class="reference external image-reference" href="https://odoo-community.org/get-involved?utm_source=readme">
-<img alt="Odoo Community Association" src="https://odoo-community.org/readme-banner-image" />
-</a>
-<div class="section" id="display-product-reference-in-e-commerce">
-<h1>Display product reference in e-commerce</h1>
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! source digest: sha256:a465cf6f0086649a64e71d3d65a999dbaf16c19dce1ac1c6a8e9fbe3b6e605a6
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/license-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/e-commerce/tree/14.0/website_sale_product_reference_displayed"><img alt="OCA/e-commerce" src="https://img.shields.io/badge/github-OCA%2Fe--commerce-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/e-commerce-14-0/e-commerce-14-0-website_sale_product_reference_displayed"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/e-commerce&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/e-commerce/tree/14.0/website_sale_product_reference_displayed"><img alt="OCA/e-commerce" src="https://img.shields.io/badge/github-OCA%2Fe--commerce-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/e-commerce-14-0/e-commerce-14-0-website_sale_product_reference_displayed"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/e-commerce&amp;target_branch=14.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module extends the <tt class="docutils literal">website_sale</tt> views to display the product’s full
 display name, with its product reference included.</p>
+<p>The Internal Reference is also shown explicitly in the product details and automatically updated when the chosen variant changes.</p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
@@ -391,7 +387,7 @@ <h1>Display product reference in e-commerce</h1>
 </ul>
 </div>
 <div class="section" id="usage">
-<h2><a class="toc-backref" href="#toc-entry-1">Usage</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
 <p>Just install and the products will be shown with their full display name.</p>
 <p>You can enable or disable for each template and website in the <em>Customize</em> frontend
 menu setting the <em>Display product reference</em> option on or off.</p>
@@ -400,33 +396,37 @@ <h2><a class="toc-backref" href="#toc-entry-1">Usage</a></h2>
 </div>
 </div>
 <div class="section" id="bug-tracker">
-<h2><a class="toc-backref" href="#toc-entry-2">Bug Tracker</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-2">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/e-commerce/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
 <a class="reference external" href="https://github.com/OCA/e-commerce/issues/new?body=module:%20website_sale_product_reference_displayed%0Aversion:%2014.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h2><a class="toc-backref" href="#toc-entry-3">Credits</a></h2>
+<h1><a class="toc-backref" href="#toc-entry-3">Credits</a></h1>
 <div class="section" id="authors">
-<h3><a class="toc-backref" href="#toc-entry-4">Authors</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-4">Authors</a></h2>
 <ul class="simple">
 <li>Tecnativa</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h3><a class="toc-backref" href="#toc-entry-5">Contributors</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-5">Contributors</a></h2>
 <ul class="simple">
 <li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
 <li>David Vidal</li>
 <li>Carlos Roca</li>
 </ul>
 </li>
+<li><a class="reference external" href="https://www.pytech.it">PyTech</a>:<ul>
+<li>Simone Rubino &lt;<a class="reference external" href="mailto:simone.rubino&#64;pytech.it">simone.rubino&#64;pytech.it</a>&gt;</li>
+</ul>
+</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h3><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h3>
+<h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org">
 <img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
@@ -439,6 +439,5 @@ <h3><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h3>
 </div>
 </div>
 </div>
-</div>
 </body>
 </html>
diff --git a/website_sale_product_reference_displayed/static/src/js/variant_mixin.js b/website_sale_product_reference_displayed/static/src/js/variant_mixin.js
@@ -0,0 +1,34 @@
+odoo.define("website_sale_product_reference_displayed.variant_mixin", function (
+    require
+) {
+    "use strict";
+
+    var publicWidget = require("web.public.widget");
+
+    publicWidget.registry.WebsiteSale.include({
+        _onChangeCombination: function (ev, $parent, combination) {
+            var result = this._super.apply(this, arguments);
+
+            // Dynamically update the variant_reference,
+            // and hide it when empty
+            var variant_reference = combination.variant_reference;
+            var variant_reference_node = $parent
+                .parents("#product_details")
+                .find(".js_variant_reference_displayed")
+                .first();
+            if (variant_reference_node) {
+                variant_reference_node.text(variant_reference).trigger("change");
+
+                var variant_reference_parent_node = variant_reference_node.parents(
+                    ".js_variant_reference_displayed_parent"
+                );
+                if (variant_reference) {
+                    variant_reference_parent_node.removeClass("d-none");
+                } else {
+                    variant_reference_parent_node.addClass("d-none");
+                }
+            }
+            return result;
+        },
+    });
+});
diff --git a/website_sale_product_reference_displayed/static/tests/tours/dynamic_variant_reference.js b/website_sale_product_reference_displayed/static/tests/tours/dynamic_variant_reference.js
@@ -0,0 +1,53 @@
+odoo.define(
+    "website_sale_product_reference_displayed.tour_dynamic_variant_reference",
+    function (require) {
+        "use strict";
+
+        var tour = require("web_tour.tour");
+
+        tour.register(
+            "tour_dynamic_variant_reference",
+            {
+                test: true,
+                url: "/shop?search=Test dynamic variant product template",
+            },
+            [
+                {
+                    content: "Select Product",
+                    trigger:
+                        '.oe_product_cart a:containsExact("Test dynamic variant product template")',
+                },
+                {
+                    content: "Click on the second attribute value",
+                    trigger:
+                        'input[data-attribute_name="Test dynamic variant attribute"][data-value_name="Test dynamic variant value 1"]',
+                },
+                {
+                    content: "Wait for variant to be loaded",
+                    trigger: '.oe_price .oe_currency_value:contains("0.00")',
+                    // eslint-disable-next-line no-empty-function
+                    run: function () {},
+                },
+                {
+                    content: "Check the Internal Reference of the 1st variant",
+                    trigger: "span.js_variant_reference_displayed:contains(TESTREF1)",
+                },
+                {
+                    content: "Click on the second attribute value",
+                    trigger:
+                        'input[data-attribute_name="Test dynamic variant attribute"][data-value_name="Test dynamic variant value 2"]',
+                },
+                {
+                    content: "Wait for variant to be loaded",
+                    trigger: '.oe_price .oe_currency_value:contains("0.00")',
+                    // eslint-disable-next-line no-empty-function
+                    run: function () {},
+                },
+                {
+                    content: "Check the Internal Reference of the 2st variant",
+                    trigger: "span.js_variant_reference_displayed:contains(TESTREF2)",
+                },
+            ]
+        );
+    }
+);
diff --git a/website_sale_product_reference_displayed/tests/__init__.py b/website_sale_product_reference_displayed/tests/__init__.py
@@ -0,0 +1,3 @@
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from . import test_reference_displayed
diff --git a/website_sale_product_reference_displayed/tests/test_reference_displayed.py b/website_sale_product_reference_displayed/tests/test_reference_displayed.py
@@ -0,0 +1,46 @@
+# Copyright 2025 Simone Rubino - PyTech
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+
+from odoo import tests
+
+
+@tests.tagged("post_install", "-at_install")
+class TestReferenceDisplayed(tests.HttpSavepointCase):
+    @classmethod
+    def setUpClass(cls):
+        super().setUpClass()
+
+        attribute_form = tests.Form(cls.env["product.attribute"])
+        attribute_form.name = "Test dynamic variant attribute"
+        attribute_form.create_variant = "always"
+        with attribute_form.value_ids.new() as value:
+            value.name = "Test dynamic variant value 1"
+        with attribute_form.value_ids.new() as value:
+            value.name = "Test dynamic variant value 2"
+        cls.attribute = attribute_form.save()
+        cls.attribute_value_1, cls.attribute_value_2 = cls.attribute.value_ids
+
+        product_template_form = tests.Form(cls.env["product.template"])
+        product_template_form.name = "Test dynamic variant product template"
+        product_template_form.list_price = 100
+        product_template_form.is_published = True
+        with product_template_form.attribute_line_ids.new() as length_attribute_line:
+            length_attribute_line.attribute_id = cls.attribute
+            for value in cls.attribute.value_ids:
+                length_attribute_line.value_ids.add(value)
+        cls.product_template = product_template_form.save()
+
+        cls.product_variant_1 = cls.product_template.product_variant_ids.filtered(
+            lambda variant, attribute_value=cls.attribute_value_1: attribute_value
+            == variant.product_template_attribute_value_ids.product_attribute_value_id
+        )
+        cls.product_variant_1.default_code = "TESTREF1"
+        cls.product_variant_2 = cls.product_template.product_variant_ids.filtered(
+            lambda variant, attribute_value=cls.attribute_value_2: attribute_value
+            == variant.product_template_attribute_value_ids.product_attribute_value_id
+        )
+        cls.product_variant_2.default_code = "TESTREF2"
+
+    def test_dynamic_variant_reference(self):
+        """When the selected variant changes, the Internal Reference is updated."""
+        self.start_tour("/", "tour_dynamic_variant_reference")
diff --git a/website_sale_product_reference_displayed/views/assets.xml b/website_sale_product_reference_displayed/views/assets.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+    ~ Copyright 2025 Simone Rubino - PyTech
+    ~ License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+-->
+<odoo>
+    <template id="assets_frontend" inherit_id="website.assets_frontend">
+        <xpath expr="script[last()]" position="after">
+            <script
+                type="text/javascript"
+                src="/website_sale_product_reference_displayed/static/src/js/variant_mixin.js"
+            />
+        </xpath>
+    </template>
+    <template id="assets_tests" inherit_id="web.assets_tests">
+        <xpath expr="." position="inside">
+            <script
+                type="text/javascript"
+                src="/website_sale_product_reference_displayed/static/tests/tours/dynamic_variant_reference.js"
+            />
+        </xpath>
+    </template>
+</odoo>
diff --git a/website_sale_product_reference_displayed/views/website_sale_views.xml b/website_sale_product_reference_displayed/views/website_sale_views.xml
@@ -45,6 +45,28 @@
             <h1 itemprop="name" t-field="product.display_name" />
         </xpath>
     </template>
+    <template
+        id="product_combination"
+        name="Display variant reference"
+        inherit_id="website_sale.product"
+        customize_show="True"
+    >
+        <!-- Combination description -->
+        <xpath
+            expr="//div[@id='wrap']/section/div[@class='row']/div[@id='product_details']/div[@id='product_attributes_simple']"
+            position="before"
+        >
+            <p
+                t-attf-class="text-muted js_variant_reference_displayed_parent {{'' if product_variant.default_code else 'd-none'}}"
+            >
+                Internal Reference:
+                <span
+                    class="js_variant_reference_displayed"
+                    t-field="product_variant.default_code"
+                />
+            </p>
+        </xpath>
+    </template>
     <template
         id="recommended_products"
         name="Display product reference"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).`
	`2`	`+`
	`3`	`+from . import controllers`
Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@`
`10`	`10`	`"application": False,`
`11`	`11`	`"installable": True,`
`12`	`12`	`"depends": ["website_sale"],`
`13`		`- "data": ["views/website_sale_views.xml"],`
	`13`	`+ "data": ["views/assets.xml", "views/website_sale_views.xml"],`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).`
	`2`	`+`
	`3`	`+from . import variant`