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'
        }
    }
};
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
9
  • 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
    Commented Nov 4, 2018 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Ǝ
    Commented Nov 4, 2018 at 15:48
  • error ReferenceError: L is not defined
    – zekia
    Commented Nov 4, 2018 at 15:49
  • this is the error that makes script not working properly at first place
    – zekia
    Commented Nov 4, 2018 at 15:49
  • L function is defined in file leaflet.js, which is loaded in page, so this error makes no sense
    – zekia
    Commented Nov 4, 2018 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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