Add preload template and options via layout

fisheyehq · Nov 20, 2020 · 57a8b1e · 57a8b1e
1 parent 6869281
commit 57a8b1e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/Block/Preload.php b/Block/Preload.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Copyright © Fisheye Media Ltd. All rights reserved.
+ * See LICENCE.txt for licence details.
+ */
+
+namespace Fisheye\Lazyload\Block;
+
+use Magento\Framework\View\Element\Template;
+use Magento\Framework\Serialize\SerializerInterface;
+
+class Preload extends Template
+{
+    /**
+     * @var SerializerInterface 
+     */
+    protected $serializer;
+
+    /**
+     * @param Template\Context $context
+     * @param SerializerInterface $serializer
+     * @param array $data
+     */
+    public function __construct(
+        Template\Context $context,
+        SerializerInterface $serializer,
+        array $data = []
+    ) {
+        parent::__construct($context, $data);
+        $this->serializer = $serializer;
+    }
+
+    /**
+     * @return string
+     */
+    public function getJsConfig(): string
+    {
+        return $this->serializer->serialize([
+            'preload_selectors' => $this->getData('preload_elements'),
+        ]);
+    }
+}
diff --git a/view/frontend/layout/default.xml b/view/frontend/layout/default.xml
@@ -0,0 +1,28 @@
+<?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">
+    <body>
+        <referenceContainer name="before.body.end">
+            <block name="lazyload.preload.config"
+                   class="Fisheye\Lazyload\Block\Preload"
+                   template="Fisheye_Lazyload::preload.phtml"
+                   ifconfig="catalog/product_image_lazyload/preload">
+                <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
+                     -->
+                    <argument name="preload_elements" xsi:type="array">
+                        <item name="header_images" xsi:type="string">header .lazyload</item>
+                    </argument>
+                </arguments>
+            </block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/view/frontend/templates/preload.phtml b/view/frontend/templates/preload.phtml
@@ -0,0 +1,14 @@
+<?php
+/**
+ * Copyright © Fisheye Media Ltd. All rights reserved.
+ * See LICENCE.txt for licence details.
+ */
+/** @var Fisheye\Lazyload\Block\Preload $block */
+?>
+<script type="text/x-magento-init">
+    {
+        "*": {
+            "Fisheye_Lazyload/js/preload": <?= /* @noEscape */ $block->getJsConfig() ?>
+        }
+    }
+</script>