Jak używać XPath i dziedziczenia w Odoo QWeb?

Ten artykuł skupia się na przekazaniu wiedzy technicznej w zakresie dziedziczenia widoków QWeb templates. Jeśli nie wiesz czym są te widoki, gdzie je znaleźć i do czego służą - zapraszam do artykułu poświęconego edytowaniu szablonu strony z wykorzystaniem QWeb.

W tym artykule skupię się na pokazaniu kodu. Kod ten zmienia wygląd strony produktu. Celem było zmniejszenie obrazu i umieszczenie go w jednej linii z tytułem. Sprzedaję usługi a nie produkty. Zdjęcie poglądowe zajmowało zbyt dużo miejsca na ekranie. Oto jak wygląda strona przed i po podłączeniu szablonu rozszerzającego:

Obraz 1. Strona produktu Odoo przed (duże zdjęcie) i po (małe zdjęcie w rzędzie z tytułem) dodaniu szablonu.

Kod szablonu QWeb

Powyższe zmiany wizualne zostały uzyskane poprzez dodanie dwóch widoków dziedziczących. Poniżej znajdziesz kod szablonów.

Widok dziedziczący po website_sale.product

<data inherit_id="website_sale.product" active="True" name="Small image and title in top row" key="product_page_layout_small.x_custom_small_image_title_top">
	<xpath expr="//h1" position="before">
		<div class="row align-items-center mt-3">
		</div>
	</xpath>

	<xpath expr="//div[@id='product_details']/div[1]/div[1]/div[1]" position="inside">
		<xpath expr="//div[@id='product_detail_main']/div[1]" position="move"/>
	</xpath>

	<xpath expr="//div[@id='product_detail_main']/div" position="attributes">
		<attribute name="t-attf-class"/>
	</xpath>

	<xpath expr="//div[@id='product_details']/div[1]/div[1]/div[1]/div[1]" position="attributes">
		<attribute name="t-attf-class">col-lg-1 o_wsale_product_images position-relative</attribute>
	</xpath>

	<xpath expr="//div[@id='product_details']/div[1]/div[1]/div[1]" position="inside">
		<xpath expr="//h1" position="move"/>
	</xpath>

	<xpath expr="//h1" position="replace">
		<div class="col-lg-11">$0</div>
	</xpath>
</data>

Widok dziedziczący po website_sale.shop_product_carousel​:

<data inherit_id="website_sale.shop_product_carousel" active="True" name="Small image title carousel adjustment">
	<xpath expr="//div[@id='o-carousel-product']" position="attributes">
		<attribute name="t-attf-class" remove="mb-3" separator=" "/>
	</xpath>
</data>

Analiza kodu szablonu

Pierwsza linia to definicja danych. Zawiera informacje po jakim widoku dziedziczy nasz widok, oraz kilka innych parametrów. inherit_id​ - id modelu po którym dziedziczy nasz widok. active​ - określa czy widok jest aktywny. Name​ - nazwa modelu.

Linie 2-5

Wyszukuję elementu h1 wyrażeniem xpath​. Ważne: jeśli istniałyby dwa elementy h1​, zwracany jest pierwszy.

Dodaję element <div>​ przed elementem h1​ (position="before"​).

Linie 7-9

Przenoszę (position="move"​) element //div[@id='product_detail_main']/div[1]​ do elementu //div[@id='product_details']/div[1]/div[1]/div[1]  (position="inside"​).

Linie 11-13

Usuwam z elementu //div[@id='product_detail_main']/div​ atrybut t-attf-class​. Ważne: próbowałem tutaj usuwać class​, ale w momencie dziedziczenia szablonu class​ jeszcze nie istnieje. t-attf-​ to dynamiczny atrybut QWeb który jest renderowany przez Odoo. class​ jest tworzona na podstawie tego atrybutu.

Linie 15-17

Nadpisuję atrybuty class​ elementu //div[@id='product_details']/div[1]/div[1]/div[1]/div[1]​ jako col-lg-1 o_wsale_product_images position-relative​.

Linie 19-21

Znów przesuwam element, tym razem h1​.

Linie 23-25

Opakowuję element h1​ w <div class="col-lg-11">$0</div>​. Ważne: używam position="replace"​ , co zastępuje element z xpath​ innym, z node'a wewnętrznego. Symbol $0 w Odoo QWeb reprezentuje oryginalną zawartość elementu, który nadpisujemy.

Snippet 2, Linie 2-4

Usuwam klasę mb-3​ w elemencie //div[@id='o-carousel-product'].

Podsumowanie

Szablony dziedziczone służą do manipulacji strukturą szablonu nadrzędnego. Możemy wykorzystać:

• ​position="inside"​ - do dodania elementu wewnątrz węzła wskazywanego przez wyrażenie xpath
• ​position="after"​ - do dodania elementu za węzłem wskazywanym przez wyrażenie xpath
• ​position="before"​ - do dodania elementu przed węzłem wskazywanym przez wyrażenie xpath
• ​position="replace"​ - do zamiany elementu wskazywanego przez xpath na ten przekazany w specyfikacji (symbol $0 zostanie podmieniony na oryginalną zawartość zastępowanego węzła)
• ​position="attributes"​ - do manipulacji atrybutami (np. dodanie col-lg-6​ do class​)
• ​position="move"​ - przesuwanie całego węzła