Skip to main content
eCommerceMagento

Exclude specific script to Move bottom – Magento Developer’s Solution

By |September 10, 2020No Comments

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.

Get our best content on eCommerce and backend operations to optimize your distribution business for profitability in your inbox one time a week.


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.

Shajitha Banu

Author Shajitha Banu

Shajitha is a Senior Software Engineer at DCKAP and has got 4+ years of experience in Magento. She is interested in solving logical puzzles and Loves to read Thrilling novels. Shajitha also enjoys writing poems in Tamil.

More posts by Shajitha Banu

Discover What You’re Missing

Get the weekly email full of actionable ideas and insights you can use at work and home.