0

I have a Magento module that currently provides a custom API route. I am wanting to update it to push some Javascript to the /customer/account page.

I tried following the answer here but this didn't work, my script is not rendered or executed on the customer account page.

My module looks like this:

module directory

My module lives in app/Code/James/AddToCart.

I have a app/code/James/AddToCart/view/frontend/layout/customer_account_index.xml file that looks like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="james_addtocart::postMessage.js"/>
    </head>
</page>

I then have the Javascript file living in app/code/James/AddToCart/view/frontend/web/js/postMessage.js and it looks like this:

console.log('test');
alert('I am working');

The real script I will use is not the above, however it is all just vanilla javascript with no dependencies.

I then ran these commands (not sure if necessary):

php bin/magento maintenance:enable
php bin/magento setup:upgrade
php -d memory_limit=2G bin/magento setup:di:compile
history
php -d memory_limit=8G -d max_execution_time=18000 bin/magento setup:static-content:deploy -f
php bin/magento maintenance:disable
php bin/magento cache:clean
php bin/magento cache:flush
redis-cli -p 6379 flushall

However when I go to the /customer/account page, I do not see my script run at all.

What am I doing wrong?

Update

As per @xanka's comment, I have updated my customer_account_index.xml file to be:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="James_AddToCart::postMessage.js"/>
    </head>
</page>

However this still isn't running the alert nor the console.log statement.

Update 2

I have added the postMessage.js file to app/code/James/AddToCart/view/frontend/web/postMessage.js and then added a new app/code/James/AddToCart/view/frontend/layout/customer_account.xml with the following contents:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <link src="James_AddToCart::postMessage.js"/>
    </head>
</page>

I now have a postMessage.js file in app/code/James/AddToCart/view/frontend/web/postMessage.js and app/code/James/AddToCart/view/frontend/web/js/postMessage.js that looks like this:

require(["jquery"],
    function($){

    console.log('test');
    alert('I am working');

})

When I visit the /customer/account page, I do not see an alert or the console.log statement in my dev tools.

11
  • in your customer_account_index.xml module should is James_AddToCart::postMessage.js.
    – xanka
    Feb 26 '20 at 2:07
  • @xanka I have made this change, but when visiting the /customer/account page I do not get the alert nor the console log in my dev tools. I have updated the customer_account_index.xml with what you say (now included in question). Is there something more I need to do?
    – James
    Feb 26 '20 at 2:51
  • Share you js file path Feb 26 '20 at 4:35
  • please try this way on your customer_account_index.xml <link src="James_AddToCart::js/postMessage.js"/>
    – xanka
    Feb 26 '20 at 4:40
  • @Ranganathan as per my question, the Javascript (relative to the root Magento directory) is app/code/James/AddToCart/view/frontend/web/js/postMessage.js
    – James
    Feb 26 '20 at 5:06
1

add this into your file

app/code/James/AddToCart/view/frontend/layout/customer_account.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="James_AddToCart::postMessage.js"/>
    </head>
</page>

app/code/James/AddToCart/view/frontend/web/js/postMessage.js

require(["jquery"],
    function($){

    console.log('test');
    alert('I am working');

})

run magento command

php  bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:c
4
  • I have made this change, yet it still does not work.
    – James
    Feb 26 '20 at 6:34
  • Please see my updated question with the changes I have made.
    – James
    Feb 26 '20 at 6:39
  • check answer is update
    – Msquare
    Feb 26 '20 at 6:48
  • There was a caching issue, even with the cache:clear command (from opcache - whoops :)!). However, even once resolved, I needed to add the require(['jquery']... part. Thanks!
    – James
    Feb 26 '20 at 9:15
1

You need to create the file with the name customer_account.xml and need to add code like this one.

<?xml version="1.0" encoding="utf-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Customer My Account (All Pages)" design_abstraction="custom">
    <head>
            <link src="James_AddToCart::postMessage.js"/>
    </head>
</page>

Remember your js file is need to put into the following location.

app\code\James\AddToCart\view\frontend\web\postMessage.js

2
  • I have done this, but it still does not work. I have updated the question with what I have done.
    – James
    Feb 26 '20 at 6:34
  • I update, the naswer kindly check ayou have do same things and run all the commands like upgrade and deploy. Feb 26 '20 at 6:43
0

Please use the follow code and try ok. Update file customer_account_index.xml or where you want to load choose that xml file and put script on head ok.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="James_AddToCart::js/postMessage.js" />
    </head>
</page>

and please do cache clear after this. Hope it works!

1
  • @james please check updated answer. Feb 26 '20 at 6:50

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.