You've already forked wc-bootstrap
magdev
784b400c46
Catalog: page title via woocommerce_page_title(), breadcrumbs, category template rename (underscore), 3-column grid, single chevron on sort. Single product: variable form data attributes + disabled CSS class fix (WC JS only toggles CSS classes, not HTML disabled attribute), dark mode select specificity (0,5,1) to beat WC's (0,4,3) background shorthand, gallery main image in thumbnail strip with empty URL guard, related/ upsells setup_postdata for correct global $product, grouped product loop logic rewrite. Account: downloads via wc_get_customer_available_downloads(). New: product-gallery.js, sanitize_title filter, wc_setup_product_data() and wp_reset_postdata() Twig functions, product-thumbnails.html.twig suppressor. Removed obsolete PLAN.md and SETUP.md. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
/**
|
|
* Product Gallery Thumbnail Click Handler
|
|
*
|
|
* Swaps the main product image when a gallery thumbnail is clicked.
|
|
* The first thumbnail is the main product image (always included in the strip).
|
|
* Also handles gallery fade-in (WooCommerce sets opacity: 0 by default).
|
|
*
|
|
* @package WcBootstrap
|
|
* @since 0.1.5
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
|
|
function initGallery() {
|
|
var gallery = document.querySelector('.woocommerce-product-gallery');
|
|
if (!gallery) return;
|
|
|
|
// Fade in the gallery (WooCommerce expects JS to set opacity: 1).
|
|
gallery.style.opacity = '1';
|
|
|
|
var mainImageContainer = gallery.querySelector('.woocommerce-product-gallery__image');
|
|
if (!mainImageContainer) return;
|
|
|
|
var mainImage = mainImageContainer.querySelector('img');
|
|
if (!mainImage) return;
|
|
|
|
var thumbs = gallery.querySelectorAll('.wc-gallery-thumb');
|
|
if (!thumbs.length) return;
|
|
|
|
thumbs.forEach(function (thumb) {
|
|
thumb.style.cursor = 'pointer';
|
|
thumb.addEventListener('click', function () {
|
|
var fullSrc = this.getAttribute('data-full-src');
|
|
if (!fullSrc) return;
|
|
|
|
mainImage.setAttribute('src', fullSrc);
|
|
|
|
// Update active state.
|
|
thumbs.forEach(function (t) {
|
|
t.style.opacity = '0.6';
|
|
t.classList.remove('border-primary', 'active');
|
|
t.classList.add('border');
|
|
});
|
|
this.style.opacity = '1';
|
|
this.classList.add('border-primary', 'active');
|
|
this.classList.remove('border');
|
|
});
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initGallery);
|
|
} else {
|
|
initGallery();
|
|
}
|
|
})();
|