Magento 2 How to add external Js in a page

Question

I want to add an external js in my home page. The external js loads a popup form in my home page. I have tried the code in phtml file and also in xml file. In both case the form will appear. But some js errors in the console

https://prnt.sc/mo0mnj

Uncaught TypeError: Cannot read property 'version' of undefined

Uncaught TypeError: owl.owlCarousel is not a function

Here is my code

cms_index_index.xml

<body>       
   <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template" name="constant_contact" template="Magento_Theme::constantcontact.phtml"/>
   </referenceContainer>
</body>

constantcontact.phtml

<script> var _ctct_m = "5454agf54b30f4dfb97a"; </script>
<script id="signupScript" src="//static.test.com/js/new-form-widget/current/test-form-widget.min.js" async defer></script>

Please help me

Follow this https://magento.stackexchange.com/questions/262766/magento-2-add-custom-js-in-admin-product-edit?answertab=active#tab-top — Prathap Gunasekaran, Feb 21 '19 at 09:20
My js is an external js file. Can't place it into our magento folder — Jancy Abraham, Feb 21 '19 at 09:23
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css check from here — fmsthird, Feb 21 '19 at 09:28
You can add the custom javascript file in the head block of the layout xml file — Amit Naraniwal, Feb 21 '19 at 09:30
@JancyAbraham, have checked my answer below? and what error you getting. — Amit Naraniwal, Feb 21 '19 at 09:39
@AmitNaraniwal Yes,I have. It returns these errors prnt.sc/mo0mnj — Jancy Abraham, Feb 21 '19 at 09:40
Yes. I have specified. Js is loading but some other functionalities are not working — Jancy Abraham, Feb 21 '19 at 09:45
https://magento.stackexchange.com/questions/80594/how-to-add-external-js-to-cms-page — Himanshu, Feb 21 '19 at 10:58

score 0 · Answer 1 · answered Aug 18 '21 at 20:53

0

I was having a similar problem and this worked for me:

<page>
<head>
<link src="//static.test.com/js/new-form-widget/current/test-form-widget.min.js" src_type="url" />
</head>
</page>

answered Aug 18 '21 at 20:53

soniclouds

11
3

score -1 · Answer 2 · answered Feb 21 '19 at 09:33

JavaScript, CSS, and other static assets are added in the section of a page configuration file. The default look of a Magento store page is defined by app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml.

The recommended way to add CSS and JavaScript is to extend this file in your custom theme, and add the assets there. The following file is a sample of a file you must add:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
    <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
    </head>
</page>

Reference : https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css

It returns these errors https://prnt.sc/mo0mnj – Jancy Abraham Feb 21 '19 at 09:39 — Jancy Abraham, Feb 21 '19 at 09:39

Magento 2 How to add external Js in a page

2 Answers2