[ADD] dynamic_ribbons: add new ribbon functionality

Author: FlorianGilbert

README.md

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

dynamic_ribbons/__init__.py

@@ -0,0 +1,21 @@
+{
+    'name': 'Ribbon',
+    'version': '1.0',
+    'summary': '',
+    'author': 'PBCH',
+    'category': 'Website',
+    'depends': [ 'website_sale', 'stock' ],
+    'data': [
+        'views/product_ribbon_view.xml',
+        'views/snippet.xml',
+    ],
+    'assets': {
+        'website.assets_wysiwyg':[
+            'dynamic_ribbons/static/src/js/website_sale_editor.js',
+        ],
+        'website.backend_assets_all_wysiwyg': [
+            'dynamic_ribbons/static/src/js/adapter.js',
+        ],
+    },
+    'license': 'LGPL-3',
+}

dynamic_ribbons/__manifest__.py

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

dynamic_ribbons/controllers/__init__.py

@@ -0,0 +1,21 @@
+from odoo.addons.website_sale.controllers.main import WebsiteSale
+from odoo import http
+
+class WebsiteSaleExtended(WebsiteSale):
+
+    @http.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 response.qcontext.get('products'):
+            products_prices = response.qcontext.get('products_prices')
+            for product in response.qcontext['products']:
+                product._get_ribbon(products_prices)
+
+        return response
+        

dynamic_ribbons/controllers/shop_product.py

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

dynamic_ribbons/models/__init__.py

@@ -0,0 +1,49 @@
+from odoo import fields, models, api
+from odoo.exceptions import ValidationError
+
+class ProductRibbon(models.Model):
+    _inherit = "product.ribbon"
+
+    style = fields.Selection(
+        [("tag", "Tag"), ("ribbon", "Ribbon")],
+        string="Style",
+        default="ribbon",
+        required=True,
+    )
+    assign = fields.Selection(
+        [
+            ("manual", "Manual"),
+            ("sale", "Sale"),
+            ("out_of_stock", "Out of Stock"),
+            ("new", "New"),
+        ],
+        string="Assign",
+        default="manual",
+        required=True,
+    )
+    show_period = fields.Integer(default=30)
+
+    def _get_position_class(self):
+        if self.style == 'ribbon':
+            return 'o_ribbon_left' if self.position == 'left' else 'o_ribbon_right'
+        else:  # self.style == 'tag'
+            return 'o_tag_left' if self.position == 'left' else 'o_tag_right'
+
+    @api.model_create_multi
+    def create(self, vals_list):
+        for vals in vals_list:
+            assign_type = vals.get('assign')
+            if assign_type and assign_type != 'manual':
+                existing_ribbon = self.search([('assign', '=', assign_type)], limit=1)
+                if existing_ribbon:
+                    raise ValidationError(f"A ribbon with assign type '{assign_type}' already exists. You cannot create another one.")
+        return super().create(vals_list)
+        
+    def write(self, vals):
+        assign_type = vals.get('assign')
+        if assign_type != 'manual':
+            existing_ribbon = self.search([('assign', '=', assign_type), ('id', '!=', self.id)])
+            if existing_ribbon:
+                raise ValidationError(f"A ribbon with assign type '{assign_type}' already exists. You cannot assign another one.")
+        return super().write(vals)
+        

dynamic_ribbons/models/product_ribbon.py

@@ -0,0 +1,50 @@
+from odoo import models, fields
+
+class ProductTemplate(models.Model):
+    _inherit = 'product.template'
+
+    website_ribbon_auto = fields.Boolean("Automatic Ribbon", default=False)
+
+    def _get_ribbon(self, products_prices):
+        self.ensure_one()
+
+        product_ribbon_sudo = self.env['product.ribbon'].sudo()
+
+        if self.website_ribbon_id and not self.website_ribbon_auto:
+            return
+
+        # if (True):
+        #     continue
+
+        # Out of Stock Ribbon
+        out_of_stock_ribbon = product_ribbon_sudo.search([('assign', '=', 'out_of_stock')])
+        if out_of_stock_ribbon and self.qty_available <= 0.0 and not self.allow_out_of_stock_order:
+            self.website_ribbon_id = out_of_stock_ribbon.id
+            self.website_ribbon_auto = True
+            return 
+
+        # Sale Ribbon
+        pricelist_price = products_prices[self.id].get('price_reduce')
+        sale_ribbon = product_ribbon_sudo.search([('assign', '=', 'sale')])
+        if sale_ribbon and (pricelist_price < self.list_price or self.list_price < self.compare_list_price):            
+            self.website_ribbon_id = sale_ribbon.id
+            self.website_ribbon_auto = True
+            return
+
+        # New Product Ribbon
+        new_ribbon = product_ribbon_sudo.search([('assign', '=', 'new')])
+        if new_ribbon:
+            days_since_publish = (fields.Date.today() - self.create_date.date()).days
+            if days_since_publish <= new_ribbon.show_period:
+                self.website_ribbon_id = new_ribbon.id
+                self.website_ribbon_auto = True
+                return  
+
+        # If no ribbon was assigned automatically then clearing any existing automatic ribbon
+        self.website_ribbon_id = None
+
+
+    def write(self, vals):
+        if 'website_ribbon_id' in vals and vals['website_ribbon_id'] != self.website_ribbon_id.id:
+            vals['website_ribbon_auto'] = False
+        return super().write(vals)

dynamic_ribbons/models/product_template.py

@@ -0,0 +1,30 @@
+import { WysiwygAdapterComponent } from '@website/components/wysiwyg_adapter/wysiwyg_adapter';
+import { patch } from "@web/core/utils/patch";
+
+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'
+        };
+    },
+})

dynamic_ribbons/static/src/js/adapter.js

@@ -0,0 +1,107 @@
+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 ribbon = this.$ribbon[0];
+        // Get the style (tag or ribbon) from the dataset or params
+        const ribbonData = this.ribbons[this.$target[0].dataset.ribbonId] || {};
+        const style = params?.style || ribbonData?.style || "ribbon";  // Safe access        // Remove both tag and ribbon position classes
+        ribbon.classList.remove('o_ribbon_right', 'o_ribbon_left', 'o_tag_right', 'o_tag_left');
+        
+        // Add only the appropriate classes based on the selected style
+        ribbon.classList.add(style === "ribbon" ? `o_ribbon_${widgetValue}` : `o_tag_${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': {
+                if (classList.contains('o_ribbon_left') || classList.contains('o_tag_left')) {
+                    return 'left';
+                }
+                return 'right';
+            }
+            case 'setRibbonStyle': {
+                return this.$ribbon.attr('data-style') ||
+                    (this.$ribbon.hasClass('o_tag_left') || this.$ribbon.hasClass('o_tag_right') ? 'tag' : 'ribbon');
+            }
+        }
+        return this._super(methodName, params);
+    },
+
+    async _saveRibbon(isNewRibbon = false) {
+        const text = this.$ribbon.text().trim();
+
+        const ribbon = {
+            'name': text,
+            'bg_color': this.$ribbon[0].style.backgroundColor,
+            'text_color': this.$ribbon[0].style.color,
+            'position': (this.$ribbon.attr('class').includes('o_ribbon_left') || this.$ribbon.attr('class').includes('o_tag_left')) ? 'left' : 'right',
+            'style': this.$ribbon.attr('data-style') || 'ribbon',
+        };
+        ribbon.id = isNewRibbon ? Date.now() : parseInt(this.$target.closest('.oe_product')[0].dataset.ribbonId);
+        this.trigger_up('set_ribbon', {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'}
+        );
+        // This option also manages other products' ribbon, therefore we need a
+        // way to access all of them at once. With the content being in an iframe,
+        // this is the simplest way.
+        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_ribbon_right o_tag_left o_tag_right');
+
+        const ribbonPositionClasses = ribbon.style === 'tag'
+            ? (ribbon.position === 'left' ? 'o_tag_left' : 'o_tag_right')
+            : (ribbon.position === 'left' ? 'o_ribbon_left' : 'o_ribbon_right');
+
+        $ribbons.addClass(ribbonPositionClasses);
+        $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);
+        }
+
+        // The ribbon does not have a savable parent, so we need to trigger the
+        // saving process manually by flagging the ribbon as dirty.
+        this.$ribbon.addClass('o_dirty');
+    },
+
+    async setRibbonStyle(previewMode, widgetValue, params) {
+        this.$ribbon.attr('data-style', widgetValue);
+
+        await this._saveRibbon();
+    },
+})

dynamic_ribbons/static/src/js/website_sale_editor.js

@@ -0,0 +1,18 @@
+<odoo>
+    <record id="inherit_product_ribbon_form_view" model="ir.ui.view">
+        <field name="name">product.ribbon.form.view.inherit</field>
+        <field name="model">product.ribbon</field>
+        <field name="inherit_id" ref="website_sale.product_ribbon_form_view"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='position']" position="after">
+                <field name="style"/>
+                <field name="assign"/>
+                <div invisible="assign != 'new'" class="o_row">
+                    <span>For</span>
+                    <field name="show_period" style="max-width: 2rem;" nolabel="1"/>
+                    <span>days after publication</span>
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

dynamic_ribbons/views/product_ribbon_view.xml

@@ -0,0 +1,11 @@
+<odoo>
+    <template id="inherit_snippet_options"
+              inherit_id="website.snippet_options">
+        <xpath expr="//div[@data-name='ribbon_customize_opt']/we-colorpicker[1]" position="before">
+            <we-select string="Style" class="o_we_sublevel_1">
+                <we-button data-set-ribbon-style="tag">Tag</we-button>
+                <we-button data-set-ribbon-style="ribbon">Ribbon</we-button>
+            </we-select>
+        </xpath>
+    </template>
+</odoo>