Magento 2: How to include custom js file in phtml file

Question

How to include js file in phtml file.

eg:

if(some text){
 add js file here.....
}

Any idea?

Thanks

Answer 1

The best way to add js in phtml is via requirejs

Theme solution :

Supposing that your js file is: myfile.js

app/design/frontend/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};

app/design/frontend/{Vendor}/{theme}/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert("Yes, got it.");
       }
});

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/{yourfile}.phtml

<?php if(condition here): ?>
    <script>
        require(['jquery', 'myscript'], function($, myscript) {
            myscript();
        });
    </script>
<?php endif;?>

---

Module solution :

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'Vendor_module/js/myfile',
        }
    }
};

app/code/Vendor/Module/view/frontend/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert("Yes, got it.");
       }
});

app/code/Vendor/Module/view/frontend/templates/{yourfile}.phtml

<?php if(condition here): ?>
    <script>
        require(['jquery', 'myscript'], function($, myscript) {
            myscript();
        });
    </script>
<?php endif;?>

Info: don't forget to :

• clean the cache

• clean var/view_preprocessed content

• clean pub/static content

• deploy the static content = php bin/magento setup:static-content:deploy -f

Answer 2

If you need to write the script for a particular page with the condition than write down the script into phtml based on your condition.

Like this way !!!

<?php
if (condition) { ?>
    <script>
    require(['jquery','domReady!'], function ($) {
        //write down the script
    }); 
    </script>
<?php } ?>

Secound Method

<?php if (condition) { ?>
    <script src="<?php echo $block->getViewFileUrl('Magento_Catalog::js/script.js')?>"></script>
<?php } ?>

Answer 3

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Theme/js/customjs" : {
            }
        }
    }
</script>

This is my way to add JS in any .phtml. Add this at the end of phtml to call particular JS.

Answer 4

You'll call js using the below code in .phtml file if your condition is fulfilled.

Add the below code in your .phtml file.

<?php if(condition): ?>
<div id="div-ko-example" data-bind="scope:'div-ko-example'">
     <h2 data-bind="text: message"></h2>
</div>

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
           "components": {
                "div-ko-example": {
                    "component": "Vendor_Modulename/js/ko_template"
                    }
                }
            }
        }
}
</script>
<?php endif; ?>

Also, create js file name with ko_template.js at app/code/Vendor/Modulename/view/frontend/web/js/ko_template.js And write code as per your need. See the below code for your reference.

define(['ko'], function(ko) {
    return function(config) {
        this.message = ko.observable(config.exampleMessage);
    }
});

Please Note: it's not an exact code as per your requirement. I just give you a reference that you'll fulfill your requirement by call js using knockout like above example.

I hope this will help you.