Elrendezés

Ebben a fejezetben megtanulja, hogyan kell:

• Egyedi fejléc létrehozása.

• Egyedi lábléc létrehozása.

• Egy standard sablon módosítása.

• Szerzői jogi szekció hozzáadása.

• Javítsa weboldala reszponzivitását.

Alapértelmezett

Egy Odoo oldal keresztoldali és egyedi elemeket kombinál. A keresztoldali elemek minden oldalon azonosak, míg az egyedi elemek csak egy adott oldalhoz kapcsolódnak. Alapértelmezés szerint egy oldalnak két keresztoldali eleme van, a fejléc és a lábléc, valamint egy egyedi fő elem, amely az adott oldal specifikus tartalmát tartalmazza.

<div id="wrapwrap">
   <header/>
      <main>
         <div id="wrap" class="oe_structure">
            <!-- Page Content -->
         </div>
      </main>
   <footer/>
</div>

Bármely Odoo XML fájl kódolási specifikációkkal kezdődik. Ezt követően a kódot egy <odoo> tag belsejébe kell írni.

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

Megjegyzés

Using precise template names is important to find information through all modules quickly. Template names should only contain lowercase alphanumerics and underscores.

Mindig adjon hozzá egy üres sort a fájl végéhez. Ezt automatikusan megteheti az IDE konfigurálásával.

XPath

Az XPath (XML Path Language) egy kifejezésnyelv, amely lehetővé teszi az elemek és attribútumok könnyű navigálását egy XML dokumentumban. Az XPath-ot az Odoo sablonok kiterjesztésére használják.

Egy nézet a következő módon van kódolva.

<template id="..." inherit_id="..." name="...">
   <!-- Content -->
</template>

Attribútum	Leírás
azonosító	A módosított nézet azonosítója
örökölt_id	ID of the standard view (using the following pattern: module.template)
név	A módosított nézet ember által olvasható neve

Minden XPath esetében két attribútumot módosít: expression és position.

Example

/website_airproof/views/website_templates.xml

<template id="layout" inherit_id="website.layout" name="Welcome Message">
   <xpath expr="//header" position="before">
      <!-- Content -->
   </xpath>
</template>

Ez az XPath üdvözlő üzenetet ad hozzá közvetlenül az oldal tartalma elé.

Figyelem

Legyen óvatos az alapértelmezett elemek attribútumainak cseréjekor. Mivel a témája kiterjeszti az alapértelmezettet, a változtatásai elsőbbséget élveznek bármely jövőbeli Odoo frissítéssel szemben.

Megjegyzés

• Frissítenie kell a modulját minden alkalommal, amikor új sablont vagy rekordot hoz létre.

• Az öröklődő nézetek XML azonosítói ugyanazt az ID-t kell használják, mint az eredeti rekord. Ez segít az összes öröklés gyors megtalálásában. Mivel a végső XML azonosítók az őket létrehozó modul előtagját kapják, nincs átfedés.

Kifejezések

Az XPath útvonal kifejezéseket használ az XML dokumentumban lévő csomópontok kiválasztására. A kifejezésen belül szelektorokat használnak a megfelelő elem megcélzására. Az alábbiakban a leghasznosabbak vannak felsorolva.

Leszármazott szelektorok	Leírás
/	A gyökércsomópontból választ.
//	Kiválasztja a dokumentumban azokat a csomópontokat az aktuális csomópontból, amelyek megfelelnek a kiválasztásnak, függetlenül attól, hogy hol vannak.

Attribútum szelektorok	Leírás
*	Bármely XML címkét kiválaszt. A * helyettesíthető egy konkrét címkével, ha a kiválasztásnak pontosabbnak kell lennie.
*[@id=”id”]	Egy konkrét azonosítót választ ki.
*[hasclass(„class”)]	Kiválaszt egy adott osztályt.
*[@name=”name”]	Kiválaszt egy adott nevű címkét.
*[@t-call=”t-call”]	Kiválaszt egy adott t-call-t.

Pozíció

A pozíció meghatározza, hogy a kód hol helyezkedik el a sablonban. A lehetséges értékek az alábbiak:

Pozíció	Leírás
csere	A célzott csomópontot az XPath tartalommal helyettesíti.
belül	Az XPath tartalmat a célzott csomóponton belülre helyezi.
előtt	Hozzáadja az XPath tartalmat a célzott csomópont elé.
után	Hozzáadja az XPath tartalmat a célzott csomópont után.
attribútumok	Hozzáadja az XPath tartalmat egy attribútumon belül.

Example

Ez az XPath eltávolítja az első elemet, amely .breadcrumb osztállyal rendelkezik.

<xpath expr="//*[hasclass('breadcrumb')]" position="replace"/>

Ez az XPath egy extra <li> elemet ad hozzá a <ul> elem utolsó gyermekének után.

<xpath expr="//ul" position="inside">
   <li>Last element of the list</li>
</xpath>

Ez az XPath egy <div> elemet ad hozzá a <nav> elé, amely közvetlen gyermeke a <header>-nek.

<xpath expr="//header/nav" position="before">
   <div>Some content before the header</div>
</xpath>

Ez az XPath eltávolítja az x_airproof_header-t a fejléc osztály attribútumából. Ebben az esetben nincs szükség a separator attribútum használatára.

<xpath expr="//header" position="attributes">
   <attribute name="class" remove="x_airproof_header" />
</xpath>

Ez az XPath x_airproof_header-t ad hozzá a fejléc osztály attribútumához. Szükséges továbbá egy separator attribútum meghatározása, hogy szóközt adjon az osztály elé, amelyet hozzáad.

<xpath expr="//header" position="attributes">
   <attribute name="class" add="x_airproof_header" separator=" "/>
</xpath>

This XPath moves the element with .o_footer_scrolltop_wrapper class before the element with the

footer ID attribute.

<xpath expr="//div[@id='footer']" position="before">
   <xpath expr="//div[@id='o_footer_scrolltop_wrapper']" position="move" />
</xpath>

Javaslat

Using move directives inside an other XPath forces you to use only this kind of directives.

Example

Good example:

<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
</xpath>
<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<div><!-- Content --></div>
</xpath>

Bad example:

<xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
<xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
<div><!-- Content --></div>
</xpath>

Lásd még

További információt az XPath-ról ebben a cheat sheet találhat.

QWeb

A QWeb az Odoo által használt elsődleges sablonmotor. Ez egy XML sablonmotor, amelyet főként HTML töredékek és oldalak generálására használnak.

Lásd még

QWeb sablonok dokumentációja.

Custom fields

Depending on your needs, you can create custom fields to save data in the database.

Deklaráció

First, create a record to declare the field. This field has to be linked to an existing model.

/website_airproof/data/fields.xml

<record id="x_post_category" model="ir.model.fields">
   <field name="name">x_post_category</field>
   <field name="field_description">...</field>
   <field name="ttype">html</field>
   <field name="state">manual</field>
   <field name="index">0</field>
   <field name="model_id" ref="website_blog.model_blog_post"/>
</record>

Megjegyzés

Fields creation is also possible (and recommended) through a model using Python.

Back-end

Add the field to the relevant view through an XPath. Therefore, the user can see the field in the interface and fill it afterwards.

/website_airproof/views/backend/website_blog_views.xml

<record id="view_blog_post_form_category" model="ir.ui.view">
   <field name="name">view_blog_post_form_category</field>
   <field name="model">blog.post</field>
   <field name="inherit_id" ref="website_blog.view_blog_post_form"/>
   <field name="arch" type="xml">
      <xpath expr="//field[@name='blog_id']" position="before">
         <field name="x_post_category" string="..." placeholder="..."/>
      </xpath>
   </field>
</record>

Front-end

The field value can be shown somewhere in a page by calling model_name.field_name like this:

/website_airproof/views/website_blog_templates.xml

<h1 t-field="blog_post.x_post_category"/>

Háttér

Meghatározhat egy színt vagy képet a weboldala háttereként.

Színek

/website_airproof/static/src/scss/primary_variables.scss

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-cc1-bg':                     'o-color-5',
         'o-cc5-bg':                     'o-color-1',
      ),
    )
);

Image/pattern

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'body-image': '/website_airproof/static/src/img/background-lines.svg',
      'body-image-type': 'image' or 'pattern'
   )
);

Fejléc

By default, the header contains two distinct templates (desktop and mobile) which display the main navigation, the company’s logo and other optional elements (call-to-action, language selector, etc). Depending on the situation, choose between enabling/disabling existing elements with a standard template or building a brand new custom template.

Standard

The Odoo Website Builder distinguishes between desktop templates and the mobile template in order to facilitate the adaptation of the user experience according to the device.

Desktop template

Engedélyezze az egyik alapértelmezett fejléc sablont.

Fontos

Ne feledje, hogy előfordulhat, hogy először le kell tiltania az aktív fejléc sablont.

Example

/website_aiproof/data/presets.xml

<record id="website.template_header_default" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

Explicitly set the desired template in the primary_variables.scss file.

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);

/website_airproof/data/presets.xml

<record id="website.template_header_contact" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

Mobile template

Each header template comes with the template_header_mobile template ensuring a seamless user experience accross every devices.

Lásd még

Mobile header template on Odoo’s Git repository

Egyedi

Hozza létre saját sablonját, és adja hozzá a listához.

Fontos

Don’t forget that you may need to disable the active header template first before enabling the custom one.

Opció

Használja a következő kódot, hogy hozzáadjon egy opciót az új egyedi fejlécéhez a Weboldal Készítőben.

/website_airproof/views/website_templates.xml

<template id="template_header_opt" inherit_id="website.snippet_options" name="Header Template - Option">
   <xpath expr="//we-select[@data-variable='header-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.header"
         data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

Attribútum	Leírás
data-testreszab-weboldal-nézetek	A sablon, amelyet engedélyezni kell
data-testreszab-weboldal-változó	A változónak adott név
data-kép	A testreszabott sablon miniatűrje, amely a sablonok kiválasztásánál jelenik meg a Weboldal Készítőben

Most már kifejezetten meg kell határoznia, hogy a testreszabott sablont szeretné használni az Odoo SASS változókban.

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'header-template': 'airproof',
   ),
);

Template

/website_airproof/views/website_templates.xml

<template id="header" inherit_id="website.layout" name="Airproof - Header" active="True">
   <xpath expr="//header//nav" position="replace">
      <!-- Static Content -->
      <!-- Components -->
      <!-- Editable areas -->
   </xpath>
</template>

Don’t forget to adapt the template_header_mobile accordingly to keep consistency between desktop and mobile:

website_airproof/views/website_templates.xml

<template id="template_header_mobile" inherit_id="website.template_header_mobile" name="Airproof - Template Header Mobile">
   <!-- Xpaths -->
</template>

Komponensek

A testreszabott fejlécében több al-sablont is meghívhat a t-call direktíva használatával a QWeb-ből:

Logó

<t t-call="website.placeholder_header_brand">
   <t t-set="_link_class" t-valuef="..."/>
</t>

Fontos

Don’t forget to create a record of the website logo logo in the database.

Menü

<t t-foreach="website.menu_id.child_id" t-as="submenu">
   <t t-call="website.submenu">
      <t t-set="item_class" t-valuef="nav-item"/>
      <t t-set="link_class" t-valuef="nav-link"/>
   </t>
</t>

Bejelentkezés

<t t-call="portal.placeholder_user_sign_in">
   <t t-set="_item_class" t-valuef="nav-item"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
</t>

Felhasználói legördülő

<t t-call="portal.user_dropdown">
   <t t-set="_user_name" t-value="true"/>
   <t t-set="_icon" t-value="false"/>
   <t t-set="_avatar" t-value="false"/>
   <t t-set="_item_class" t-valuef="nav-item dropdown"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
   <t t-set="_dropdown_menu_class" t-valuef="..."/>
</t>

Nyelvválasztó

<t t-call="website.placeholder_header_language_selector">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

Cselekvésre ösztönzés

<t t-call="website.placeholder_header_call_to_action">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

Navigációs sáv váltó

<t t-call="website.navbar_toggler">
   <t t-set="_toggler_class" t-valuef="..."/>
</t>

Lásd még

You can add a header overlay to position your header over the content of your page. It has to be done on each page individually.

Lábléc

Alapértelmezés szerint a lábléc egy szakaszt tartalmaz némi statikus tartalommal. Könnyedén hozzáadhat új elemeket, vagy létrehozhatja saját sablonját.

Standard

Engedélyezze az egyik alapértelmezett lábléc sablont. Ne feledje, hogy előfordulhat, hogy először le kell tiltania az aktív lábléc sablont.

Fontos

Don’t forget that you may need to disable the active footer template first.

Example

/website_aiproof/data/presets.xml

<record id="website.footer_custom" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'footer-template': 'Links',
   ),
);

/website_airproof/data/presets.xml

<record id="website.template_footer_links" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

Egyedi

Hozza létre saját sablonját, és adja hozzá a listához. Ne feledje, hogy előfordulhat, hogy először le kell tiltania az aktív lábléc sablont.

Opció

/website_airproof/views/website_templates.xml

<template id="template_footer_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
   <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.footer"
         data-customize-website-variable="'airproof'"
         data-img="/website_airproof/static/src/img/wbuilder/template_footer_opt.svg"/>
   </xpath>
</template>

Deklaráció

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'footer-template': 'airproof',
   ),
);

Template

/website_airproof/views/website_templates.xml

<template id="footer" inherit_id="website.layout" name="Airproof - Footer" active="True">
  <xpath expr="//div[@id='footer']" position="replace">
     <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
        <!-- Content -->
     </div>
  </xpath>
</record>

Szerzői jog

Jelenleg csak egy sablon érhető el a szerzői jog sávhoz.

A tartalom cseréjéhez vagy a szerkezet módosításához hozzáadhatja saját kódját a következő XPath-hoz.

/website_airproof/views/website_templates.xml

<template id="copyright" inherit_id="website.layout">
   <xpath expr="//div[hasclass('o_footer_copyright')]" position="replace">
      <div class="o_footer_copyright" data-name="Copyright">
         <!-- Content -->
      </div>
   </xpath>
</template>

Célterület

Ahelyett, hogy egy oldal teljes elrendezését meghatározná, létrehozhat építőelemeket (snippets), és hagyhatja, hogy a felhasználó válassza ki, hová húzza és ejtse őket, így saját maga hozva létre az oldal elrendezését. Ezt nevezzük moduláris tervezésnek.

Meghatározhat egy üres területet, amelyet a felhasználó snippetekkel tölthet ki.

<div id="oe_structure_layout_01" class="oe_structure"/>

Osztály	Leírás
oe_struktúra	Határozzon meg egy húzással és ejtéssel használható területet a felhasználó számára.
oe_struktúra_solo	Csak egyetlen kódrészlet helyezhető el ezen a területen.
oe_structure_not_nearest	If a building block is dropped outside of a Drop zone having this class, the block will be moved in the nearest Drop Zone.

Egy meglévő elhelyezési zónát is feltölthet a tartalmával.

<template id="oe_structure_layout_01" inherit_id="..." name="...">
   <xpath expr="//*[@id='oe_structure_layout_01']" position="replace">
      <div id="oe_structure_layout_01" class="oe_structure oe_structure_solo">
         <!-- Content -->
      </div>
   </xpath>
</template>

Reszponzív

Odoo in general relies on the Bootstrap framework which eases the responsiveness of your website on

desktop and mobile. On Odoo 16, you can mainly take action on 3 aspects:

1. Automatic computed font sizes depending on the device

2. Column sizes on desktop (the columns are automatically stacked on mobile)

3. Visibility conditions (Show/Hide something on desktop/mobile)

Lásd még

• Bootstrap documentation on display property

Font sizes

In Bootstrap 5, responsive font sizes are enabled by default, allowing text to scale more naturally across device and viewport sizes (relying on the $enable-rfs variable).

Lásd még

• Bootstrap documentation about responsive font sizes

Column sizes

Bootstrap uses a grid made of rows and columns to layout a page. Thanks to this structure, columns can be sized differently on mobile and desktop. In this version, the Website Builder allows to set mobile sizes (col-12 for example) and desktop ones (col-lg-4 for example) but not the medium breakpoints (col-md-4 for example).

Figyelem

The medium sizes can be set but the end-user is not able to edit them within the Website Builder.

Lásd még

• Bootstrap documentation on responsive breakpoints

• Bootstrap documentation about the grid

Visibility conditions

In the Odoo Website Builder, entire sections or specific columns can be hidden on mobile or desktop.

This functionality leverages Bootstrap along with Odoo-specific classes:

• o_snippet_mobile_invisible

• o_snippet_desktop_invisible

Hide a section on desktop:

<section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16 d-lg-none o_snippet_desktop_invisible" data-snippet="s_text_block" name="Text">
    <!-- Content -->
</section>

Hide a column on mobile:

<section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16" data-snippet="s_text_block" name="Text">
   <div class="container s_allow_columns">
      <div class="row">
         <div class="col-12 col-lg-6 d-none d-lg-block o_snippet_mobile_invisible">
            Column 1
         </div>
         <div class="col-12 col-lg-6">
            Column 2
         </div>
      </div>
   </div>
</section>

Osztály	Leírás
o_snippet_mobile_invisible	It tells the Website Builder that the element is hidden and is using visibility conditions option.
o_snippet_desktop_invisible	It tells the Website Builder that the element is hidden on desktop and is using visibility conditions option.
d-none	Hide the element in every situations.
d-lg-block	Show the element from the „large” breakpoint (on desktop).

Fontos

o_snippet_mobile_invisible / o_snippet_desktop_invisible classes have to be specified to keep

the visibility conditions option functional. Even if an element is hidden on desktop, the Website Builder displays a list of these elements allowing the end-user to force show the element and edit it without switching between mobile and desktop mode.