Magento 2 - Add external scripts from CDN

magento.stackexchange https://magento.stackexchange.com/questions/297064

  •  21-03-2021
  •  | 
  •  

Question

I try to load all required scripts for bootstrap 4 like seen on w3schools.com

app\design\frontend\company\base\Magento_Theme\layout\default.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <referenceBlock name="footer_links" remove="true"/>
        <referenceContainer name="footer">
            <block class="Magento\Cms\Block\Block" name="footer_menu">
                <arguments>
                    <argument name="block_id" xsi:type="string">footer_menu</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

But if I inspect the source code of my site, then I see this:

<script  type="text/javascript"  src="http://example.com/pub/static/version1573136151/frontend/hausfux/base/de_DE/https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script  type="text/javascript"  src="http://example.com/pub/static/version1573136151/frontend/hausfux/base/de_DE/https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script  type="text/javascript"  src="http://example.com/pub/static/version1573136151/frontend/hausfux/base/de_DE/https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Was it helpful?

Solution

You have to add src_type="url" to each link element in your head

Check it out in the devdocs

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top