0

I'm trying to add a map in Contact page. In order to do that,I did the following:

In file: app/design/frontend/MyCompany/MyTheme/Magento_Contact/layout/contact_index_index.xml I added:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="cms_page_layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Contact</title>
        <css src="css/leaflet.css" />
        <script src="js/leaflet.js" />
    </head>
</page>

Files are indeed added in page's <head>.

Then in: app/design/frontend/MyCompany/MyTheme/Magento_Contact/templates/map.phtml I added:

<script type="text/javascript">
require(['jquery'], function($){
    jQuery(document).ready(function(){
         var map = L.map('mapid').setView([40.591110, 23.037170], 15);
    });
})
</script>

The last thing I tried was to wrap the code between require(['jquery'], function($){ ...... }) in leaflet.js file.

Based on similar issues, this should be enough to have the script working. But instead of that I'm getting javascript error in page:

ReferenceError: L is not defined

Please let me know if anyone.



-----SOLUTION BASED ON @PRINCE ANSWER----

app/design/frontend/MyCompany/MyTheme/Magento_Contact/layout/contact_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="cms_page_layout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Contact</title>
        <css src="css/leaflet.css" />
        <script src="js/leaflet.js" />
    </head>
</page>

app/design/frontend/MyCompany/MyTheme/Magento_Contact/templates/map.phtml

<script type="text/javascript">
    require(['jquery', 'leaflet', 'my-custom-contact-js'], function($, L, scriptContact) {
        scriptContact();
    });
</script>

app/design/frontend/MyCompany/MyTheme/Magento_Contact/web/js/custom-js-contact.js

define(['jquery','leaflet'], function($,L) {
    return function scriptContact() {
        Your js content goes here.
    }
});

app/design/frontend/MyCompany/MyTheme/requirejs-config.js

var config = {
    map: {
        '*': {
            'my-custom-contact-js' : 'Magento_Contact/js/custom-js-contact'
        }
    },
    paths: {
        'leaflet': 'js/leaflet',
    },
    shim: {
        leaflet: {
            exports: 'L'
        }
    }
};
1

No, Don't add js like this, in Magento 2 the recommended way is to use requirejs.

So to do it via Requirejs :

app/design/frontend/MyCompany/MyTheme/requirejs-config.js

var config = {
    map: {
        '*': {
            'my-custom-contact-js' : 'Magento_Contact/js/custom-js-contact' //without the extension .js
        }
    }
};

app/design/frontend/MyCompany/MyTheme/Magento_Contact/web/js/custom-js-contact.js

define(['jquery'], function($) {
    "use strict";
    return function scriptContact() {
        Your js content goes here.
    }
});

app/design/frontend/MyCompany/MyTheme/Magento_Contact/templates/map.phtml

<script type="text/javascript">
    require(['jquery', 'my-custom-contact-js'], function($, scriptContact) {
        scriptContact();
    });
</script>

Remove the content of : var/view_preprocessed.

Run : php bin/magento cache:clean, php bin/magento setup:static-content:deploy -f

And congratulation, your script is loaded successfully.

  • Your code and my code too. work ok the first time page is loaded.The error is occuring after refreshing page. If I delete magento cache, script works ok only the first time page is loaded. Any ideas about that? – zekia Nov 4 '18 at 15:40
  • Which error ? Can you share it ?, you told that your code works too. It's not the good way. And i think this error occure because you have added before some js like your exemple ! – PЯINCƏ Nov 4 '18 at 15:48
  • error ReferenceError: L is not defined – zekia Nov 4 '18 at 15:49
  • this is the error that makes script not working properly at first place – zekia Nov 4 '18 at 15:49
  • L function is defined in file leaflet.js, which is loaded in page, so this error makes no sense – zekia Nov 4 '18 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.