2

I need to implement a Few Functions of javascript and a jquery code in to a phtml file in my Custom Theme.
I have read about the different way of implementation but I am not sure which is the best way for my 3 little functions. The chunk of code is using jquery.

Putting the js code directly to the phtml file works but I guess it is not the recommended way. how i can call a one phtml file for whole website jquery and javascript code.

Can anyone guide me? Thanks!

  • have you read the docs? – Philipp Sander Mar 28 at 9:12
  • Yes but I am a bit confused after and I am not sure what is the best way for my example. – Scotti Mar 28 at 9:24
1

First You Need to create a javascript file under this file path locations :-

app/design/frontend/Vendorname/Themename/web/js/All.js

Put your functions or jquery code in this file.

And then Call this js File in your theme like this.

File Path :-

app/design/frontend/Vendorname/ThemenameMagento_Theme/layout/default_head_blocks.xml code of call All.js file

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <script src="js/All.js" />
    </head>
</page>

Or before.body.end

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <script src="js/activeRobotsAll.js" />
        </referenceContainer>
    </body>
</page>

Call phtml file. you need to create a phtml file in this file path location :-

app/design/frontend/Vendorname/Themename/Magento_Theme/templates/test.phtml

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::test.phtml"/>
        </referenceContainer>
    </body>
</page>

test.phtml file

<?php  
        <script type="text/javascript">
           //enter you javascript code,functions here...
        </script>

     ?>

Hope this helpful.

  • Thanks. How would the code look if I want to put the file before.body.ends instead of the head section? – Scotti Mar 28 at 9:23
  • Check my code before.body.end – Magento_Bhurio Mar 28 at 9:33
  • Shouldn't I use the <script type="text/x-magento-init"> in my phtml file? – Scotti Mar 28 at 10:58
  • Yes, you can add javascript code in your phtml file. – Magento_Bhurio Mar 28 at 11:02
  • Can you tell me exactly how to do that in the Magento Way? – Scotti Mar 28 at 11:26

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.