Embed Size (px)
Citation preview
CMS Dynamic WidgetsThibault Delavallée, R&D Engineer
Dynamic widgets
Widgets, Snippets -> CMS building blocks
Dynamic widgets: Discussion Groups, Mailing Lists
Thibault Delavallée ([email protected])
Dynamic widgets
Efficient and simple way to customize your website
Integrates with Odoo apps: subscribe to a discussiongroup, create leads, fill issues, ...
Use the full power of odoo
·
·
·
Thibault Delavallée ([email protected])
Show me the stuff !
Running example: Contact WidgetContact Widget
small contact form
create leads from questions
drag 'n drop it anywhere usefull
·
·
·
Thibault Delavallée ([email protected])
Demo
Talk structure
Running example: Contact Widget
body, content
addition in CMS editor
dynamic configuration: choosingthe sales team
link with backend: linking thebutton to the lead creation
·
·
·
·
Thibault Delavallée ([email protected])
Body: widget content
Body = HTMLHTML + CSSCSS (bootstrap)
a (hidden) sales team
a question
an email
a submit button
<input<input type="hidden" name="section_id" value="0"/>/><textarea<textarea name="description"></textarea>></textarea><div<div class="input-group">> <input<input type="email" name="email_from"/>/> <button<button type="submit">>Contact Us</button></button></div></div>
·
·
·
·
Thibault Delavallée ([email protected])
Addition in Editor
Snippets ? QWeb template !
<?xml version="1.0" encoding="utf-8"?><openerp><openerp><data><data> <template<template id="snippets">> <!-- here be snippets by categories --> ... </template></template></data></data></openerp></openerp>
Thibault Delavallée ([email protected])
Addition in Editor
Snippet addition: extend the editor QWeb template
<template<template id="contact_snippet" name="Contact Snippet" inherit_id="website.snippets">> <xpath<xpath expr="//div[@id='snippet_feature']" position="inside">> <!-- begin snippet declaration --> <div><div> ... </div></div> <!-- end of snippet declaration --> </xpath></xpath></template></template>
Thibault Delavallée ([email protected])
Addition in Editor
thumbnail: icon in editor
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">> ... <div<div class="oe_snippet_thumbnail">> <img<img class="oe_snippet_thumbnail_img" src="/images/icon.png"/>/> <span<span class="oe_snippet_thumbnail_title">>Contact Snippet</span></span> </div></div></xpath></xpath>
body of the snippet
<xpath<xpath expr="//div[@id='snippet_feature']" position="inside">> ... <section<section class="oe_snippet_body js_contact">> <!-- snippet HTML content --> </section></section></xpath></xpath>
·
·
Thibault Delavallée ([email protected])
Snippet options
placement: data-selector-...
menu option: li, option menu entry
<div<div data-snippet-option-id='contact_snippet' data-selector=".js_contact" data-selector-siblings="p, h1, h2, h3, blockquote, div, .well, .panel">> <li><li> <a<a href="#" class="button js_contact_sales_team">> Change Sales Team </a></a> </li></li></div></div>
·
·
Thibault Delavallée ([email protected])
Widget -> Dynamic Widget
Dynamic customize
Add a snippet.Option to add dynamic configuration
Example: Discussion Group choice, Sales Team choice, ...
snippet..options..contact_snippet == snippet..Option..extend({({
on_prompt:: functionfunction ()() {{ returnreturn website..prompt({({ window_title:: _t(("Add a Contact Snippet"),), init:: functionfunction ((field)) {{ returnreturn website..session..model(('crm.case.section')) ..call(('name_search',, [['',, []])},[]])}, }).}).then((functionfunction ((sales_team_id)) {{ self..$(('.js_section_id').).attr(("value",, sales_team_id);); });}); }}});});
Thibault Delavallée ([email protected])
Link with back-end
To contact the back-end: define a new routeroute
Route: URL -> action performed by server
Defined in Python, in a controller
classclass ContactUsShort((http..Controller):): # define my custom controller @[email protected](('/my/route',, ......)) defdef my_route((......):):
{http://myodoo.com/}crm/contact_short will be a routecreating a lead from data coming from the form
·
·
Thibault Delavallée ([email protected])
Link with back-end
crm/contact_short definition
@[email protected]([(['/crm/contact_short'],], type=='json'))defdef contactus((self,, question==None,, email==None,, section_id==None,, ****kwargs):): lead_values == {{ 'name':: 'Lead from %s (Contact Snippet)' %% email,, 'description':: question,, 'email_from':: email,, 'section_id':: section_id,, 'user_id':: False,, }} returnreturn request..registry[['crm.lead']]..create((cr,, uid,, lead_values,, context))
Thibault Delavallée ([email protected])
Dynamic behavior
Bind Contact Us to the back-end
snippet..animationRegistry..contact == snippet..Animation..extend({({ start:: functionfunction ((editable_mode)) {{ thisthis..$(('.js_contact_btn').).on(('click',, functionfunction ((event)) {{ // perform verification ...... // json call to a route returnreturn openerp..jsonRpc(('/crm/contact_short',, 'call',, {{ 'section_id':: ++section_id,, 'email':: email,, 'question':: question,, }).}).then((functionfunction ((result)) {{ ...... });}); });}); },},});});
Thibault Delavallée ([email protected])
And we are done !
Definition: an HTML body ina template
Placement: XML declaration
Configuration: JS Option
Behavior: JS Animation
Link: Python controller and routes
·
·
·
·
·
Thibault Delavallée ([email protected])
Thanks for your attentionAny questions ? [email protected] / [email protected]
