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.
Issue:
In Magento version 2.3.0 and later, they provided an admin configuration, which helps to improve the site performance.
Admin -> Store -> Configuration -> Advanced -> Developer (Enabled only on Developer mode). JavaScript settings -> Move JS code to the bottom of the page
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.
Solution:
We created a separate module for this, called DCKAP_Core
Step 1:
Create di.xml in the below mentioned path and paste the below content.
Path: DCKAP/Core/etc/frontend
Code:
<?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>
Step 2:
Create Controller file named JsFooterPlugin.php in the below path.
Path: DCKAP/Core/Controller/Result
Content:
<?php
namespace DCKAPCoreControllerResult;
use MagentoFrameworkAppConfigScopeConfigInterface;
use MagentoStoreModelScopeInterface;
use MagentoFrameworkAppResponseHttp;
/**
* Plugin for putting all js to footer.
*/
class JsFooterPlugin extends MagentoThemeControllerResultJsFooterPlugin
{
private const XML_PATH_DEV_MOVE_JS_TO_BOTTOM = 'dev/js/move_script_to_bottom';
/**
* @var ScopeConfigInterface
*/
private $scopeConfig;
/**
* @param ScopeConfigInterface $scopeConfig
*/
public function __construct(ScopeConfigInterface $scopeConfig)
{
$this->scopeConfig = $scopeConfig;
parent::__construct($scopeConfig);
}
/**
* Put all javascript to footer before sending the response.
*
* @param Http $subject
* @return void
*/
public function beforeSendResponse(Http $subject)
{
$content = $subject->getContent();
$script = [];
if (strpos($content, '</body') !== false) {
if ($this->scopeConfig->isSetFlag(
self::XML_PATH_DEV_MOVE_JS_TO_BOTTOM,
ScopeInterface::SCOPE_STORE
)
) {
$pattern = '#<script[^>]*+(?<!text/x-magento-template.)>.*?</script>#is';
$content = preg_replace_callback(
$pattern,
function ($matchPart) use (&$script) {
if (strpos($matchPart[0], 'excluded') !== false) {
return $matchPart[0];
} else {
$script[] = $matchPart[0];
return '';
}
},
$content
);
$subject->setContent(
str_replace('</body', implode("n", $script) . "n</body", $content)
);
}
}
}
}
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.
Example:
<script src='https://www.dckap.com/js-file.js’ type='text/javascript' excluded ></script> <script src='https://www.dckap.com/js-file-2.js' type='text/javascript'></script>
In the above example, js-file-2.js will move to bottom of the page, whereus js-file.js will remain the same.
