Implement gallery-init event to replace WebP images in Hyva gallery

yireo · Sep 22, 2023 · b817a40 · b817a40
1 parent 4646079
commit b817a40
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/view/frontend/layout/hyva_catalog_product_view.xml b/view/frontend/layout/hyva_catalog_product_view.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="content">
+            <block template="Yireo_Webp2::hyva/gallery-additions.phtml"/>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/view/frontend/templates/hyva/gallery-additions.phtml b/view/frontend/templates/hyva/gallery-additions.phtml
@@ -0,0 +1,37 @@
+<script>
+    document.addEventListener('gallery-init', ({detail: galleryData}) => {
+        if (typeof hasWebP != 'function') {
+            console.error('[Yireo_WebP2] JavaScript function "hasWebP" does not exist');
+            return;
+        }
+
+        function replaceImage(image) {
+            if (image.full && image.full_webp) {
+                image.full = image.full_webp;
+                delete image.full_webp;
+            }
+
+            if (image.img && image.img_webp) {
+                image.img = image.img_webp;
+                delete image.img_webp;
+            }
+
+            if (image.thumb && image.thumb_webp) {
+                image.thumb = image.thumb_webp;
+                delete image.thumb_webp;
+            }
+        }
+
+        if (galleryData.images) {
+            galleryData.images.forEach(function(image) {
+                replaceImage(image);
+            });
+        }
+
+        if (galleryData.initialImages) {
+            galleryData.initialImages.forEach(function(image) {
+                replaceImage(image);
+            });
+        }
+    });
+</script>