Skip to content

Commit 29fccd8

Browse files
magefanmagefan
authored
Merge pull request #27 from magefan/6870-noscript-tag
Add noscript tag option
2 parents 24b1255 + b7e3bf0 commit 29fccd8

File tree

10 files changed

+121
-12
lines changed

10 files changed

+121
-12
lines changed

‎Block/Lazy.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,17 @@ protected function _toHtml()
3232
return '';
3333
}
3434

35+
/**
36+
* @return bool
37+
*/
38+
public function isNoScriptEnabled()
39+
{
40+
return (bool)$this->_scopeConfig->getValue(
41+
\Magefan\LazyLoad\Model\Config::XML_PATH_LAZY_NOSCRIPT,
42+
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
43+
);
44+
}
45+
3546
/**
3647
* Retrieve lazy load config json string
3748
*

‎Model/Config.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ class Config extends \Magento\Framework\App\Helper\AbstractHelper
1818
const XML_PATH_ENABLED = 'mflazyzoad/general/enabled';
1919
const XML_PATH_AMP_ENABLED = 'pramp/general/enabled';
2020
const XML_PATH_LAZY_BLOCKS = 'mflazyzoad/general/lazy_blocks';
21+
const XML_PATH_LAZY_NOSCRIPT = 'mflazyzoad/general/noscript';
2122

2223
/**
2324
* @var array
@@ -42,6 +43,14 @@ public function getConfig($path)
4243
);
4344
}
4445

46+
/**
47+
* @return bool
48+
*/
49+
public function isNoScriptEnabled()
50+
{
51+
return (bool)$this->getConfig(self::XML_PATH_LAZY_NOSCRIPT);
52+
}
53+
4554
/**
4655
* Retrieve alloved blocks info
4756
* @return array

‎Observer/LayoutLoadBeforeObserver.php‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
/**
3+
* Copyright © Magefan ([email protected]). All rights reserved.
4+
* Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
5+
*
6+
* Glory to Ukraine! Glory to the heroes!
7+
*/
8+
9+
declare(strict_types = 1);
10+
11+
namespace Magefan\LazyLoad\Observer;
12+
13+
use Magefan\LazyLoad\Model\Config;
14+
use Magento\Framework\Event\ObserverInterface;
15+
16+
/**
17+
* Class LayoutLoadBeforeObserver used to add attribute to layout
18+
*/
19+
class LayoutLoadBeforeObserver implements ObserverInterface
20+
{
21+
/**
22+
* @var Config
23+
*/
24+
protected $config;
25+
26+
/**
27+
* LayoutLoadBeforeObserver constructor.
28+
* @param Config $config
29+
*/
30+
public function __construct(
31+
Config $config
32+
) {
33+
$this->config = $config;
34+
}
35+
36+
/**
37+
* @param \Magento\Framework\Event\Observer $observer
38+
* @return void
39+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
40+
*/
41+
public function execute(\Magento\Framework\Event\Observer $observer)
42+
{
43+
if ($this->config->getEnabled() && $this->config->isNoScriptEnabled()) {
44+
$layout = $observer->getLayout();
45+
$layout->getUpdate()->addHandle('mflazyzoad_no_js');
46+
}
47+
}
48+
}

‎Plugin/BlockPlugin.php‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,16 @@ public function afterToHtml(\Magento\Framework\View\Element\AbstractBlock $block
7979

8080
$html = str_replace($pixelSrc, $tmpSrc, $html);
8181

82+
$noscript = '';
83+
if ($this->config->isNoScriptEnabled()) {
84+
$noscript = '<noscript>
85+
<img src="$2" $1 $3 />
86+
</noscript>';
87+
}
88+
8289
$html = preg_replace('#<img(?!\s+mfdislazy)([^>]*)(?:\ssrc="([^"]*)")([^>]*)\/?>#isU', '<img ' .
8390
' data-original="$2" $1 $3/>
84-
<noscript>
85-
<img src="$2" $1 $3 />
86-
</noscript>
87-
', $html);
91+
' . $noscript, $html);
8892

8993
$html = str_replace(' data-original=', $pixelSrc . ' data-original=', $html);
9094

‎etc/adminhtml/system.xml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@
3838
folder/sometemplate.phtml
3939
]]></comment>
4040
</field>
41+
<field id="noscript" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="40" translate="label comment" type="select">
42+
<label>Include Noscript HTML Tag</label>
43+
<comment>The noscript HTML element defines a section of HTML that is inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. This option enables the display of images even when JavaScript is disabled in the browser and lazy load js script cannot be loaded. Note that when enabled it adds extra HTML tags to the page.</comment>
44+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
45+
</field>
4146
</group>
4247
</section>
4348
</system>

‎etc/config.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ blog.post.relatedproducts
2525
product.info.description</lazy_blocks>
2626
<mfmodule>LazyLoad</mfmodule>
2727
<mftype>1</mftype>
28+
<noscript>1</noscript>
2829
</general>
2930
</mflazyzoad>
3031
</default>

‎etc/frontend/events.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magefan ([email protected]). All rights reserved.
5+
* Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
6+
*
7+
* Glory to Ukraine! Glory to the heroes!
8+
*/
9+
-->
10+
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
11+
<event name="layout_load_before">
12+
<observer name="magefan_lazyload_layout_load_before" instance="Magefan\LazyLoad\Observer\LayoutLoadBeforeObserver" />
13+
</event>
14+
</config>

‎view/frontend/layout/default.xml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
-->
1010
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
1111
<body>
12-
<attribute name="class" value="mflazyzoad-no-js" />
1312
<referenceBlock name="after.body.start">
1413
<block class="Magefan\LazyLoad\Block\Lazy" name="magefan.lazyload" template="Magefan_LazyLoad::lazy.phtml" >
1514
<arguments>

‎view/frontend/layout/mflazyzoad_no_js.xml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magefan ([email protected]). All rights reserved.
5+
* Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
6+
*
7+
* Glory to Ukraine! Glory to the heroes!
8+
*/
9+
-->
10+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
11+
<body>
12+
<attribute name="class" value="mflazyzoad-no-js" />
13+
</body>
14+
</page>

‎view/frontend/templates/lazy.phtml‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,19 @@
66
* Glory to Ukraine! Glory to the heroes!
77
*/
88
?>
9-
<style>
10-
.mflazyzoad-no-js [data-original],
11-
.mflazyzoad-no-js [data-originalset] {
12-
display: none!important;
13-
}
14-
</style>
9+
<?php if ($block->isNoScriptEnabled()) { ?>
10+
<style>
11+
.mflazyzoad-no-js [data-original],
12+
.mflazyzoad-no-js [data-originalset] {
13+
display: none!important;
14+
}
15+
</style>
16+
<?php } ?>
1517
<script data-rocketjavascript="false">
1618
(function(){
17-
document.body.className = document.body.className.replace('mflazyzoad-no-js', '');
19+
<?php if ($block->isNoScriptEnabled()) { ?>
20+
document.body.className = document.body.className.replace('mflazyzoad-no-js', '');
21+
<?php } ?>
1822
var jsSrc = '<?php echo $this->getViewFileUrl('Magefan_LazyLoad::js/lazyload.min.js'); ?>';
1923
function loadScript(e,t){var a,n,r;n=!1,(a=document.createElement("script")).type="text/javascript",a.src=e,a.onload=a.onreadystatechange=function(){n||this.readyState&&"complete"!=this.readyState||(n=!0,t())},(r=document.getElementsByTagName("script")[0]).parentNode.insertBefore(a,r)}
2024
loadScript(jsSrc, function(){

0 commit comments

Comments
 (0)