jQuery in phtml Magento 2

Find out how to consist of jQuery in phtml Magento 2. Our Magento Assistance group is here to assist you with your concerns and issues.

How to consist of jQuery in phtml Magento 2

Magento 2 is an e-commerce platform. It provides various functions to tailor and boost our online shop. Among the secret tools it utilizes to enhance site efficiency and handle JavaScript dependences is RequireJS.

Today, we are going to have a look at how to consist of custom-made jQuery plugins with RequireJS in our Magento 2 task.

How to Develop the Module

1. Initially, let’s presume our module’s name is “Bobcares_CustomJquery.”.
2. Then, we need to develop a requirejs-config. js file. This includes going to our Magento root directory site and heading to app/code/Bobcares/ CustomJquery/view/frontend.
3. After that, we need to develop a file called requirejs-config. js. This file is important for setting up RequireJS in our module.

   

   Here, we map the name “mycomponent” to the JavaScript file which contains our custom-made jQuery plugin.

Develop the custom-made jQuery plugin file

1. Initially, we need to develop a file called jqplugin.js inside the app/code/Bobcares/ CustomJquery/view/frontend/ web/js directory site.

   

   Here, we specify a jQuery plugin called “mycomponent,” which will be utilized later on.

How to develop a test.phtml file

1. Now, head to the app/code/Bobcares/ CustomJquery/view/frontend/ design templates directory site.
2. Then, develop a file called test.phtml. This file will include the HTML code where we’ll initialize our custom-made jQuery plugin.

   

   Here, we encode some information as JSON and after that utilize the text/x-magento-init script tag to initialize our custom-made jQuery plugin. The “wkdata” quality includes the information that will be utilized by the plugin.

How to Consist of the test.phtml file on our page

In order to make the plugin deal with a particular page, we need to consist of the test.phtml file in our task. In addition, we need to make certain we run these commands in the terminal after including the above code:

php bin/magento cache: flush
php bin/magento setup: static-content: release

After the above actions, we have actually effectively included a custom-made jQuery plugin to our Magento 2 site utilizing RequireJS. This permits us to enhance our site’s efficiency by packing JavaScript dependences just when required.

If you come across any problems or have more concerns, please do not hesitate to comment listed below. We’ll continue to check out innovative subjects connected to Magento 2 in future short articles.

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

In quick, our Assistance Techs showed how to consist of jQuery in phtml Magento 2.