查看负责 Odoo12 中的顶部导航栏
View responsible for top navbar in Odoo12
我正在尝试将徽标添加到顶部导航栏,我正在寻找要继承的视图 ID,这将允许我使用 xpath 定位 propper 元素。
我无法找到负责包含两个相邻元素的导航栏布局的视图。
我找到了这样的东西:addons\website\views\website_navbar_templates.xml
。但它没有定义这两个相邻节点(存在于浏览器检查元素工具中):
<ul class="o_menu_apps">
和
<a class="o_menu_brand" role="button">
它们只存在于静态 xml: addons\web\static\src\xml\menu.xml
中。但我不知道我是否可以用我的自定义模块和 xpath 修改这个 xml。
内部:addons\website\views\website_templates.xml
我看到了这段代码:
<template id="layout_logo_show" inherit_id="website.layout" customize_show="True" name="Show Logo">
<xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
<a href="/" class="navbar-brand logo">
<span t-field="res_company.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % res_company.name" t-att-title="res_company.name" />
</a>
</xpath>
</template>
这个标志去哪儿了?我在 Odoo12 中没有看到任何徽标。我觉得没有class叫'navbar-brand'.
我最终用我的自定义模块覆盖了静态 xml 文件,如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-extend="Menu">
<t t-jquery="*" t-operation="replace">
<div style="height:100%; background-color: #4c4c4c;">
<nav class="o_main_navbar">
<ul class="o_menu_apps"/>
<div class="example_div">
<a href="https://google.com/" target="_blank">
<img src="example.png"/>
</a>
</div>
<a class="o_menu_brand" role="button"/>
<ul class="o_menu_sections" role="menu"/>
<ul class="o_menu_systray" role="menu"/>
</nav>
</div>
</t>
</t>
</templates>
我将这个文件放在 static/src/xml
中并在 manifest.py
中调用它
'qweb': [
'static/src/xml/*.xml',
],
这也可以动态完成。在这种情况下,我们将使用 front-end 上的 JavaScript 代码和一个控制器来通知 front-end 如果该公司存在公司徽标,那么我们将使用来自 [=21] 的获取请求=]获取公司标志。
首先我们添加 img 标签以显示来自 XML 的公司徽标。
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-extend="Menu">
<t t-jquery=".o_menu_apps" t-operation="prepend">
<a id="company-logo-link" href="/web">
<img id="company-logo" alt="Logo"/>
</a>
</t>
</t>
</templates>
之后我们添加JavaScript来显示当前用户所在公司的标志。我们从当前用户的会话中获取公司 ID。
odoo.define('web_company_logo.Menu', function (require) {
'use strict';
var session = require('web.session');
var Menu = require('web.Menu');
Menu.include({
/**
* @override
*/
start: function (parent, options) {
this._super.apply(this, arguments);
// current url, <domain_name>:<port_number>
var url = window.location.origin;
// company id from the session
var companyId = session.company_id;
// use ajax to check if the company has a logo.
// if there is no logo, remove the anchor, else
// use the company's logo as the img src
$.ajax({
type: 'GET',
data: {'company_id': companyId},
url: `${url}/check_company_logo`,
success: function (result) {
console.log('Inside the success function');
var result = JSON.parse(result);
if (result.has_logo == true) {
$('#company-logo')[0].src = `${url}/web/image?model=res.company&id=${companyId}&field=logo`;
}
else {
$('#company-logo-link')[0].remove();
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log('Error encountered');
},
});
},
});
});
要使此 JavaScript 代码正常工作,应添加以下控制器以通知 front-end 该公司是否有徽标。
import json
from odoo import http
from odoo.http import request
class WebCompanyLogoController(http.Controller):
@http.route(['/check_company_logo'], type='http',
auth="public", methods=['GET'],
website=True, sitemap=False)
def check_company_logo(self, company_id=0):
"""
Check if company has a logo
:param company_id: ID of the company as an integer
:return: bool
"""
has_logo = bool(request.env['res.company'].browse(int(company_id)).logo)
return json.dumps({
'has_logo': has_logo,
}, ensure_ascii=False)
我正在尝试将徽标添加到顶部导航栏,我正在寻找要继承的视图 ID,这将允许我使用 xpath 定位 propper 元素。
我无法找到负责包含两个相邻元素的导航栏布局的视图。
我找到了这样的东西:addons\website\views\website_navbar_templates.xml
。但它没有定义这两个相邻节点(存在于浏览器检查元素工具中):
<ul class="o_menu_apps">
和
<a class="o_menu_brand" role="button">
它们只存在于静态 xml: addons\web\static\src\xml\menu.xml
中。但我不知道我是否可以用我的自定义模块和 xpath 修改这个 xml。
内部:addons\website\views\website_templates.xml
我看到了这段代码:
<template id="layout_logo_show" inherit_id="website.layout" customize_show="True" name="Show Logo">
<xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
<a href="/" class="navbar-brand logo">
<span t-field="res_company.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % res_company.name" t-att-title="res_company.name" />
</a>
</xpath>
</template>
这个标志去哪儿了?我在 Odoo12 中没有看到任何徽标。我觉得没有class叫'navbar-brand'.
我最终用我的自定义模块覆盖了静态 xml 文件,如下所示:
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-extend="Menu">
<t t-jquery="*" t-operation="replace">
<div style="height:100%; background-color: #4c4c4c;">
<nav class="o_main_navbar">
<ul class="o_menu_apps"/>
<div class="example_div">
<a href="https://google.com/" target="_blank">
<img src="example.png"/>
</a>
</div>
<a class="o_menu_brand" role="button"/>
<ul class="o_menu_sections" role="menu"/>
<ul class="o_menu_systray" role="menu"/>
</nav>
</div>
</t>
</t>
</templates>
我将这个文件放在 static/src/xml
中并在 manifest.py
'qweb': [
'static/src/xml/*.xml',
],
这也可以动态完成。在这种情况下,我们将使用 front-end 上的 JavaScript 代码和一个控制器来通知 front-end 如果该公司存在公司徽标,那么我们将使用来自 [=21] 的获取请求=]获取公司标志。
首先我们添加 img 标签以显示来自 XML 的公司徽标。
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-extend="Menu">
<t t-jquery=".o_menu_apps" t-operation="prepend">
<a id="company-logo-link" href="/web">
<img id="company-logo" alt="Logo"/>
</a>
</t>
</t>
</templates>
之后我们添加JavaScript来显示当前用户所在公司的标志。我们从当前用户的会话中获取公司 ID。
odoo.define('web_company_logo.Menu', function (require) {
'use strict';
var session = require('web.session');
var Menu = require('web.Menu');
Menu.include({
/**
* @override
*/
start: function (parent, options) {
this._super.apply(this, arguments);
// current url, <domain_name>:<port_number>
var url = window.location.origin;
// company id from the session
var companyId = session.company_id;
// use ajax to check if the company has a logo.
// if there is no logo, remove the anchor, else
// use the company's logo as the img src
$.ajax({
type: 'GET',
data: {'company_id': companyId},
url: `${url}/check_company_logo`,
success: function (result) {
console.log('Inside the success function');
var result = JSON.parse(result);
if (result.has_logo == true) {
$('#company-logo')[0].src = `${url}/web/image?model=res.company&id=${companyId}&field=logo`;
}
else {
$('#company-logo-link')[0].remove();
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log('Error encountered');
},
});
},
});
});
要使此 JavaScript 代码正常工作,应添加以下控制器以通知 front-end 该公司是否有徽标。
import json
from odoo import http
from odoo.http import request
class WebCompanyLogoController(http.Controller):
@http.route(['/check_company_logo'], type='http',
auth="public", methods=['GET'],
website=True, sitemap=False)
def check_company_logo(self, company_id=0):
"""
Check if company has a logo
:param company_id: ID of the company as an integer
:return: bool
"""
has_logo = bool(request.env['res.company'].browse(int(company_id)).logo)
return json.dumps({
'has_logo': has_logo,
}, ensure_ascii=False)