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.

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?