Czy da się zmienić szablon strony w Odoo?
Odoo to bardzo duży system.
Jedną z jego funkcjonalności jest prowadzenie strony internetowej. Stronę można zbudować w prosty sposób, za pomocą elementów przeciągnij i upuść. To wystarcza dla zbudowania większości stron internetowych - możliwości są naprawdę duże, a cały proces jest banalnie prosty.
Niektóre strony - jak na przykład strony produktu w sklepie internetowym - mają jednak ograniczoną możliwość konfiguracji. Wybieramy jeden z kilku dostępnych szablonów (przy konfiguracji sklepu). To określa, jak umiejscowione będą zdjęcia oraz gdzie będzie opis produktu. Opis możemy tworzyć za pomocą elementów z palety przeciągnij i upuść.
A co zrobić jeśli chcemy zmienić wygląd całej strony? Czy da się to zmienić?
Tak, choć wymaga to trochę więcej pracy, i podstawowej znajomości programowania. Opisany poniżej proces został przeze mnie wykorzystany do zmiany strony produktu. Duże zdjęcie nie pasuje do oferowanych usług. Chciałem by była to mała ikona w jednej linii z tytułem. Oto efekt końcowy:
- Obraz 1. Strona produktu Odoo eCommerce - zmiana wyglądu szablonu.
Szablony Qweb
Aby dokonać tej zmiany, musimy zaktualizować szablon. Szablon ten jest napisany jako widok QWeb - silnika szablonów z którego korzysta Odoo. Szablony są przechowywane w bazie danych, i renderowane w razie potrzeby (wyświetlenie strony). Można je rozpoznać po dyrektywach wyspecyfikowanych jako atrybuty XML, zaczynających się od "t-".
Gdzie szukać szablonów QWeb w Odoo?
Pierwszym zadaniem jest znalezienie odpowiedniego szablonu. Żeby go odszukać musimy włączyć tryb developerski Ustawienia -> Aktywuj Tryb Developerski (na samym dole).
W górnym menu klikamy Techniczne -> Interfejs Użytkownika -> Widoki. Wyświetli nam się lista wszystkich dostępnych widoków. Ten którego szukamy to widok typu QWeb o nazwie Product (klucz - website_sale.product). Przechodzimy do widoku:
Obraz 2. Odoo - widok szablonu QWeb dla Produktu.
Edytowanie szablonów QWeb
To jest szablon zdefiniowany dla naszej strony produktu. Zmiana tego szablonu będzie od razu widoczna na stronie produktu - trzeba być ostrożnym. Jako że zmiany w ten sposób powodowałyby wiele błędów skutkujących niepoprawnym działaniem strony, zmian należy dokonać poprzez rozszerzenie szablonu.
Rozszerzenie szablonu to stworzenie potomnego szablonu, który definiuje zmiany w szablonie nadrzędnym. Nazywa się to widokiem dziedziczonym. Dzięki temu możemy dowolnie manipulować widokiem nadrzędnym. Jest to wytłumaczone w dokumentacji dziedziczenia widoku. Najważniejsze jednak jest to, że nie musimy nadpisywać oryginału.
Dodanie widoku potomnego ma kilka zalet:
- Możemy wyłączyć nasz dodatek w każdej chwili
- W przypadku błędu - widok potomny po prostu nie zostanie zaaplikowany (widok główny będzie działał)
- Mamy większą kontrolę - może istnieć wiele widoków potomnych
- Widok nie zostanie nadpisany w przypadku aktualizacji bazy danych (widok główny może zostać nadpisany)
Widoki dziedziczone w QWeb
Aby zobaczyć widoki potomne strony produktu, na karcie widoku przechodzimy do zakładki "Widoki dziedziczone" (Inherited Views).
Obraz 3. Widok karty widoku QWeb dla produktu z widokami dziedziczącymi.
Na obrazie 3 widać, że rozszerzanie funkcjonalności widoku poprzez moduły potomne jest standardem. Wszystkie widoki potomne widoczne na zrzucie ekranu są dodane przez Odoo w momencie instalacji systemu.
Rozszerzenie widoku głównego
Aby dostosować nasz widok, musimy dodać nowy widok potomny. Robimy to klikając "Dodaj pozycję". Otworzy się okno kreatora:
Obraz 4. Kreator dla widoku dziedziczącego - szablon Qweb Odoo.
Teraz wystarczy nadać łatwą do wyszukania nazwę oraz wypełnić pole "Architektura". W tym polu definiujemy, jakich zmian chcemy dokonać w nadrzędnym Widoku (dokumentacja specyfikacji). W przypadku błędu w nowym szablonie Odoo zwraca informację o błędzie podczas próby zapisu. Wiadomość wskazuje nam, gdzie jest błąd.
W tym artykule przedstawiłem sposób na edycję szablonu. Kod architektury i informacje techniczne przedstawiam i wyjaśniam w poście technicznym dotyczącym dziedziczenia szablonów QWeb (znajdziesz tam cały kod szablonu).