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,48 @@
+<?php
+/**
+ * Product Gallery — lightweight, accessible, keyboard friendly.
+ *
+ * Args: ['product' => WC_Product]
+ *
+ * @package XShop
+ */
+
+declare(strict_types=1);
+
+defined('ABSPATH') || exit;
+
+$product = $args['product'] ?? null;
+if (is_int($product)) { $product = wc_get_product($product); }
+if (!$product instanceof WC_Product) { global $product; }
+if (!$product instanceof WC_Product) { return; }
+
+$pid = $product->get_id();
+$mainId = $product->get_image_id();
+$galleryIds = $product->get_gallery_image_ids();
+$allIds = $mainId ? array_merge([$mainId], $galleryIds) : $galleryIds;
+
+if (empty($allIds)) {
+    echo '<div class="xshop-product__gallery-main" style="display:flex;align-items:center;justify-content:center;color:var(--xshop-muted)">' . esc_html__('No image', 'xshop') . '</div>';
+    return;
+}
+
+$firstUrl = wp_get_attachment_image_url($allIds[0], 'large');
+?>
+<div class="xshop-product__gallery" data-xshop-gallery>
+  <div class="xshop-product__gallery-main" id="xshop-gallery-main">
+    <?php echo wp_get_attachment_image($allIds[0], 'large', false, ['loading' => 'eager', 'decoding' => 'async', 'alt' => esc_attr($product->get_name()), 'data-xshop-main-image' => '']); ?>
+  </div>
+  <?php if (count($allIds) > 1): ?>
+    <div class="xshop-product__thumbs" role="tablist" aria-label="<?php esc_attr_e('Product gallery', 'xshop'); ?>">
+      <?php foreach ($allIds as $idx => $attId):
+          $thumbUrl = wp_get_attachment_image_url($attId, 'thumbnail');
+          $largeUrl = wp_get_attachment_image_url($attId, 'large');
+          $isActive = $idx === 0;
+      ?>
+        <button type="button" class="xshop-product__thumb <?php echo $isActive ? 'is-active' : ''; ?>" data-large="<?php echo esc_url($largeUrl); ?>" aria-label="<?php echo esc_attr(sprintf(esc_html__('View image %d', 'xshop'), $idx + 1)); ?>" aria-selected="<?php echo $isActive ? 'true' : 'false'; ?>" role="tab">
+          <?php echo wp_get_attachment_image($attId, 'thumbnail', false, ['loading' => 'lazy', 'decoding' => 'async', 'alt' => esc_attr(sprintf(esc_html__('Thumbnail %d', 'xshop'), $idx + 1))]); ?>
+        </button>
+      <?php endforeach; ?>
+    </div>
+  <?php endif; ?>
+</div>