From 1a818cbaefed4af46d1c48d22ff18ac335e41162 Mon Sep 17 00:00:00 2001
From: Ayesha Nisar <nisarwaqas007@gmail.com>
Date: Mon, 6 Jul 2026 23:11:34 +0500
Subject: [PATCH 1/2] =?UTF-8?q?feat(hyva):=20make=20the=20slider=20work=20?=
 =?UTF-8?q?on=20Hyv=C3=A4=20(JS=20+=20CSS)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slider only worked on Luma. Two Hyvä gaps:

- JS: the slider inits via text/x-magento-init -> requireJS (slider.js).
  Hyvä strips requireJS + x-magento-init, so it never initialised.
- CSS: styles ship as _module.less (Luma pipeline only). Hyvä does not
  compile Magento LESS, so the slider had NO CSS (slides rendered
  position:static, opacity:1 — stacked and unstyled).

Fix (in slider.phtml, no new files, works on both themes):
- Inline <style id=ef-bs-hyva-css> with the compiled-equivalent slider CSS.
- A guarded vanilla controller that runs ONLY when window.require is absent
  (Hyvä); Luma still uses the existing x-magento-init/requireJS path. It
  reuses the same markup + .is-active crossfade and honours the admin
  settings (autoplay, speed, loop, arrows, bullets, pause-on-hover).

Verified live on both themes (Hyvä + Luma): 3 banners crossfade-rotate,
arrows/bullets work, autoplay + pause-on-hover correct.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../view/frontend/templates/slider.phtml      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml b/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
index 09415f7..1b09d9d 100644
--- a/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
+++ b/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
@@ -213,3 +213,66 @@ $slideCount = count($slides);
     }
 }
 </script>
+
+<?php /* Hyvä support: the storefront styles ship as LESS (Luma pipeline only), so Hyvä —
+        which does not compile Magento LESS — gets NO slider CSS and the slides render
+        unstyled/stacked. Emit the compiled equivalent inline so the slider is styled on
+        BOTH themes (identical rules → harmless on Luma). */ ?>
+<style id="ef-bs-hyva-css">
+.etf-bannerslider{position:relative;margin:0 0 20px}
+.etf-bannerslider__title{margin:0 0 12px}
+.etf-bannerslider__viewport{position:relative;overflow:hidden;aspect-ratio:16/5;background:#f4f4f4}
+.etf-bannerslider__track{list-style:none;margin:0;padding:0;height:100%}
+.etf-bannerslider__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
+.etf-bannerslider__slide.is-active{opacity:1;visibility:visible;z-index:1}
+.etf-bannerslider__slide.is-pending-target{opacity:0;visibility:hidden}
+.etf-bannerslider.effect-slide .etf-bannerslider__slide{transform:translateX(30px);transition:opacity .5s ease,transform .5s ease}
+.etf-bannerslider.effect-slide .etf-bannerslider__slide.is-active{transform:translateX(0)}
+.etf-bannerslider__link,.etf-bannerslider picture{display:block;width:100%;height:100%}
+.etf-bannerslider__image{width:100%;height:100%;object-fit:cover;display:block}
+.etf-bannerslider__html{width:100%;height:100%}
+.etf-bannerslider__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:0;cursor:pointer;width:40px;height:40px;font-size:26px;line-height:1;color:#fff;background:rgba(0,0,0,.35);border-radius:50%;transition:background .2s ease}
+.etf-bannerslider__arrow:hover{background:rgba(0,0,0,.6)}
+.etf-bannerslider__arrow--prev{left:12px}
+.etf-bannerslider__arrow--next{right:12px}
+.etf-bannerslider__bullets{display:flex;justify-content:center;gap:8px;margin-top:10px}
+.etf-bannerslider__bullet{width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;background:#ccc;transition:background .2s ease}
+.etf-bannerslider__bullet.is-active{background:#333}
+@media (max-width:768px){.etf-bannerslider__viewport{aspect-ratio:4/3}.etf-bannerslider__arrow{width:32px;height:32px;font-size:20px}}
+</style>
+<?php /* Hyvä support: Hyvä strips requireJS + text/x-magento-init, so the requireJS
+        slider above never initialises. This guarded vanilla controller runs ONLY when
+        requireJS is absent (i.e. Hyvä); on Luma window.require exists and the
+        x-magento-init path handles it. Reuses the same markup + CSS (crossfade via
+        .is-active) and honours the admin settings. */ ?>
+<script>
+(function () {
+    if (window.require) { return; } // Luma path handles it via requireJS
+    var root = document.getElementById('<?= $escaper->escapeJs($htmlId) ?>');
+    if (!root || root.dataset.efHyvaInit) { return; }
+    root.dataset.efHyvaInit = '1';
+    var cfg = <?= /* @noEscape */ $block->getJsConfig() ?>;
+    var slides  = Array.prototype.slice.call(root.querySelectorAll('.etf-bannerslider__slide'));
+    var bullets = Array.prototype.slice.call(root.querySelectorAll('.etf-bannerslider__bullet'));
+    if (slides.length < 1) { return; }
+    var cur = 0, timer = null;
+    function show(i) {
+        var n = slides.length; i = (i % n + n) % n;
+        slides.forEach(function (s, k) { s.classList.toggle('is-active', k === i); });
+        bullets.forEach(function (b, k) { b.classList.toggle('is-active', k === i); });
+        cur = i;
+    }
+    function nxt() { (!cfg.loop && cur === slides.length - 1) ? show(0) : show(cur + 1); }
+    function prv() { show(cur - 1); }
+    function speed() { var s = parseInt(cfg.autoplaySpeed, 10) || 5000; if (s < 100) { s *= 1000; } return Math.max(1500, s); }
+    function start() { if (!cfg.autoplay || slides.length < 2) { return; } stop(); timer = setInterval(nxt, speed()); }
+    function stop() { if (timer) { clearInterval(timer); timer = null; } }
+    var an = root.querySelector('.etf-bannerslider__arrow--next');
+    var ap = root.querySelector('.etf-bannerslider__arrow--prev');
+    if (an) { an.addEventListener('click', function () { nxt(); start(); }); }
+    if (ap) { ap.addEventListener('click', function () { prv(); start(); }); }
+    bullets.forEach(function (b) { b.addEventListener('click', function () { show(parseInt(b.getAttribute('data-index'), 10) || 0); start(); }); });
+    if (cfg.pauseOnHover) { root.addEventListener('mouseenter', stop); root.addEventListener('mouseleave', start); }
+    show(0); start();
+})();
+</script>
\ No newline at end of file

From b19593331ff2ab42eac9f15d35c08c17ec30695c Mon Sep 17 00:00:00 2001
From: Ayesha Nisar <nisarwaqas007@gmail.com>
Date: Tue, 7 Jul 2026 09:42:03 +0500
Subject: [PATCH 2/2] =?UTF-8?q?fix(hyva):=20eager-load=20deferred=20slide?=
 =?UTF-8?q?=20images=20on=20Hyv=C3=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The requireJS slider.js normally un-lazies each slide image (lazyLoad).
On Hyvä that never runs, so slides 2..n kept their loading=lazy /
data-src placeholder inside a visibility:hidden slide and rendered blank.

Add loadSlide(): swap data-src->src, data-srcset->srcset, and force
loading=eager (re-assigning src) for the shown slide + preload the next.
Verified on the demo: all 3 banner images load and rotate on Hyvä.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../BannerSlider/view/frontend/templates/slider.phtml     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml b/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
index 1b09d9d..2a9803f 100644
--- a/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
+++ b/app/code/ETechFlow/BannerSlider/view/frontend/templates/slider.phtml
@@ -256,8 +256,16 @@ $slideCount = count($slides);
     var bullets = Array.prototype.slice.call(root.querySelectorAll('.etf-bannerslider__bullet'));
     if (slides.length < 1) { return; }
     var cur = 0, timer = null;
+    function loadSlide(el) {
+        el.querySelectorAll('source[data-srcset]').forEach(function (so) { so.srcset = so.getAttribute('data-srcset'); so.removeAttribute('data-srcset'); });
+        el.querySelectorAll('img').forEach(function (im) {
+            if (im.getAttribute('data-src')) { im.src = im.getAttribute('data-src'); im.removeAttribute('data-src'); }
+            if (im.loading === 'lazy') { im.loading = 'eager'; if (!im.complete || !im.naturalWidth) { var u = im.getAttribute('src'); if (u) { im.src = ''; im.src = u; } } }
+        });
+    }
     function show(i) {
         var n = slides.length; i = (i % n + n) % n;
+        loadSlide(slides[i]); loadSlide(slides[(i + 1) % n]);
         slides.forEach(function (s, k) { s.classList.toggle('is-active', k === i); });
         bullets.forEach(function (b, k) { b.classList.toggle('is-active', k === i); });
         cur = i;