Crear tu propios snippets en Odoo 10

Primeros pasos

Original de Florian Fischer:

http://bloopark.de/blog/the-bloopark-times-english-2/post/a-beginners-guide-to-building-snippets-in-odoo-105

Iniciar el desarrollo de módulos con Odoo puede ser algo desalentador. La documentación puede resultar ser un poco exhaustiva. Esta es la razón por la que es necesario a veces contar con tips que le recuerden a uno el camino largo en resumidos pasos, este pequeño artículo sobre cómo crear bloques de contenido re utilizables para su sitio web. 

Hay que considerar leer,  de la documentación de Odoo, sobre cómo crear un tema en Odoo.

 Como primer paso, queremos crear un nuevo módulo en la carpeta addons del proyecto Odoo elegido. Para ello utilizamos el comando scaffold. Si usted lo llama "Tema Dummy" o seguir las convenciones de nomenclatura de su equipo depende de usted. 

Crear el esqueleto del módulo

./odoo-bin scaffold mi_modulo /odoo/custom/addons/

Ahora debería ver una estructura de carpetas como esta:

addons/mi_modulo
|-- __init__.py
|-- __manifest__.py
|-- static
|   `-- style
|       `-- custom.less
`-- views
    |-- options.xml
    |-- pages.xml
    `-- snippets.xml

Podemos eliminar los archivos opciones.xml y pages.xml, ya que no vamos a usarlas. No olvide borrar las referencias en el archivo de manifiesto __manifest__.py también.
 

Añadir Estructura al Snippet

Ahora queremos crear nuestra vista iniciando con las etiquetas "<odoo>" y "<data>". Puede parecer algo trivial, pero si no los considera estará buscando su error por todos los logs y quizá hasta su odoo no vuelva a correr si no arregla este detalle. Después de eso añadimos el siguiente código que es básicamente la "cabeza" de nuestro fragmento. Aquí puede hacer referencia a sus archivos JavaScripts y CSS.

<template id="assets_frontend" inherit_id="website.assets_frontend" name="Mi Snippet">
    <xpath expr="." position="inside">
        <link rel="stylesheet" href="/mi_modulo/static/style/css/main.css" t-ignore="true"/>
    </xpath>
</template>


Comenzando con el contenido 

Es hora de empezar a rellenar el contenido para que nuestro snippet realice algo. Para ello abrimos una nueva etiqueta de plantilla y xpath:

<template id="you_snippet_id" inherit_id="website.snippets" name="Tema nuevo snippets">
    <xpath expr="//div[@id='snippet_structure']" position="inside">
        <div>
        </div>
    </xpath>
</template>

Como se puede ver, nuestro snippet hereda todas las cosas interesantes de la página web de Odoo "website.snippets" y la expresión xpath simplemente nos dice que es un nodo descendente de snippet_structure (y no contenido o características). Envolvemos todo el contenido en una "div" separada para que el fragmento funcione correctamente.

En esas divs ahora insertamos el siguiente código que realmente hace que nuestro snippet aparezca en la sección de estructuras para elegir:

<div class="oe_snippet_thumbnail">
    <img class="oe_snippet_thumbnail_img" src="/mi_modulo/static/style/img/mi_thumbnail.png" />
    <span class="oe_snippet_thumbnail_title">Mi Snippet</span>
</div>

No se debe usar un archivo png para la miniatura, pero funciona muy bien y el tamaño del archivo es lo suficientemente pequeño para la presentación rápida. Por supuesto, necesitará crear una carpeta para sus miniaturas. Después de esto podemos empezar a mostrar algo en nuestro snippet. ¿Cómo hacer que depende de usted, pero me gusta usar la estructura de Bootstrap:

<section class="oe_snippet_body”>
    <div class="container">
        <div class="row">
            <p>El contenido va a aqui</p>
        </div>
    </div>
</section>

Es importante darle a su sección principal la clase "oe_snippet_body" para que Odoo sepa que esta es la parte que en realidad se está arrastrando en su nuevo sitio web. Básicamente estamos terminados. Puede empezar a diseñar su fragmento y hacer todo tipo de cosas de lujo con él. Odoo está usando Menos como preprocesador predeterminado pero esto es, por supuesto, totalmente depende de usted. En Bloopark nos gusta usar Sass pero, por supuesto, también puede escribir su simple CSS antiguo.