Can't add custom script (leaflet) to Contact page

Question 1

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'
 }
 }
};

Question 2

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.

Question 3

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?

Question 4

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 !

Question 5

error ReferenceError: L is not defined

Question 6

this is the error that makes script not working properly at first place

Question 7

L function is defined in file leaflet.js, which is loaded in page, so this error makes no sense

PЯINCƎ ♦ 11.8k3 gold badges27 silver badges85 bronze badges · Accepted Answer · 2018-11-02 14:53:45Z

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?
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 !
this is the error that makes script not working properly at first place
L function is defined in file leaflet.js, which is loaded in page, so this error makes no sense

Stack Exchange Network

Can't add custom script (leaflet) to Contact page

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Can't add custom script (leaflet) to Contact page

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions