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.

Improve this question
11
  • in your customer_account_index.xml module should is James_AddToCart::postMessage.js.
    – xanka
    Feb 26, 2020 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, 2020 at 2:51
  • Share you js file path
    – Ranganathan
    Feb 26, 2020 at 4:35
  • please try this way on your customer_account_index.xml <link src="James_AddToCart::js/postMessage.js"/>
    – xanka
    Feb 26, 2020 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, 2020 at 5:06

3 Answers 3

Reset to default
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
Improve this answer
4
  • I have made this change, yet it still does not work.
    – James
    Feb 26, 2020 at 6:34
  • Please see my updated question with the changes I have made.
    – James
    Feb 26, 2020 at 6:39
  • check answer is update
    – Msquare
    Feb 26, 2020 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, 2020 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

Improve this answer
2
  • I have done this, but it still does not work. I have updated the question with what I have done.
    – James
    Feb 26, 2020 at 6:34
  • I update, the naswer kindly check ayou have do same things and run all the commands like upgrade and deploy.
    – Dhiren Vasoya
    Feb 26, 2020 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!

Improve this answer
1
  • @james please check updated answer.
    – Sarvesh Patel
    Feb 26, 2020 at 6:50

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.