Odoo-9, my widget doesn't work in QWeb view

Question

I have made a widget in Odoo 9 for cutting product description in website view. Added widget="short_desc" to product form view and website product view. I mean something like that:

<span t-field="product.description"/> <!-- full description -->
<span t-field="product.description" t-field-options='{"widget": "short_desc"}'/> <!-- short description -->
<span t-field="product.description" widget="short_desc"/> <!-- also tried this syntax -->

I found helpful this answer: Odoo 9. How to override form widgets?, but it works only in product form and doesn't on website.

So, I have a widgets.js:

odoo.define('wsup.widgets', function (require) {
'use strict';

var core = require('web.core');
var FieldChar = core.form_widget_registry.get('char');

var ShortDescriptionView = FieldChar.extend({
    render_value: function() {
        console.log('hey, im working!');
        this.$el.html('<span>Ok, widget really works</span>');
    },
});

core.form_widget_registry.add('short_desc', ShortDescriptionView);
});

When I go to Sales -> Products and open any product, I can see "Ok, widget really works" instead of its description, but when I go to /shop page — product description still has no changes and nothing in JS console.

Here is part of my website product XML view (it works good at all, except short description part):

<div class="product-preview oe_website_sale">
    <div class="product-preview__image">
        <a t-attf-href="/shop/product/{{ item.id }}">
            <span itemprop="image" t-field="item.image" t-field-options='{"widget": "image"}' t-att-alt="item.name"/>
        </a>
    </div>
    <div class="product-preview__info text-center">
        <div class="product-preview__info__title">
            <h2><a t-attf-href="/shop/product/{{ item.id }}"><span t-field="item.name"/></a></h2>
        </div>
        <div class="product-preview__info__description">
            <p><span t-field="item.description" t-field-options='{"widget": "short_desc"}'/></p>
        </div>
    </div>
</div>

Why it doesn't work on /shop page? What I forgot to do? Thank you.

Answer 1

As I understand your comment your requirement was to show small amount of description rather than showing a huge description. So, I think this requirement can be easily achieved without create a widget.

Suppose, you have this content as description:

---

Two is better than one.

Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to handle bass and mid-range sounds and a tweeter for high-frequency audio. These dedicated drivers help ensure accurate, detailed sound across the entire sonic spectrum. The result: you’re immersed in the music and hear details you never knew existed. Even when listening to an old favorite, you may feel like you’re hearing it for the first time.

And from this much description if you want to show small amount of description or number of words than you can simple use the below code.

<span t-if="product.website_description and len(product.website_description) &gt; 500">
    <t t-set="description" t-value="product.website_description[:500] and product.website_description[:500].replace('+', '\n')+'...'"/>
        <p class="text-muted ">
            <t t-raw="description"/>
        </p>
</span>

In this above code, [:500] will be the number of words to be used.

---

Output will be:

Two is better than one.

Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to han...

---

Hope, this code will help you. Thanks.