Magento – Magento 2 How to add external Js in a page

consoleerrorjavascriptlayoutmagento2

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

Best Answer

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>

setText is a method for a Core Text block type

You need to put this inside of a core/text block for it to do anything at all:

<block type="core/text" name="mapcontrol.script.block">
            <action method="setText"><text><![CDATA[<script src="//ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>]]></text></action>
</block>

Layout instructions require a layout handle

You need to wrap these in a handle and a block reference where they'll be inserted:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="before_body_end">
            <block type="core/text" name="mapcontrol.script.block">
                <action method="setText"><text><![CDATA[<script src="//ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>]]></text></action>
            </block>
        </reference>
    </default>
</layout>

addJs is a method exclusive to Mage_Page_Block_Html_Head

You can only call it on a block of that type, e.g.:

<block type="page/html_head">
<action method="addJs"><file>mapcontrol/mapcontrol.js</file></action>
</block>

But really this is meant for local files only. This is because it attempts to prepend the type as it's really just a wrapper for addItem, which you then try to call again later.

addJs calls addItem but addJs differs from the skin_js type

They're located in different places on the filesystem.

addJs attempts to include from [document_root]/js/your/file/here.js
addItem with type skin_js attempts to include from [document_root]/skin/frontend/[package]/[theme]/js/your/file/here.js

Conclusion

To wrap up - you've made a few errors here. This should work for you and uses the setText method of a core/text block type:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="before_body_end">
            <block type="core/text" name="mapcontrol.script.block">
                <action method="setText"><text><![CDATA[<script src="//ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>]]></text></action>
            </block>
        </reference>
    </default>
</layout>

Magento2 – How to Add External JS Globally

Place requirejs-config.js in the view/frontend folder of your module. Requirejs-config.js looks like:

 var config = {
map: {
    '*': {
        mycustomjs:           'Vendor_Module/js/mycustomjs',

    }
}};

and now Then in your phtml file

  require(['jquery', 'mycustomjs'], function($,mycustomjs){
      $(function(){
         // Custom code here
    });
 });