Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

[solved] how to add a Java script in the Website?

By
Tobias Frankl
on 7/23/14, 12:20 AM 9,712 views

How can i Make the Website, of the Website Builder to integrate additional js? For instance: respond.js

With the help of Luke respond.js is now loaded in the website. But all browsertests give negaive results. Seems there is no help to support IE8 with an odoo website.

 

Solved:

Put the required js into addons/web/static/src/js/example.js

Settings->Technical->User Interface->Views->web.assets_common

<?xml version="1.0"?> <t t-name="web.assets_common">

<script type="text/javascript" src="/web/static/src/js/example.js"/>

<script type="text/javascript" src="/web/static/lib/es5-shim/es5-shim.min.js"/>

 

Hi Tobias, I suggest you take a look at the theme structure of github.com/design-themes. theme_clean and theme_zen are currently working in 8.0 RC1 and may give you an idea on how to package a custom theme with additional js, css, xhtml or anything else you require.

Luke Branch
on 7/23/14, 11:40 AM

Hi Luke I inserted the call for the script into layout of the zen theme and copied Respond.js into lib. It was installed without no problem. But I do not find a difference in behavior. How do I find out if the script was loaded? The two answers under your comment didnt work for me. The direct insertion into the website was prevented by the openerp code check before save. Thanks.

Tobias Frankl
on 7/25/14, 4:25 PM

If you want to have a look: http://www.browserstack.com/screenshots/c4fbe2440443155009aeb984e8b9d769b2fe736f I want wo solve IE8 look.

Tobias Frankl
on 7/25/14, 4:28 PM

Hi Tobias, From my understanding you should be able to do the following: 1) copy your js files into: /theme_zen/static/js/ 2) install theme_zen and then go to frontend/Website and click the 'customize' drop down menu at the top left of the admin nav bar and choose change theme. Change theme to one of the Zen Themes. I chose Zen White 3) click the 'customize' drop down menu at the top left of the admin nav bar and click the HTML Editor 4) Choose the Main Layout option from the list of editable pages in the HTML Editor and insert this line in between the

tags as you would in HTML. Please note though that this is strictly XHTML so you must use a self-closed tag. This is what I used: Save and refresh and view source in your browser. You'll see your script has been included into your HTML on all pages. These steps were done on the latest pull of 8.0 (RC1) and worked without issue for me. You can pull in custom css, scripts, and other elements in a similar manner to customise your theme. In regards to respond.js I have never used the script and am unfamiliar with how it is implemented, however if you have implemented it in a HTML-only website you should find that the process is very similar. I'd request that you post back here with what you discover as it sounds like it would be a useful implementation for backwards compatibility for older browsers.
Luke Branch
on 7/25/14, 11:17 PM

I am currently porting a HTML-only theme to Odoo 8.0 that contains respond.js. I'll post back here if I find anything of use in regards to it's implementation.

Luke Branch
on 7/26/14, 12:51 AM

Hi Luke I did your steps 1-4 and it works. The script is in the source code of the page. So the question above is solved. I did not call the script from the html editing, but in Settings->Technical->User Interface->Views->web.assets_common in the db. There are the relevant js listed. Thanks to GPT for the hint in the right direction. But my IE8 problem wasent solved by the insertion of the script, so thats a little bit disappointing for me ;-)

Tobias Frankl
on 7/26/14, 2:27 AM

Hi Tobias, I'm currently working on porting a theme that makes use of respond.js with a bootstrap template. I suspect that the issue has something to do with the HTML comments that are being used are somehow being sanitised by the HTML editor as i'm not able to see them when I view the html source output. Here's a snippet from what I am currently using: I have also read on stackexchange that for IE 8 the respond.js must be stored locally and cannot be served from a CDN or external source. It is likely irrelevant as you are including it locally, however I have mentioned it for the benefit of anyone else reading this thread. I'll be running some tests over the weekend if I have time and will post back here once i've found a solution.

Luke Branch
on 7/26/14, 3:13 AM

Hi Tobias, Can't add code snippets into the comments, i'll create an answer instead so formatting stays intact.

Luke Branch
on 7/26/14, 3:14 AM

Hi Luke Can you please add, where you insert te code snippet you added in your answer? So its easy to copy. Thank You very much for your help.

Tobias Frankl
on 7/27/14, 10:27 AM

Hi Tobias, I've added some basic instructions regarding modifying the theme_clean module here: https://www.odoo.com/forum/help-1/question/new-bootstrap-theme-on-website-builder-58809 I am still working through adding all elements of my custom bootstrap theme (which includes respond.js) and will post an update here once I have run some tests of my own on including respond.js in an Odoo theme.

Luke Branch
on 7/31/14, 3:34 AM

Hi Luke Thanks for coming back here. I saw your other post already. Looking forward to your theme.

Tobias Frankl
on 7/31/14, 3:49 PM
1
Tristan Novak
On 1/4/16, 6:57 PM

I'll add this comment for the people who are using Facebook Pixels, as the solution posted would not work for me using FB pixels.

I think the problem was I needed to call the standard event after the base code. The provided solution puts the base code at the end of the page.

In the html editor for the page you want to add the FB pixel to add the following after the first  "t-name" line:

<t t-set="head">

     <script>JAVASCRIPT CODE/FB PIXEL CODE</script>

</t>

1

Luke Branch

--Luke Branch--
1531
| 6 7 8
Mui Wo, Lantau, Hong Kong
--Luke Branch--

...

Luke Branch
On 7/26/14, 3:16 AM

Hi Tobias,

I'm currently working on porting a theme that makes use of respond.js with a bootstrap template.

I suspect that the issue has something to do with the HTML comments that are being used are somehow being sanitised by the HTML editor as i'm not able to see them when I view the html source output. Here's a snippet from what I am currently using: 

        <!--[if IE]>
            <link rel="stylesheet" href="theme_example/static/css/ie.css">
        <![endif]-->
        <!--[if lte IE 8]>
            <script src="theme_example/static/vendor/respond.js"></script>
        <![endif]-->
                <!--[if lt IE 9]>
                <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                <![endif]-->

I have also read on stackexchange that for IE 8 the respond.js must be stored locally and cannot be served from a CDN or external source. It is likely irrelevant as you are including it locally, however I have mentioned it for the benefit of anyone else reading this thread.

I'll be running some tests over the weekend if I have time and will post back here once i've found a solution.

1
GPT
On 7/23/14, 12:21 PM

Hi!

Settings -> Technical -> User Interface -> Views -> Main Layout (View Type: QWeb)

 

0
Carlos Almeida
On 11/3/15, 2:23 AM

It seems this doesn't work on login form or before login, I even started odoo with --load web,mymodule adding .js in assets and they are not loaded.

How to load .js, in the web/database/manager form?

0
Juan José Scarafía
On 7/23/14, 11:00 AM

Hi,

I think that the only way to integrate javascript its with the HTML Editor, in the top of the page. There you can paste the javascript code using the tags:

<script type="text/javascript">JAVASCRIPT CODE</script>

Regards,

Juan José - Ing ADHOC

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

3 follower(s)

Stats

Asked: 7/23/14, 12:20 AM
Seen: 9712 times
Last updated: 1/4/16, 6:57 PM