Example of snippet showcase with qweb

snippet_showcase.md

A snippets showcase can be added to any page of your theme but it's intended to be used in the demo pages.

In order to make a snippet showcase, you need a div with the class js_snippets_showcase. The content of this div will be parsed as a QWeb (client side) document using the prefix ts. Once parsed, the snippet showcase widget will render the template named main.

Eg:

<div id="js_snippets_showcase">
    <ts ts-name="main">
        Hello <b>world</b> !
    </ts>
</div>

In the snippets showcase mode, all the snippets are loaded through javascript and transformed into qweb templates. It means that you can call them like you would do with any other template, eg:

<div id="js_snippets_showcase">
    <ts ts-name="main">
        <ts ts-call="Banner"/>
        <ts ts-call="Big Message"/>
    </ts>
</div>

The previous template would render the Banner and Big Message templates.

In order to properly showcase your snippets, you most probably want to make some customization to them.

This can be achieved using the ts-extend directive of QWeb.js.

Here's an example of how you would change the title of a snippet, the image source remove the <h3> and add a div with additional content:

<div id="js_snippets_showcase">
    <ts ts-extend="Banner">
        <ts ts-jquery="h1" ts-operation="inner">
            My brand new title
        </ts>

        <ts ts-jquery="img:first" ts-operation="attributes">
            <attribute name="src">/img/test.png</attribute>
        </ts>
        
        <!-- here we replace by anything, it's how you remove a node -->
        <ts ts-jquery="h3" ts-operation="replace"/>

        <ts ts-jquery="div.o_block_banner_snip" ts-operation="append">
            <div>
                Additional
                <!-- Of course you can call a snippet from anoter snippet -->
                <ts ts-call="Separator"/>
                Content
            </div>
        </ts>
    </ts>

    <ts ts-name="main">
        <ts ts-call="Banner"/>
    </ts>
</div>

Here are the different values for the ts-operation directive: append, prepend, before, after, replace, inner, attributes

NOTE: This snippet showcase mode is only meant to make demo pages for the themes and should NOT be used for production pages.

Seems cool!
If the user make changes and click on "save" the page will simply reload without record any data into the database, right?

Yes. Now that you say it of course it feels weird. The showcase is read-only, and thus it does not showcase the editor. Damn! Well, I'll have to think about this.

Snippets on a demo page can be edited and removed. But, you can't add more snippets, except if it's a Content Snippet (with data-drop-in). Is it a normal behavior?