Magento provides lots of updates on each version, to improve their previous version and functionalities. Each feature had some exclusive issue, which needed to be fixed.
As like any other features, we had some exclusive situations. Thus we as a developer need to provide a solution for that. I would like to share one of my precious issue and solution, which I failed to find a solution on Google. Hence fixed on my own. I would be glad if this helps you.
In Magento version 2.3.0 and later, they provided an admin configuration, which helps to improve the site performance.
If the above setting is enabled, then all the scripts will move to the bottom of the page which loads. This seriously, helps a lot to on page speed.
Unfortunately, we had a situation in which we need to load a script tag on our Order Success Page, next to the “Continue Shopping” button. That script is supposed to load the Survey form.
But the client enabled the above mentioned features, hence whenever we load the page, it goes to the bottom of the page. Which means, after footer the script loaded. Because of that the Survey form loaded after Footer.
This is really meaningless, hence our client requested us to fix this, without affecting Magento’s default feature and page speed.
Hence we were supposed to analyse the feature and started to build an customization for it.
Here is the solution we drive for this case.
We created a separate module for this, called DCKAP_Core
Create di.xml in the below mentioned path and paste the below content.
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="MagentoThemeControllerResultJsFooterPlugin" type="DCKAPCoreControllerResultJsFooterPlugin" /> </config>
Create Controller file named JsFooterPlugin.php in the below path.
And run the deploy comments like
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy
Now your customization is over. In our above customization, we will check whether a particular tag has a key word called “excluded”.
If the script tag which is mentioned with “excluded”, then that particular script won’t move to the bottom of the page.
In the above example, js-file-2.js will move to bottom of the page, whereus js-file.js will remain the same.