From a Web Controller to a Full CMS

Odoo Experience 2018 / Developers

173 views
0 Likes
0 0

Share on Social Networks

Share Link

Use permanent link to share in social media

Share with a friend

Please login to send this presentation by email!

Embed in your website

Select page to start with

9. Website, editor & themes (4)

25. “We want more ...”

19. Snippet options 3

4. Website, editor & themes (1) Make your page “website editable”

12. Snippet (2) Use Case: Plants in Promotion

20. Snippet options (1) The “edition” mode

3. Website, editor & themes 1

10. Development on Website: the Snippet 2

1. From a web controller to a full CMS Martin Geubelle • Developper From Hello World to Hello Wow! EXPERIENCE 2018

27. Thank you. #odooexperience 2018 Any questions? EXPERIENCE 2018

2. Website, editor and themes 1 Development on Website: the Snippet Snippet options 2 3 The complete code: https://github.com/mge-odoo/oxp2018

11. Snippet (1) (or Building Block) ● “A short reusable piece of computer code” [Wikipedia] ● Draggable & droppable ● Template in a qWeb view ● Behaviour in a JavaScript module ● Extension of its parent “the Widget”

8. ● It’s done! ○ Create new pages ○ Install a “ theme_ ” module ○ Have fun while customizing your website ■ https://www.youtube.com/watch?v=351Da7Qx0IQ ○ And much more... Website, editor & themes (4) Make your page “website editable”

26. ● Options can be set anywhere ● Effects API ( w o w !) ● A lot of available snippets (Google Maps, Twitter, etc.) ● An amazing on-the-fly editor ○ HTML ○ CSS ● Your endless imagination We want more

15. Snippet (5) The Snippets behaviour ● Add to snippets registry odoo. define ( 'plant_nursery.snippets.animation' , function ( require ) { var sAnimation = require ( 'website.content.snippets.animation' ); var sPromoPlant = sAnimation.Class. extend ({ ... }); sAnimation.registry.sPromoPlant = PromoPlant; });

5. Website, editor & themes (1) Make your page “website editable” { 'name' : ' Plant Nursery' , 'version' : '1.0' , ... 'depends' : [ 'web' , ... 'website' ], } ● Add website dependency ○ __manifest__.py

6. Website, editor & themes (2) Make your page “website editable” @route ( '/coucou/ ... /plants' ) def plants ( self, ... website =True ): # do stuff return request. render ( "plants" , values) ● Add website dependency ● Modify controller ○ template context values

13. Snippet (3) The Snippets menu < template id = "snippet_promo_plant" inherit_id = "website.snippets" > < xpath expr = "//div[@id='snippet_effect']/div[contains(@class, 'o_panel_body')]" position= "inside" > < t t-snippet = "plant_nursery.s_promo_plants" t-thumbnail = "/plant_nursery/static/ ... ./icon.png"/ > </ xpath > </ template >

22. Snippet options (3) The Snippet editor ● Extend web_editor.snippets.options odoo. define ( 'plant_nursery.snippets.editor , function ( require ) { var sOptions = require ( 'web_editor.snippets.options' ); var PromoPlants = sOptions.Class. extend ({ start : function () { ... }, cleanForSave : function () { ... }, }); });

18. Snippet (8) The Snippets behaviour odoo. define ( 'plant_nursery.snippets.animation' , function ( require ) { var sPromoPlant = sAnimation.Class. extend ({ xmlDependencies: [ '/plant_nursery/static/src/xml/animation.xml' ], start : function () { this . $ ( '.row' ). append (core.qweb. render ( 'plant_nursery.promo_plants' , {plants: result})); }, }); }); ● Add to snippets registry ● Extend website.content.snippets.animation ● Load plants (rpc) ● Render the static content

23. Snippet options (4) The Snippet editor ● Extend web_editor.snippets.options ● limit function to set the data on the $target (the Snippet) odoo. define ( 'plant_nursery.snippets.editor , function ( require ) { var sOptions = require ( 'web_editor.snippets.options' ); var PromoPlants = sOptions.Class. extend ({ // ... limit : function () { this .$target. attr ( 'data-limit' , value); }, }); });

7. Website, editor & themes (3) Make your page “website editable” ● Add website dependency ● Modify controller ● Modify frontend layout ○ call website.layout ○ add oe_structure < template id = "plant" name = "Hello Wow" > < t t-call = "website.layout" > < div class = "oe_structure" id = "oe_structure_plant_nursery_plant_1" / > <!-- previous plants template --> </ t > </ template >

14. Snippet (4) The Snippet template < template id = "promo_plants" name = "Plants in Promotion" > < section class = "s_promo_plants" > < div class = "container" > < div class = "row" /> </ div > </ section > </ template > ● Basic template ○ extended dynamically in JS ○ use a unique class (later called “the selector ”)

17. Snippet (7) The Snippets behaviour odoo. define ( 'plant_nursery.snippets.animation' , function ( require ) { var sPromoPlant = sAnimation.Class. extend ({ willStart : function () { return this . _rpc ({ model: 'plant.plant' , method: 'search_read' , domain: [[ 'promo' , '=' , true ]], fields: [ ... ], }). then ( function (result) { // do stuff with result }); }, }); }); ● Add to snippets registry ● Extend website.content.snippets.animation ● Load plants (rpc)

16. Snippet (6) The Snippets behaviour ● Add to snippets registry ● Extend website.content.snippets.animation ○ selector key (from the template) ○ Widget lifecyle: init , willStart , start, destroy odoo. define ( 'plant_nursery.snippets.animation' , function ( require ) { var sAnimation = require ( 'website.content.snippets.animation' ); var PromoPlants = sAnimation.Class. extend ({ selector: ".s_promo_plants" , init : function () { ... }, willStart : function () { ... }, start : function () { ... }, destroy : function () { ... }, }); });

24. Snippet options (6) The Snippet editor ● Extend web_editor.snippets.options ● limit function to set the data on the $target (the snippet) ● Use limit option in Snippet odoo. define ( 'plant_nursery.snippets.animation' , function ( require ) { var sPromoPlant = sAnimation.Class. extend ({ willStart : function () { return this . _rpc ({ model: 'plant.plant' , method: 'search_read' , domain: [[ 'promo' , '=' , true ]], fields: [ ... ], limit: this .$el. data ( 'limit' ), }). then ( function (result) { // do stuff with result }); }); });

21. Snippet options (2) The option template ● Template in qWeb ○ data-js : snippet name in registry ○ data-selector : same selector as previously < template id = "snippet_promo_plant_options" inherit_id = "website.snippet_options" > < xpath expr = "." position= "inside" > < div data-js = "sPromoPlant" data-selector= ".s_promo_plants" > < div class = "dropdown-submenu" > < a href = "#" >Number of plants</ a > < div class = "dropdown-menu" > < a data-limit = "1" class =" dropdown-item " href = "#" >1</ a > < a data-limit = "2" class =" dropdown-item " href = "#" >2</ a > ... </ div > </ xpath > </ template >

Views

  • 173 Total Views
  • 0 Website Views
  • 173 Embedded Views

Actions

  • 0 Social Shares
  • 0 Likes
  • 0 Dislikes
  • 0 Comments

Share count

  • 0 Facebook
  • 0 Twitter
  • 0 LinkedIn
  • 0 Google+