Skip to Content
Odoo Menu
  • Sign in
  • Try it free
  • Apps
    Finance
    • Accounting
    • Invoicing
    • Expenses
    • Spreadsheet (BI)
    • Documents
    • Sign
    Sales
    • CRM
    • Sales
    • POS Shop
    • POS Restaurant
    • Subscriptions
    • Rental
    Websites
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Supply Chain
    • Inventory
    • Manufacturing
    • PLM
    • Purchase
    • Maintenance
    • Quality
    Human Resources
    • Employees
    • Recruitment
    • Time Off
    • Appraisals
    • Referrals
    • Fleet
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Events
    • Marketing Automation
    • Surveys
    Services
    • Project
    • Timesheets
    • Field Service
    • Helpdesk
    • Planning
    • Appointments
    Productivity
    • Discuss
    • Approvals
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Third party apps Odoo Studio Odoo Cloud Platform
  • Industries
    Retail
    • Book Store
    • Clothing Store
    • Furniture Store
    • Grocery Store
    • Hardware Store
    • Toy Store
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Beverage Distributor
    • Hotel
    Real Estate
    • Real Estate Agency
    • Architecture Firm
    • Construction
    • Estate Management
    • Gardening
    • Property Owner Association
    Consulting
    • Accounting Firm
    • Odoo Partner
    • Marketing Agency
    • Law firm
    • Talent Acquisition
    • Audit & Certification
    Manufacturing
    • Textile
    • Metal
    • Furnitures
    • Food
    • Brewery
    • Corporate Gifts
    Health & Fitness
    • Sports Club
    • Eyewear Store
    • Fitness Center
    • Wellness Practitioners
    • Pharmacy
    • Hair Salon
    Trades
    • Handyman
    • IT Hardware & Support
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    Others
    • Nonprofit Organization
    • Environmental Agency
    • Billboard Rental
    • Photography
    • Bike Leasing
    • Software Reseller
    Browse all Industries
  • Community
    Learn
    • Tutorials
    • Documentation
    • Certifications
    • Training
    • Blog
    • Podcast
    Empower Education
    • Education Program
    • Scale Up! Business Game
    • Visit Odoo
    Get the Software
    • Download
    • Compare Editions
    • Releases
    Collaborate
    • Github
    • Forum
    • Events
    • Translations
    • Become a Partner
    • Services for Partners
    • Register your Accounting Firm
    Get Services
    • Find a Partner
    • Find an Accountant
    • Meet an advisor
    • Implementation Services
    • Customer References
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Get a demo
  • Pricing
  • Help

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • CRM
  • e-Commerce
  • Accounting
  • Inventory
  • PoS
  • Project
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
Help

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

Subscribe

Get notified when there's activity on this post

This question has been flagged
16 Replies
41990 Views
Avatar
Tobias Frankl

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"/>

 

0
Avatar
Discard
Luke Branch

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.

Tobias Frankl
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.

Tobias Frankl
Author

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

Luke Branch

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

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.

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

Luke Branch

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

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

Tobias Frankl
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.

Luke Branch

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.

Tobias Frankl
Author

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

Avatar
Juan José Scarafía
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

1
Avatar
Discard
Avatar
Tristan Novak
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>

1
Avatar
Discard
Avatar
Luke Branch
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.

1
Avatar
Discard
Avatar
GPT
Best Answer

Hi!

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

 

0
Avatar
Discard
Avatar
Carlos Almeida
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?

0
Avatar
Discard
Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Sign up
Community
  • Tutorials
  • Documentation
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Translations
Services
  • Odoo.sh Hosting
  • Support
  • Upgrade
  • Custom Developments
  • Education
  • Find an Accountant
  • Find a Partner
  • Become a Partner
About us
  • Our company
  • Brand Assets
  • Contact us
  • Jobs
  • Events
  • Podcast
  • Blog
  • Customers
  • Legal • Privacy
  • Security
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.

Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now