Jak dodać własne snippety strony internetowej do edytora Odoo?

Kreator stron internetowych Odoo

Odoo posiada wiele szablonów i predefiniowanych bloków które służą do budowy strony w stylu drag&drop. A co gdy design strony internetowej zakłada użycie elementu, który nie jest dostępny?

Możemy albo edytować kod HTML strony (po uruchomieniu trybu developerskiego), albo napisać rozszerzenia widoków standardowych Odoo. Pierwsze rozwiązanie niesie ze sobą niebezpieczeństwo. Kiedy zrobimy update bazy danych, szablon widoku może zostać nadpisany - a my utracimy zmiany. Dlatego poprawnym rozwiązaniem jest dodanie widoków dziedziczących, co rozszerza widok nadrzędny (wspominałem już o tym w poście o zmianie szablonu strony).

Obraz 1. Zbiór snippetów - bloków z których możemy zbudować stronę internetową.

Jeżeli design strony zakłada wykorzystanie jednego elementu wielokrotnie, na wielu podstronach - w Odoo jest opcja dodania go do listy kreatora stron. Dzięki temu, w wygodny sposób możemy wykorzystać ten element, by umieszczać go na stronie poprzez zwykły drag&drop.

Taki element możemy dodać na dwa sposoby:

• Poprzez UI - tworząc nowe widoki rozszerzające
• Poprzez moduł danych - tworząc moduł, który następnie importujemy w Odoo

Jako programista używam zawsze tej drugiej opcji - głównie ze względu na kontrolę wersji. Co ważne, taki moduł możemy zaimportować w wersji On-Premise, .sh oraz Online!

Jak dodać element do snippetów "Zawartość wewnętrzna" w kreatorze stron Odoo?

Aby dodać nowy element do panelu wyboru, trzeba:

1. Utworzyć i zdefiniować nowy moduł
2. Zdefiniować nowy element
3. Rozszerzyć zbiór bloków

Nowy moduł tworzymy według schematu Odoo. Oto jak wygląda jego kompletna struktura:

├── example_element
│   ├── __init__.py
│   ├── __manifest__.py
│   ├── static
│   │   └── src
│   │       └── img
│   │           └── wbuilder
│   │               └── example_element.svg
│   └── views
│       └── snippets
│           ├── options.xml
│           └── s_example.xml

​example_element.svg​ - jest to obraz miniatura, wyświetlona nad tytułem bloku

​s_example.xml​ - zawiera definicję nowego elementu (punkt 2 z listy)

​options.xml​ - rozszerza zbiór elementów o nowy "s_example" (punkt 3 z listy)

Zawartość s_example.xml:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template 
    id="s_example" 
    name="Example of Reusable Block">
        <div class="o_snippet_drop_in_only">
            <p>
                ADAPT IT - Przykład!
            </p>
        </div>
    </template>
</odoo>

W powyższym kodzie definiujemy QWeb template o nazwie "Example of Reusable Block" o id s_example​. Wszystko wewnątrz tagu template będzie ciałem naszego bloku. Klasa div o_snippet_drop_in_only​ określa, że ten element możemy przeciągać i upuszczać w innych elementach. W wynikowym kodzie HTML, ta klasa jest usuwana.

Zawartość options.xml:

<?xml version="1.0" encoding="utf-8"?>
<odoo>

   <template id="snippets" inherit_id="website.snippets" name="Adapt IT - Snippets - Example">
      <xpath expr="//snippets[@id='snippet_content']/*[1]" position="before">
         <t 
         t-snippet="example_element.s_example" 
         string="My Block Element" 
         t-thumbnail="/example_element/static/src/img/wbuilder/example_element.svg">
            <keywords>Example</keywords>
         </t>
      </xpath>
   </template>

</odoo>

W powyższym fragmencie dodajemy zdefiniowany poprzednio element do listy bloków podstawowych. example_element​ to nazwa katalogu głównego, a więc i modułu - stąd `t-snippet="example_element.s_example".

Tak przygotowany moduł należy następnie skompresować do pliku ZIP, i importować do Odoo. Importujemy poprzez przejście do Aplikacji, gdzie wybieramy "Importuj Moduł". Nowy blok jest dostępny w edytorze zaraz po zakończonym imporcie.

Tak wygląda efekt końcowy:

Obraz 2. Prezentacja działania nowo dodanego bloku.