3 files changed, 79 insertions, 0 deletions
diff --git a/html/content/js/Products/productHeader.js b/html/content/js/Products/productHeader.js
new file mode 100644
index 0000000..3e12eee
--- /dev/null
+++ b/html/content/js/Products/productHeader.js
@@ -0,0 +1,21 @@
+$$plugins.define('productHeader', function (element, options) {
+    const el = document.querySelector('#addToCartButton');
+    const header = document.querySelector(".productHeader");
+
+    const observer = new window.IntersectionObserver(([entry]) => {
+        if (entry.isIntersecting) {
+            header.classList.remove("active");
+            return
+        }
+        if (entry.boundingClientRect.top > 0) {
+            header.classList.remove("active");
+        } else {
+            header.classList.add("active");
+        }
+    }, {
+        root: null,
+        threshold: 0,
+    })
+
+    observer.observe(el)
+});
diff --git a/html/content/js/Products/productImageModal.js b/html/content/js/Products/productImageModal.js
new file mode 100644
index 0000000..9873bed
--- /dev/null
+++ b/html/content/js/Products/productImageModal.js
@@ -0,0 +1,47 @@
+$$plugins.define('productImageModal', ['swiper-bundle', 'domHelper'], function (element, options, Swiper, $) {
+    var $productImg = $('.productPage__image'),
+        thumbs = document.querySelector('.productThumbs'),
+        sliderModal = document.querySelector('.productSliderModal'),
+        $image;
+
+    var swiperThumbs = new Swiper(".productThumbs", {
+        direction: "vertical",
+        freeMode: true,
+        init: false,
+        slidesPerView: 'auto',
+        spaceBetween: 8,
+        speed: 800,
+        watchSlidesProgress: true,
+        breakpoints: {
+            0: {
+                direction: "horizontal",
+            },
+            640: {
+                direction: "vertical",
+            }
+        }
+    });
+
+    var swiperMain = new Swiper(".productMainImg", {
+        init: false,
+        loop: true,
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+        speed: 800,
+        thumbs: {
+            swiper: swiperThumbs,
+        },
+    });
+
+    $productImg.on('click', function () {
+        if (!thumbs.classList.contains('swiper-initialized')) {
+            swiperThumbs.init();
+            swiperMain.init();
+        }
+        sliderModal.classList.add('open');
+        $image = $(this).parents('.productPage__image');
+        swiperMain.slideTo($image.index() + 1, 0);
+    })
+});
diff --git a/html/content/js/Products/productattr.js b/html/content/js/Products/productattr.js
new file mode 100644
index 0000000..d28c0a7
--- /dev/null
+++ b/html/content/js/Products/productattr.js
@@ -0,0 +1,11 @@
+$$plugins.define('productattr', function (element, options) {
+    const selected = element.querySelector('.productAttr__selected');
+    element.querySelectorAll('.radiobutton__input').forEach(input => {
+        if (input.checked) {
+            selected.innerHTML = input.parentElement.querySelector('.radiobutton__text').innerText;
+        }
+        input.addEventListener('change', function (event) {
+            selected.innerHTML = event.target.parentElement.querySelector('.radiobutton__text').innerText;
+        });
+    })
+});