[ADD] better_ribbons: enhance product ribbons with badges and auto-assignment

- Two display styles: classic ribbon or compact badge
- Automatic ribbon assignment based on conditions:
  * Out of stock products
  * Products on sale/discount
  * Newly published products (configurable timeframe)
- Manual override capability
- Ribbon sequence/priority ordering
- Publish date tracking for "new" ribbon logic

Author: ardo-odoo

better_ribbons/__init__.py

@@ -0,0 +1,2 @@
+from . import models
+from . import controllers

better_ribbons/__manifest__.py

@@ -0,0 +1,23 @@
+{
+    'name': 'Better Ribbons',
+    'version': '1.0',
+    'description': 'Improved ribbons with badges and auto-assign',
+    'author': 'Aryan Donga (ardo)',
+    'license': 'LGPL-3',
+    'depends': ['base', 'website_sale', 'website_sale_stock'],
+    'installable': True,
+    'auto_install': False,
+    'data': [
+        'views/product_ribbon_views.xml',
+        'views/snippets.xml',
+        'views/website_templates.xml',
+    ],
+    'assets': {
+        'website.assets_wysiwyg': [
+            'better_ribbons/static/src/js/website_sale_editor.js'
+        ],
+        'website.backend_assets_all_wysiwyg': [
+            'better_ribbons/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js'
+        ],
+    },
+}

better_ribbons/controllers/__init__.py

@@ -0,0 +1 @@
+from . import main

better_ribbons/controllers/main.py

@@ -0,0 +1,52 @@
+from odoo.addons.website_sale.controllers.main import WebsiteSale
+from odoo.http import request, route
+
+
+class WebsiteSaleExtended(WebsiteSale):
+    @route(
+        [
+            '/shop',
+            '/shop/page/<int:page>',
+            '/shop/category/<model("product.public.category"):category>',
+            '/shop/category/<model("product.public.category"):category>/page/<int:page>',
+        ],
+        type='http',
+        auth='public',
+        website=True,
+    )
+    def shop(
+        self,
+        page=0,
+        category=None,
+        search='',
+        min_price=0.0,
+        max_price=0.0,
+        ppg=False,
+        **post,
+    ):
+        response = super().shop(
+            page, category, search, min_price, max_price, ppg, **post
+        )
+
+        if products := response.qcontext.get('products'):
+            products_prices = response.qcontext.get('products_prices')
+            for product in products:
+                product._set_ribbon(products_prices.get(product.id))
+
+        return response
+
+    @route(
+        ['/shop/<model("product.template"):product>'],
+        type='http',
+        auth='public',
+        website=True,
+        readonly=True,
+    )
+    def product(self, product, category='', search='', **kwargs):
+        response = super().product(product, category, search, **kwargs)
+
+        if prd := response.qcontext.get('product'):
+            prices = prd._get_sales_prices(request.env['website'].get_current_website())
+            prd._set_ribbon(prices.get(prd.id))
+
+        return response

better_ribbons/models/__init__.py

@@ -0,0 +1,2 @@
+from . import product_ribbon
+from . import product_template

better_ribbons/models/product_ribbon.py

@@ -0,0 +1,31 @@
+from odoo import fields, models
+
+
+class ProductRibbon(models.Model):
+    _inherit = 'product.ribbon'
+    _order = 'sequence asc, create_date asc'
+
+    style = fields.Selection(
+        [('ribbon', 'Ribbon'), ('tag', 'Badge')],
+        string='Style',
+        required=True,
+        default='ribbon',
+    )
+
+    assign = fields.Selection(
+        [
+            ('manually', 'Manually'),
+            ('sale', 'Sale'),
+            ('out_of_stock', 'Out of Stock'),
+            ('new', 'New'),
+        ],
+        string='Assign',
+        required=True,
+        default='manually',
+    )
+
+    new_until = fields.Integer(default=30, help='Days to consider a product as new')
+    sequence = fields.Integer(default=10, help='Sequence to prioritize ribbons')
+
+    def _get_position_class(self):
+        return f'o_{self.style}_{self.position}'

better_ribbons/models/product_template.py

@@ -0,0 +1,65 @@
+from odoo import api, fields, models
+
+
+class ProductTemplate(models.Model):
+    _inherit = 'product.template'
+
+    publish_date = fields.Date(readonly=True, copy=False)
+    has_manual_ribbon = fields.Boolean(
+        compute='_compute_has_manual_ribbon', copy=False, store=True
+    )
+
+    @api.depends('website_ribbon_id')
+    def _compute_has_manual_ribbon(self):
+        for product in self:
+            if not product.website_ribbon_id:
+                product.has_manual_ribbon = False
+
+    def _set_ribbon(self, products_prices):
+        self.ensure_one()
+        product_ribbons = self.env['product.ribbon'].sudo()
+
+        if self.has_manual_ribbon:
+            return None
+
+        def _add_ribbon(ribbon):
+            if ribbon.id != self.website_ribbon_id.id:
+                self.with_context(auto_assign_ribbon=True).write({
+                    'website_ribbon_id': ribbon.id
+                })
+
+        stock_ribbon = product_ribbons.search([('assign', '=', 'out_of_stock')])
+        if stock_ribbon and self._is_sold_out() and not self.allow_out_of_stock_order:
+            return _add_ribbon(stock_ribbon[0])
+
+        sale_ribbon = product_ribbons.search([('assign', '=', 'sale')])
+        if sale_ribbon and (
+            products_prices.get('price_reduce')
+            < products_prices.get('base_price', self.list_price)
+        ):
+            return _add_ribbon(sale_ribbon[0])
+
+        new_ribbon = product_ribbons.search([('assign', '=', 'new')])
+        if new_ribbon and self.publish_date:
+            if (fields.Date.today() - self.publish_date).days <= new_ribbon.new_until:
+                return _add_ribbon(new_ribbon[0])
+
+        return self.write({'website_ribbon_id': False})
+
+    def write(self, vals):
+        if 'website_ribbon_id' in vals:
+            if self.env.context.get('auto_assign_ribbon'):
+                vals['has_manual_ribbon'] = False
+            else:
+                vals['has_manual_ribbon'] = bool(vals['website_ribbon_id'])
+
+        if 'is_published' in vals:
+            # Set publish date when publishing
+            if vals['is_published'] and not self.is_published:
+                vals['publish_date'] = fields.Date.today()
+
+            # Clear publish date when unpublishing
+            elif not vals['is_published']:
+                vals['publish_date'] = False
+
+        return super().write(vals)

better_ribbons/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -0,0 +1,29 @@
+/** @odoo-module **/
+
+import { patch } from '@web/core/utils/patch';
+import { WysiwygAdapterComponent } from '@website/components/wysiwyg_adapter/wysiwyg_adapter';
+
+patch(WysiwygAdapterComponent.prototype, {
+    /**
+     * @override
+     */
+    async init() {
+        await super.init(...arguments);
+
+        let ribbons = [];
+        if (this._isProductListPage()) {
+            ribbons = await this.orm.searchRead(
+                'product.ribbon',
+                [],
+                ['id', 'name', 'bg_color', 'text_color', 'position', 'style']
+            );
+        }
+        this.ribbons = Object.fromEntries(ribbons.map(ribbon => {
+            return [ribbon.id, ribbon];
+        }));
+        this.originalRibbons = Object.assign({}, this.ribbons);
+        this.productTemplatesRibbons = [];
+        this.deletedRibbonClasses = '';
+        this.ribbonPositionClasses = {'left': 'o_ribbon_left o_tag_left', 'right': 'o_ribbon_right o_tag_right'};
+    }
+});

better_ribbons/static/src/js/website_sale_editor.js

@@ -0,0 +1,98 @@
+import options from '@web_editor/js/editor/snippets.options';
+
+options.registry.WebsiteSaleProductsItem = options.registry.WebsiteSaleProductsItem.extend({
+    willStart: async function () {
+        const _super = this._super.bind(this);
+        this.ppr = this.$target.closest('[data-ppr]').data('ppr');
+        this.defaultSort = this.$target[0].closest('[data-default-sort]').dataset.defaultSort;
+        this.productTemplateID = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
+        this.ribbonPositionClasses = {'left': 'o_ribbon_left o_tag_left', 'right': 'o_ribbon_right o_tag_right'};
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        this.$ribbon = this.$target.find('.o_ribbon');
+        return _super(...arguments);
+    },
+
+    async setRibbonPosition(previewMode, widgetValue, params) {
+        const ribbonClasses = this.$ribbon[0].classList;
+        const ribbonData = this.ribbons[this.$target[0].dataset.ribbonId] || {};
+        const style = params?.style || ribbonData?.style || 'ribbon';
+        ribbonClasses.remove('o_ribbon_right', 'o_ribbon_left', 'o_tag_right', 'o_tag_left');
+        ribbonClasses.add(`o_${style}_${widgetValue}`);
+
+        await this._saveRibbon();
+    },
+
+    async _computeWidgetState(methodName, params) {
+        const classList = this.$ribbon[0].classList;
+        switch (methodName) {
+            case 'setRibbon':
+                return this.$target.attr('data-ribbon-id') || '';
+            case 'setRibbonName':
+                return this.$ribbon.text();
+            case 'setRibbonPosition': {
+                return (
+                    classList.contains('o_ribbon_left')
+                    || classList.contains('o_tag_left')
+                ) ? 'left' : 'right';
+            }
+            case 'setRibbonStyle': {
+                return this.$ribbon.attr('data-style') ||
+                    ((
+                        classList.contains('o_tag_left')
+                        || classList.contains('o_tag_right')
+                    ) ? 'tag' : 'ribbon');
+            }
+        }
+        return this._super(methodName, params);
+    },
+
+    async _saveRibbon(isNewRibbon = false) {
+        const ribbonElement = this.$ribbon[0];
+        const ribbon = {
+            'name': this.$ribbon.text().trim(),
+            'bg_color': ribbonElement.style.backgroundColor,
+            'text_color': ribbonElement.style.color,
+            'position': (ribbonElement.classList.contains('o_ribbon_left') || ribbonElement.classList.contains('o_tag_left')) ? 'left' : 'right',
+            'style': ribbonElement.dataset?.style || 'ribbon'
+        };
+        ribbon.id = isNewRibbon ? Date.now() : parseInt(this.$target.closest('.oe_product')[0].dataset.ribbonId);
+        this.trigger_up('set_ribbon', {ribbon});
+        this.ribbons = await new Promise(resolve => this.trigger_up('get_ribbons', {callback: resolve}));
+        this.rerender = true;
+        await this._setRibbon(ribbon.id);
+    },
+
+    async _setRibbon(ribbonId) {
+        this.$target[0].dataset.ribbonId = ribbonId;
+        this.trigger_up('set_product_ribbon', {
+            templateId: this.productTemplateID,
+            ribbonId: ribbonId || false
+        });
+        const ribbon = (
+            this.ribbons[ribbonId] ||
+            {name: '', bg_color: '', text_color: '', position: 'left', style: 'ribbon'}
+        );
+
+        const $editableDocument = $(this.$target[0].ownerDocument.body);
+        const $ribbons = $editableDocument.find(`[data-ribbon-id="${ribbonId}"] .o_ribbon`);
+        $ribbons.empty().append(ribbon.name);
+        $ribbons.removeClass('o_ribbon_left o_tag_left o_ribbon_right o_tag_right');
+
+        $ribbons.addClass(`o_${ribbon.style}_${ribbon.position}`);
+        $ribbons.attr('data-style', ribbon.style);
+        $ribbons.css('background-color', ribbon.bg_color || '');
+        $ribbons.css('color', ribbon.text_color || '');
+
+        if (!this.ribbons[ribbonId]) {
+            $editableDocument.find(`[data-ribbon-id="${ribbonId}"]`).each((index, product) => delete product.dataset.ribbonId);
+        }
+
+        this.$ribbon.addClass('o_dirty');
+    },
+
+    async setRibbonStyle(previewMode, widgetValue, params) {
+        this.$ribbon.attr('data-style', widgetValue);
+
+        await this._saveRibbon();
+    }
+});

better_ribbons/tests/__init__.py

@@ -0,0 +1 @@
+from . import test_better_ribbons