This question has been flagged
16 Replies
36069 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"/>

 

Avatar
Discard

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.

Author

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.

Author

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

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.

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.

Author

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 ;-)

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.

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

Author

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.

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.

Author

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

Best Answer

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

Avatar
Discard
Best Answer

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>

Avatar
Discard
Best Answer

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.

Avatar
Discard
Best Answer

Hi!

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

 

Avatar
Discard
Best Answer

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?

Avatar
Discard