Ecom Dynamic Tables

ACF-driven shortcodes for rendering dynamic, collapsible pricing tables (with an optional extensions accordion) on any WordPress site.

Module version: 2.0.0

Upgrading from 1.x? This is a breaking release. See Upgrading to 2.0 at the bottom.

Install

This module is distributed as a standalone Git repo — the folder is the repo. Pick one install path:

Option A — Git clone (recommended, gives you updates)

From your theme folder:

cd wp-content/themes/<your-theme>
git clone https://github.com/josipmestrovic/ecom-dynamic-tables.git dynamic-tables

Option B — Manual copy (no version link)

Download the repo as a ZIP from GitHub and unzip it as wp-content/themes/<your-theme>/dynamic-tables/. You won't be able to git pull future updates — you'd have to re-download.

Activation (both options)

Add this single line to your child theme's functions.php:

require_once get_stylesheet_directory() . '/dynamic-tables/dynamic-tables.php';

The module is a thin bootstrap — it just require_onces every file in includes/. The shared CSS and the accordion JS are registered globally but only enqueued when a shortcode actually renders, so pages that don't use a shortcode incur zero asset cost.

Working with this component

The folder you just cloned has its own .git directory — it's a normal git repo that happens to live inside a WordPress theme. Edit files normally; sync with plain git commands.

Pull updates from GitHub

cd wp-content/themes/<your-theme>/dynamic-tables
git pull

Hard-refresh the browser. Asset cache-busting is automatic via filemtime().

Push local improvements upstream

cd wp-content/themes/<your-theme>/dynamic-tables
git status
git add .
git commit -m "Fix chevron alignment on mobile"
git push

Releasing a new version

1. Bump version in two places:
   • dynamic-tables.php → ECOM_DT_VERSION constant.
   • README.md → "Module version" line at top + new Changelog entry.
2. Commit + tag + push:

   git add .
   git commit -m "Release 2.1.0: <one-line summary>"
   git tag v2.1.0
   git push
   git push --tags

Other sites opt-in with their next git pull. To pin a site to an exact version: git checkout v2.1.0.

Semver

Nested .git warning?

If the parent theme is also a git repo, git will warn about the nested .git inside dynamic-tables/. Add dynamic-tables/ to the parent's .gitignore — the component still works, it's just versioned separately (which is the goal).

File structure

dynamic-tables/
├── README.md                  ← you are here
├── dynamic-tables.php         ← thin bootstrap + constants
├── dynamic-tables.css         ← shared shortcode styles
├── dynamic-tables.js          ← accordion controller (vanilla, no deps)
└── includes/
    ├── assets.php             ← wp_register_style + wp_register_script
    ├── helpers.php            ← ecom_dt_format_price() + ecom_dt_render_wysiwyg() + filters
    └── shortcode-pricing.php  ← [ecom_dynamic_table]

Adding a new shortcode is a 2-step drop-in:

1. Create includes/shortcode-{name}.php containing a render function + add_shortcode() call.
2. require_once it from dynamic-tables.php.

No other file needs to change.

Constants

Defined by the bootstrap (dynamic-tables.php) with defined() guards so they're safe to override from wp-config.php if ever needed:

Asset loading strategy

• Register on wp_enqueue_scripts, enqueue inside the shortcode callback. ecom_dynamic_tables_enqueue_assets() calls wp_register_* for both ecom-dynamic-tables-css and ecom-dynamic-tables-js; the actual wp_enqueue_* calls live inside ecom_dt_render_dynamic_table(). Pages without a shortcode never pull either asset.
• Cache-busting via filemtime() — every deploy bumps the version string automatically; no manual version juggling.
• JS loads in the footer, with no dependencies (no jQuery).
• No admin-side enqueue — the module is front-end only.

Shortcodes

[ecom_dynamic_table]

Renders pricing for the current post as an accordion of rows, optionally followed by a single Extensions accordion and a disclaimer footer. The first row renders open by default; the rest start collapsed and expand on click / Enter / Space.

Reads the following ACF fields on the current post. The field names below are the default schema the shortcode expects — mirror these in your own ACF field group:

Why are some field names still prefixed tour_ / departure_? They're the historical schema this module was extracted from and they are kept verbatim so existing installs upgrading from 1.x don't have to migrate ACF data. Treat them as opaque field keys — they have no semantic meaning to the renderer.

Bails silently outside is_singular() (returns an empty string on archives / search / 404 / multi-post listings).

The Extensions block renders only when tour_extensions_boolean is true AND at least one of the two WYSIWYG fields has content (defensive guard — avoids an empty toggle). It uses the same .ecom-row-block / .ecom-row-toggle / .ecom-row-body classes as the pricing accordion, so it inherits all visual styling and the accordion JS automatically. It ships collapsed by default with a "Click here to see info" CTA.

Behavior

• First row open, rest collapsed — handled in PHP (.is-collapsed shipped on the body element from the renderer) so there's no flash of expanded content.
• Toggle row is a real <button class="ecom-row-toggle"> with aria-expanded / aria-controls — keyboard activation is native. When collapsed it shows the label + a "Click here to see prices" CTA; when expanded it shows the label + departure_note caption (if any). The chevron stays anchored to the right edge in both states and rotates 180° when open.
• Animation — dynamic-tables.js measures scrollHeight and animates max-height + opacity on .ecom-row-body. The collapsed state is driven by a .is-collapsed class (not the native hidden attribute) so transitions stay smooth.
• Print — all rows render fully expanded; chevron + CTA hidden.
• Reduced motion — prefers-reduced-motion: reduce skips the height / opacity transitions.

Accessibility

• Toggle is a real <button type="button"> — Enter / Space and focus order come for free, no JS keyboard handlers needed.
• aria-expanded and aria-controls are kept in sync by the JS controller; ID pairing uses wp_unique_id( 'ecom-row-' ) so multiple shortcode instances on one page don't collide.
• Visible focus ring: 2px solid #1C4168, inset.
• Chevron is aria-hidden="true" (decorative).
• Print + reduced-motion media queries are honored (see Behavior).

Public PHP surface

Filters

JavaScript module

dynamic-tables.js — vanilla, IIFE-scoped, zero dependencies.

• Single delegated click listener on document — handles every current and future .ecom-row-toggle without rebinding when the DOM changes.
• TRANSITION_MS = 220 matches the CSS transition-duration on .ecom-row-body.
• Expand: measures scrollHeight, sets max-height: 0 → requestAnimationFrame → animates to the measured pixel height, then clears the inline max-height after the transition so the body can grow freely if its content changes later (responsive WYSIWYG images, etc.).
• Collapse: locks the current height inline → forces a reflow → re-applies .is-collapsed and max-height: 0 to animate back down.
• Toggles aria-expanded on the button and .is-open on the parent .ecom-row-block so CSS hooks (chevron rotation, caption / CTA visibility) stay in sync.

Styling tokens

Re-use these across any future shortcode so the visual language stays consistent. Defined in dynamic-tables.css:

The optional CSS custom property --ecom-font-body is read by .ecom-pricing-title and .ecom-pricing-note if defined — set it on :root (or any ancestor) in your theme to override the body font for the heading row.

Bold rules inside the table:

• Column titles (Description, Est. Price ($)) — semibold, #384049.
• Price values — semibold, #D36815.
• Everything else (descriptions, extras labels) — regular weight.

CSS class reference

All classes are prefixed ecom- (with is-collapsed / is-open as the only state classes). If you write custom CSS in your child theme, target these:

Troubleshooting

Known limitations

• No-glyph ("tofu") boxes from typographic punctuation in tour_extension_itinerary (and any other WYSIWYG field rendered through wp_kses_post() / the_content). When an editor types a straight ASCII quote ", apostrophe ', or double-dash -- into the tour_extension_itinerary WYSIWYG (custom-rendered inside the [ecom_dynamic_table] extensions accordion), WordPress's wptexturize() filter rewrites them into typographic equivalents — “ ” ‘ ’ – — — on render. If the page's rendering font doesn't ship glyphs for those codepoints (U+2018, U+2019, U+201C, U+201D, U+2013, U+2014, U+2026), the browser shows a NO GLYPH "tofu" box instead.

  Status: the helper ecom_dt_render_wysiwyg() exists in includes/helpers.php to render WYSIWYG values with wptexturize disabled for exactly that single call, but [ecom_dynamic_table] currently renders tour_extension_info and tour_extension_itinerary through wp_kses_post() directly, so the helper isn't applied — the tofu still appears. Two ways to fix:

  1. Swap the two wp_kses_post( $extension_* ) calls in includes/shortcode-pricing.php for ecom_dt_render_wysiwyg( $extension_* ) (re-sanitize after if needed). This is the surgical fix.
  2. Load a webfont in the parent theme that includes the missing codepoints. This fixes every WYSIWYG site-wide, not just this shortcode.

  Tracked here so the next maintainer doesn't rediscover it.

• Single currency / locale per site. The two filters (ecom_dt_currency_symbol, ecom_dt_format_price) are global; there's no per-row currency switch.

• No admin-side preview. The shortcode bails outside is_singular(), so it won't render in the block editor preview.

Upgrading to 2.0

Version 2.0.0 strips the original brand-specific naming and switches to a generic ecom- prefix throughout. Everything in the public surface was renamed. Update consumer code as follows:

Shortcode

There is no backward-compat alias — find-and-replace in your post content.

PHP constants, functions, hooks, namespace

Enqueue handles

CSS classes

The full markup is now ecom--prefixed. Update any custom CSS in your child theme:

The CSS custom property --bht-font-body is now --ecom-font-body.

ACF fields — unchanged

Field names (tour_pricing_note, tour_departures, departure_*, tour_extension_*, etc.) are kept as-is. No ACF-side migration is required.

Changelog

2.0.0

• Breaking rename: stripped brand-specific bht / BHT / Blue Heart Travel naming throughout. New generic ecom- prefix on PHP constants, functions, filters, namespace, text domain, enqueue handles, ARIA id prefix, CSS classes, and the CSS custom property.
• Shortcode renamed: [tour_pricing] → [ecom_dynamic_table] (no backward-compat alias).
• Function renamed: shortcode callback bht_dt_render_tour_pricing() → ecom_dt_render_dynamic_table().
• CSS classes renamed: .tour-* → .ecom-*, .departure-* → .ecom-row-* (state classes .is-open / .is-collapsed unchanged).
• ACF field names retained unchanged for data backwards compatibility.
• README + docs/documentation.md rewritten for generic, public-facing use.

1.1.0

• Rows now render as an accordion (first row open, rest collapsed) with a real <button> toggle, ARIA wiring, animated max-height + opacity transitions, print and reduced-motion fallbacks.
• Added optional Extensions accordion below the pricing block, gated by tour_extensions_boolean + presence of either tour_extension_info / tour_extension_itinerary.
• Added dynamic-tables.js (vanilla, footer-loaded, registered with the same lazy-enqueue pattern as the CSS).
• Added ecom_dt_render_wysiwyg() helper for wptexturize-free WYSIWYG rendering (see Limitations for current usage gap).
• Documented ECOM_DT_DIR / ECOM_DT_VERSION constants.

1.0.0

• Initial pricing-table shortcode (static tables, no accordion).
• ecom_dt_format_price() helper + ecom_dt_currency_symbol / ecom_dt_format_price filters.
• ecom_dynamic_tables_enqueue_assets() registers shared CSS lazily.