I'm building an odoo18 module that would show unique product variant descriptions on the ecommerce site. The description must also update when user change the variant on the website (not necessarily reloading whole page).

And this is a step where I got stuck and would ask for help ;) 

here are important files for my configuration - this works just fine

model

class ProductProduct(models.Model):
    _inherit = 'product.product'
    website_description_variant = fields.Html(
        string="Website Description (Variant)", 
        translate=True
    )

class ProductTemplate(models.Model):
    _inherit = 'product.template'

    def _get_combination_info(self, *args, **kwargs):
        res = super()._get_combination_info(*args, **kwargs)
        product_id = res.get('product_id')
        if product_id:
            product = self.env['product.product'].browse(product_id)
            res['website_description_variant'] = product.website_description_variant or ""
        return res

xml portal view:

<odoo>
    <data>
        <template id="website_product_variant_description_snippet" inherit_id="website_sale.product">
            <xpath expr="//div[@t-field='product.description_ecommerce']" position="after">
                <div class="oe_structure oe_variant_desc">
                    <h2>Variant Description</h2>
                    <t t-if="product.product_variant_id.website_description_variant">
                        <div id="variant_description">
                            <t t-out="product.product_variant_id.website_description_variant"/>
                        </div>
                    </t>
                </div>
            </xpath>
        </template>
    </data>
</odoo>

the important manifest stuff:

'depends': ['website_sale', 'website', 'web', 'web_editor'],
    'data': [
        'views/product_variant_description_views.xml',
        'views/product_variant_description_website.xml',        
    ],
    'assets': {
        'web.assets_frontend': [
            'product_variant_description/static/src/js/product_variant_description.js',
        ],
    },

And it works perfectly to show the first variant description. But then it is shown at every variant and is not refreshed anyhow.

I've added this js file (which seems to be the problem)

console.log('[product_variant_description] JS loaded!');

odoo.define('product_variant_description.variant_description', ['web.public.widget'], function (require) {
    "use strict";

    var publicWidget = require('web.public.widget');

    publicWidget.registry.ProductVariantDescription = publicWidget.Widget.extend({
        selector: '#variant_description',
        events: {
            'change_variant': '_onVariantChange',
        },
        _onVariantChange: function (ev) {
            const variantDesc = data.combination_info.variant_description || '';
            data.$container.find('#variant_description').html(variantDesc);
        },
    });

    return publicWidget.registry.ProductVariantDescription;
});

but it only produces errors like The following modules are needed by other modules but have not been defined, they may not be present in the correct asset bundle: ['web.public.widget']​ and does not console log anything at all. I've tried almost all approaches i could find but failed miserably.

TLDR: I would love any suggestions on how to achieve unique product variant descriptions shown on the ecommerce site.

If someone is familiar with development of odoo modules then I'd be glad to learn more, as custom portal extensions are rather omitted in tutoprial/docs