Basic (Legacy) support for Hyva themes, rely on browser level lazyloa…

…ding where possible (#14)

Co-authored-by: Cautious Couscous <[email protected]>

README.md

@@ -27,7 +27,7 @@ A Magento 2 module that adds support for lazy loading of images.
 
 ## Compatibility
 
-* Magento Community Edition / Enterprise Edition 2.2.x, 2.3.x, 2.4.x (see older releases for 2.0 / 2.1 support)
+* Magento Community Edition / Enterprise Edition 2.4.x (see older releases for 2.0 - 2.3 support)
 * Supports Magento 2 Full Page Cache (including Varnish)
 
 ## Installation

Scope/Config.php

@@ -11,7 +11,6 @@
 class Config
 {
     /** Stores configuration paths */
-    const XML_PATH_CATALOG_PRODUCT_IMAGE_LAZYLOAD_ENABLED = 'catalog/product_image_lazyload/enabled';
     const XML_PATH_CATALOG_IMAGE_PRELOAD_ENABLED = 'catalog/product_image_lazyload/preload';
 
     /**
@@ -24,18 +23,10 @@ public function __construct(ScopeConfigInterface $scopeConfig)
         $this->scopeConfig = $scopeConfig;
     }
 
-    public function isProductImageLazyloadingEnabled(): bool
-    {
-        return $this->scopeConfig->isSetFlag(
-            self::XML_PATH_CATALOG_PRODUCT_IMAGE_LAZYLOAD_ENABLED,
-            ScopeInterface::SCOPE_STORE
-        );
-    }
-
     public function isImagePreloadingEnabled(): bool
     {
         return $this->scopeConfig->isSetFlag(
-            self::XML_PATH_CATALOG_PRODUCT_IMAGE_LAZYLOAD_ENABLED,
+            self::XML_PATH_CATALOG_IMAGE_PRELOAD_ENABLED,
             ScopeInterface::SCOPE_STORE
         );
     }

composer.json

@@ -1,8 +1,8 @@
 {
     "name": "fisheye/module-lazyload",
-    "type": "magento2-module",
     "description": "A Magento 2 module that adds support for lazy loading of images.",
     "license": "MIT",
+    "type": "magento2-module",
     "authors": [
         {
             "name": "Fisheye Media Ltd.",
@@ -14,7 +14,7 @@
         }
     ],
     "require": {
-        "magento/module-catalog": "^102.0 || ^103.0 || ^104.0"
+        "magento/module-catalog": "^104.0"
     },
     "autoload": {
         "psr-4": {

etc/adminhtml/system.xml

@@ -16,17 +16,6 @@
                    showInWebsite="1"
                    showInStore="1">
                 <label>Image Lazyloading</label>
-                <field id="enabled"
-                       translate="label comment"
-                       type="select"
-                       sortOrder="1"
-                       showInDefault="1"
-                       showInWebsite="1"
-                       showInStore="1"
-                       canRestore="1">
-                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
-                    <label>Enable lazy loading of product images</label>
-                </field>
                 <field id="preload"
                        translate="label comment"
                        type="select"

etc/config.xml

@@ -10,7 +10,6 @@
     <default>
         <catalog>
             <product_image_lazyload>
-                <enabled>1</enabled>
                 <preload>1</preload>
             </product_image_lazyload>
         </catalog>

etc/module.xml

@@ -6,8 +6,8 @@
  */
 -->
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-		xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
-    <module name="Fisheye_Lazyload" setup_version="1.0.0">
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="Fisheye_Lazyload">
         <sequence>
             <module name="Magento_Catalog"/>
         </sequence>

view/frontend/layout/default.xml

@@ -16,7 +16,7 @@
                 <arguments>
                     <!--
                      *  Item "name" attribute should be descriptive to the area
-                     *  Item value should be a CSS selector vage enough to select groups of elements for efficiency
+                     *  Item value should be a CSS selector vague enough to select groups of elements for efficiency
                      -->
                     <argument name="preload_elements" xsi:type="array">
                         <item name="header_images" xsi:type="string">header .lazyload</item>

view/frontend/layout/hyva_default.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Fisheye Media Ltd. All rights reserved.
+ * See LICENCE.txt for licence details.
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <!--
+         Ideally we wouldn't use lazysizes here, and would rely on native loading features.
+         This is legacy support for existing sites that are expected to have content that uses older markup.
+         -->
+        <script src="Fisheye_Lazyload/js/lazysizes.min.js" async="async" />
+        <script src="Fisheye_Lazyload/js/ls.native-loading.min.js" async="async" />
+    </head>
+    <body>
+        <!-- Preloading feature not supported for Hyva themes -->
+        <referenceBlock name="lazyload.preload.config" remove="true"/>
+    </body>
+</page>