feat: implement WooCommerce storefront foundation

2026-09-13 19:51:31 +03:30
parent f11e1d650d
commit 00439fcea9
18 changed files with 871 additions and 65 deletions
@@ -0,0 +1,45 @@
+/**
+ * XShop Product Gallery — vanilla, accessible, RTL-safe.
+ * Swaps main image on thumbnail click/keyboard.
+ */
+(function () {
+  'use strict';
+  function initGalleries() {
+    var galleries = document.querySelectorAll('[data-xshop-gallery]');
+    galleries.forEach(function (gal) {
+      var mainImg = gal.querySelector('[data-xshop-main-image]');
+      var thumbs = gal.querySelectorAll('.xshop-product__thumb');
+      if (!mainImg || !thumbs.length) return;
+      thumbs.forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          var large = btn.getAttribute('data-large');
+          if (!large) return;
+          mainImg.setAttribute('src', large);
+          thumbs.forEach(function (t) {
+            t.classList.remove('is-active');
+            t.setAttribute('aria-selected', 'false');
+          });
+          btn.classList.add('is-active');
+          btn.setAttribute('aria-selected', 'true');
+        });
+        btn.addEventListener('keydown', function (e) {
+          if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') return;
+          e.preventDefault();
+          var idx = Array.prototype.indexOf.call(thumbs, btn);
+          var next;
+          if (e.key === 'Home') next = 0;
+          else if (e.key === 'End') next = thumbs.length - 1;
+          else if (e.key === 'ArrowLeft') next = idx > 0 ? idx - 1 : thumbs.length - 1;
+          else next = idx < thumbs.length - 1 ? idx + 1 : 0;
+          thumbs[next].focus();
+          thumbs[next].click();
+        });
+      });
+    });
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initGalleries);
+  } else {
+    initGalleries();
+  }
+})();