Fix 10 known bugs: catalog, single product, and account pages (v0.1.5)
All checks were successful
Create Release Package / PHP Lint (push) Successful in 44s
Create Release Package / Build Release (push) Successful in 52s

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>
This commit is contained in:
2026-03-01 03:33:31 +01:00
parent 98359d4cfb
commit 784b400c46
23 changed files with 340 additions and 922 deletions

View File

@@ -0,0 +1,56 @@
/**
* 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();
}
})();