diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..9cfc574 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,15 @@ +{ + "permissions": { + "allow": [ + "Bash(git *)", + "Bash(docker exec woocommerce *)", + "Bash(docker compose *)", + "Bash(composer *)", + "Bash(npm *)", + "Bash(ls *)", + "Bash(mkdir *)", + "Bash(cat *)", + "Bash(php *)" + ] + } +} diff --git a/CLAUDE.md b/CLAUDE.md index 412b414..0b5465e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -215,6 +215,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi - **Twig autoescape + WordPress escape filters = double encoding** -- register all `esc_*` filters with `['is_safe' => ['html']]` option in the plugin's `Template.php`. - **`wp i18n make-pot` does NOT scan Twig templates** -- any string used exclusively in `.html.twig` files must be manually added to the `.pot` file. - **`#, fuzzy` silently skips translations at runtime** -- always remove fuzzy flags after verifying translations. +- **`|nl2br|esc_html` is wrong filter order** -- `nl2br` outputs `
` tags, then `esc_html` escapes them to `<br>`. Correct: `|esc_html|nl2br`. +- **`function() is defined` is semantically wrong** -- always evaluates truthy since the function is called regardless. Use `{% if function() %}` directly. +- **HTML entities in translated strings get double-encoded** -- `…` in `__()` becomes `&hellip;`. Use Unicode `…` directly or append `|raw` for trusted filter output. +- **Filter chains producing HTML need `|raw`** -- e.g., `term_description()|wptexturize|wpautop|do_shortcode|raw`. ### Bootstrap 5 vs Plugin CSS Conflicts @@ -222,6 +226,10 @@ Recurring bugs and non-obvious behaviours discovered across sessions. **Read thi - **CSS dependency chain**: `woocommerce` -> child theme overrides. Ensures correct cascade. - jQuery `.show()`/`.hide()` cannot override Bootstrap `!important` (`d-none`). Toggle both class and inline style. - `overflow: visible !important` on `.wp-block-navigation__container` is essential for dropdowns inside block theme navigation. +- **WooCommerce `shop_table` borders conflict with Bootstrap `.table`** -- reset with `.woocommerce table.shop_table { border: 0 }` and cell `border-left/right: 0`. +- **WooCommerce gallery JS requires modifier classes** -- `--with-images`, `--without-images`, `--columns-N` on `.woocommerce-product-gallery` + `style="opacity: 0"` for fade-in. Without these, zoom and photoswipe won't initialize. +- **WooCommerce float layout fights Bootstrap grid** -- `div.product div.images/summary` have `float:left/right; width:48%` in `woocommerce-layout.css`. Override with `float: none; width: 100%`. +- **Bootstrap `g-*` gutters add negative top margin** -- `g-4` sets both `--bs-gutter-x` and `--bs-gutter-y`; the `.row` gets `margin-top: calc(-1 * var(--bs-gutter-y))` pulling it upward. Use `gx-*` for horizontal-only gutters when vertical gap isn't desired. ### Double Heading Prevention @@ -268,7 +276,7 @@ wp-bootstrap (parent theme, Bootstrap 5 FSE + Twig rendering) ### Important Constraints - **WooCommerce plugin is read-only.** We have no control over its source code. All customizations happen in the child theme via template overrides and hooks. -- **Docker environment is not yet set up.** Commands referencing `docker exec` (e.g., in the translation workflow) are not currently available. Local alternatives or manual steps must be used until the container is configured. +- **Docker environment:** Container name is `woocommerce`. Use `docker exec woocommerce ...` for commands and `docker exec woocommerce apache2ctl graceful` to clear OPcache after PHP changes. ### Cross-Project Workflow @@ -313,7 +321,7 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr ## Version History -Current version: **v0.0.1** +Current version: **v0.1.0** ## Session History @@ -342,3 +350,32 @@ Current version: **v0.0.1** - **`bg-primary-subtle` for icon containers**: These Bootstrap 5.3 contextual utilities automatically adapt to dark mode, unlike hardcoded colors. - **Welcome message restructured**: Separated greeting from logout link instead of using WooCommerce's default inline-linked `__()` string. This gives full control over card layout and avoids translated strings containing HTML structure assumptions. - **Templates NOT changed** (already well-done): `orders.html.twig`, `my-address.html.twig`, `form-login.html.twig`, `payment-methods.html.twig`, `form-add-payment-method.html.twig`, `downloads.html.twig` + +### 2026-02-28 — Single Product Bootstrap 5 Layout + Template Quirks Audit + +**Scope:** Created Bootstrap 5 two-column layout for single product pages. Then audited all ~90 Twig templates for WooCommerce CSS quirks, Twig escaping bugs, and missing Bootstrap styling. + +**Single product layout (3 files):** + +- `woocommerce/content-single-product.php` — Bridge file for `wc_get_template_part()` interception +- `templates/content-single-product.html.twig` — Two-column `row gx-4 gx-lg-5` grid (images left, summary right) +- `assets/css/wc-bootstrap.css` — Float/width reset, sale badge positioning, shop_table border reset, gallery opacity fallback + +**Template quirks audit (14 files fixed):** + +- `order/order-details.html.twig` — Fixed `|nl2br|esc_html` filter order (was escaping `
` tags) +- `single-product/product-image.html.twig` — Added WC gallery modifier classes + opacity:0 for JS init +- `brands/brand-description.html.twig` — Added `|raw` to HTML-producing filter chain +- `single-product/up-sells.html.twig`, `cart/cross-sells.html.twig`, `single-product/related.html.twig` — Fixed `…` double-encoding in headings +- `myaccount/dashboard.html.twig` — Removed duplicate deprecated hook fires +- `product-searchform.html.twig` — Replaced `…` entity with Unicode `…` +- `cart/cart-totals.html.twig`, `checkout/review-order.html.twig`, `checkout/form-login.html.twig`, `checkout/terms.html.twig` — Removed wrong `function() is defined` guards +- `wc-base.html.twig` — Added `|esc_attr` on notification type in class attribute +- `global/form-login.html.twig` — Added `is defined` guard on `hidden` variable +- `single-product/add-to-cart/variation.html.twig` — Added `role="alert"` for accessibility +- `cart/mini-cart.html.twig` — Changed remove link to Bootstrap `btn btn-sm btn-outline-danger` +- `cart/cart-shipping.html.twig` — Made `form-check` class conditional on multiple shipping methods + +**Infrastructure:** + +- Created `.claude/settings.json` with allowed commands (git, docker, composer, npm, etc.) diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css index ef8308d..80fdd78 100644 --- a/assets/css/wc-bootstrap.css +++ b/assets/css/wc-bootstrap.css @@ -517,3 +517,30 @@ header.sticky-top.is-stuck { .product-quantity { white-space: nowrap; } + +/* ========================================================================== + Shop Table + Reset WooCommerce's border styles on .shop_table to let Bootstrap's + .table class handle borders via --bs-table-* custom properties. + ========================================================================== */ + +.woocommerce table.shop_table { + border: 0; + border-collapse: collapse; +} + +.woocommerce table.shop_table td, +.woocommerce table.shop_table th { + border-left: 0; + border-right: 0; +} + +/* ========================================================================== + Product Gallery + WooCommerce JS sets opacity: 1 after initialization. Ensure the gallery + is visible even if WC JS doesn't run (e.g., gallery features disabled). + ========================================================================== */ + +.woocommerce-product-gallery--without-images { + opacity: 1 !important; +} diff --git a/functions.php b/functions.php index 20b4334..f607044 100644 --- a/functions.php +++ b/functions.php @@ -23,7 +23,7 @@ if ( ! defined( 'ABSPATH' ) ) { * 2. This PHP constant — used internally by the theme * Both MUST be updated on every release. */ -define( 'WC_BOOTSTRAP_VERSION', '0.0.1' ); +define( 'WC_BOOTSTRAP_VERSION', '0.1.0' ); define( 'WC_BOOTSTRAP_PATH', get_stylesheet_directory() . '/' ); define( 'WC_BOOTSTRAP_URL', get_stylesheet_directory_uri() . '/' ); diff --git a/style.css b/style.css index d231890..c1d1b9d 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ Description: A Bootstrap 5 child theme for WP Bootstrap that overrides all WooCo Requires at least: 6.7 Tested up to: 6.7 Requires PHP: 8.3 -Version: 0.0.1 +Version: 0.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Template: wp-bootstrap diff --git a/templates/brands/brand-description.html.twig b/templates/brands/brand-description.html.twig index c5fb739..d954347 100644 --- a/templates/brands/brand-description.html.twig +++ b/templates/brands/brand-description.html.twig @@ -24,6 +24,6 @@ {% endif %}
- {{ term_description()|wptexturize|wpautop|do_shortcode }} + {{ term_description()|wptexturize|wpautop|do_shortcode|raw }}
diff --git a/templates/cart/cart-shipping.html.twig b/templates/cart/cart-shipping.html.twig index dc16981..d4efde6 100644 --- a/templates/cart/cart-shipping.html.twig +++ b/templates/cart/cart-shipping.html.twig @@ -24,7 +24,7 @@ {% if available_methods is defined and available_methods|length > 0 %}