Skip to content

Claude/unified tour dates section lpf j9#3895

Open
ByllanBonk wants to merge 119 commits intoShopify:mainfrom
ByllanBonk:claude/unified-tour-dates-section-LpfJ9
Open

Claude/unified tour dates section lpf j9#3895
ByllanBonk wants to merge 119 commits intoShopify:mainfrom
ByllanBonk:claude/unified-tour-dates-section-LpfJ9

Conversation

@ByllanBonk
Copy link
Copy Markdown

PR Summary:

Why are these changes introduced?

Fixes #0.

What approach did you take?

Other considerations

Decision log

# Decision Alternatives Rationale Downsides
1

Visual impact on existing themes

Testing steps/scenarios

  • Step 1

Demo links

Checklist

shopify bot and others added 30 commits February 23, 2026 20:36
Committed from shop: My Store
Committed from shop: My Store
Committed from shop: My Store
… layout

- Global CSS with Bebas Neue/DM Sans/DM Mono fonts, dark color scheme (#0D0D0D bg, #E8690A accent)
- Sharp-cornered modern button overrides (no border radius, uppercase, letter-spacing)
- Custom sections: GK Hero, Tour Dates (Bandsintown), Stream+Follow, Featured Gristle, Sponsor Logos, Spotify Embed
- All sections have full {% schema %} blocks for Shopify visual editor
- Updated settings_data.json with 5 dark color schemes
- Updated header/footer groups with dark styling
- Wired up homepage template with correct section order

https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
…op grid

- GK Dates Page: full Bandsintown embed with dark styling, customizable artist name
- GK Lessons Page: 3-column card grid with feature lists (Virtual, On-Demand, TrueFire)
- GK About Page: editorial layout with image+text blocks, stats bar, rich text
- GK Press Page: featured quote hero + press quotes grid with source attribution
- GK Contact Page: dark styled form with contact info blocks, Shopify form integration
- Updated collection.json for 3-column portrait grid (Shop page)
- All sections have full {% schema %} blocks for Shopify visual editor

https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
Committed from shop: My Store
Committed from shop: My Store
Committed from shop: My Store
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
…ction

Tour Dates (gk-tour-dates.liquid + gk-dates-page.liquid):
- Fully custom, no third-party widgets or apps
- Manual show date blocks: date, venue, city, ticket URL, sold-out toggle
- Auto-hides past dates using Liquid epoch comparison (disappear next day)
- Homepage section shows next 4 upcoming, full page shows all
- Date in orange Bebas Neue left, venue/city middle, GET TICKETS button right
- SOLD OUT shows grey label instead of button
- VIEW ALL DATES outlined orange button at bottom of homepage section
- Full schema: blocks are addable/editable/deletable in theme editor

Spotify Embed (gk-spotify-embed.liquid):
- Accepts full <iframe> embed OR bare Spotify embed URL in textarea
- Smart parsing: detects iframe vs URL, renders accordingly
- Rounded card container with border, shadow, configurable radius + padding
- Separate desktop/mobile embed heights
- Optional "Open on Spotify" link toggle
- Placeholder with instructions when no embed configured
- Full editable schema: colors, sizing, spacing, max-width

https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
gk-tour-dates.liquid:
- Custom manual show date blocks (date/venue/city/ticket_url/sold_out fields)
- Auto-hides past shows via Liquid epoch comparison (disappear day after)
- max_shows range setting (default 4) limits display on homepage
- Full-width orange outlined VIEW ALL DATES button links to /pages/dates
- Dark design: orange Bebas Neue date, DM Sans venue, DM Mono city
- SOLD OUT grey label replaces button when toggled

templates/index.json:
- Restored full custom homepage: gk-hero, featured-collection, gk-tour-dates,
  gk-stream-follow, gk-featured-gristle, gk-sponsor-logos, gk-spotify-embed
- Replaces the Dawn default sections (image-banner, collage, video, multicolumn)

https://claude.ai/code/session_01CxaEVe2f1Q4SZDKpWhcJ1W
Replace Bandsintown with custom tour dates + rewrite Spotify embed se…
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
shopify bot and others added 20 commits February 25, 2026 22:54
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
Committed from shop: Greg Koch
The snippet was checking `mode == 'render'` but both section files were
calling it with mode: 'render_home' and mode: 'render_page', so no rows
ever rendered. Now handles all three calling conventions:

  - render_home → gk-date-row prefix (home section CSS), no is-hidden
  - render_page → gk-date prefix, is-hidden on rows beyond visible_count
  - render      → legacy explicit mode (row_prefix + use_hidden_class params)
  - count       → returns upcoming date count only

Also adds backward compatibility for gk-dates-page.liquid which uses the
legacy mode: 'render' calling convention with explicit row_prefix param.

To add/edit dates, update the _gk_dates_raw capture block in the snippet.
Both sections update automatically.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…s-LpfJ9

Fix shared tour dates snippet: handle render_home and render_page modes
- snippets/gk-tour-dates-shared.liquid now reads from
  shop.metaobjects.tour_date.values (sorted by date) as the primary
  source of truth; falls back to the _gk_dates_raw capture block when
  no metaobject entries exist, so the site never shows a blank list.
- Metaobject fields used: date, descriptor, venue, city, state,
  ticket_url, sold_out (type handle: tour_date).
- New "descriptor" line (e.g. "support for Paul Gilbert") renders
  between venue and city in the __details block for both home and
  page row variants.
- Added .gk-date-row__descriptor CSS to gk-tour-dates-home.liquid.
- Added .gk-date__descriptor CSS to gk-dates-page.liquid and
  gk-tour-dates-page.liquid.
- All existing CSS classes, JS reveal behaviour, and section schemas
  are untouched.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Creates sections/gk-tour-dates.liquid — a single section file that
replaces gk-tour-dates-home and gk-dates-page. It is registered as
a STATIC section in layout/theme.liquid so one instance (and one set
of blocks) is shared between the homepage and the dates page.

Architecture:
- layout/theme.liquid renders the section when template is 'index'
  or suffix is 'dates' — same instance, shared block data
- Template detection picks the rendering variant:
    index     → gk-date-row classes + simple reveal (home look)
    page/dates → gk-date classes + show-more/fewer (page look)
- Blocks sorted ascending by date; past dates filtered automatically
- Unparseable dates kept visible (safe fallback)
- All CSS (gk-date-row AND gk-date namespaces), JS, glow effects,
  orange accents, and hover states are preserved pixel-identical

templates/index.json: removed gk-tour-dates-home instance
templates/page.dates.json: emptied; static section is the content

Dylan's setup checklist:
1. Go to Online Store → Customize (homepage or dates page)
2. Click the "GK Tour Dates" section in the sidebar
3. Add blocks (type: Show) — one block per date
4. Fill in: Date, Venue, City/State, Descriptor, Ticket URL, Sold out
5. Reorder blocks by dragging — they also sort automatically by date
6. Settings: home_visible_count = 3, page_visible_count = 10

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Architecture:
- Reverts static section from layout/theme.liquid (removed)
- Restores both section instances in their original JSON template
  positions: gk_tour_dates_home_dLWg9B in index.json (between
  featured_collection and gk_stream_follow) and gk_dates in
  page.dates.json — homepage placement preserved exactly
- Adds global theme setting gk_tour_dates_data (textarea) to
  config/settings_schema.json under group "GK Tour Dates"
- Updates snippets/gk-tour-dates-shared.liquid to read from
  settings.gk_tour_dates_data when non-blank; falls back to
  hardcoded _gk_dates_raw capture block so site never breaks

New textarea format (one date per line):
  YYYY-MM-DD | Descriptor (optional) | Venue | City | State | Ticket URL (optional) | sold_out (optional)

No changes to:
- Any CSS, class names, or markup structure
- glow/orange accent styles or hover transitions
- JS reveal behavior (show more / show fewer)
- Section schemas or per-section settings
- visible_count: home=3, dates page=10 (unchanged)

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Architecture (slot/mount pattern):
- Creates sections/gk-tour-dates-shared.liquid — ONE static section
  rendered once per page-load in layout/theme.liquid inside a hidden
  #gk-tour-dates-mount wrapper; JS moves it into #gk-tour-dates-slot
  which sits at the correct position in the page template.
- Creates sections/gk-tour-dates-slot.liquid — renders only
  <div id="gk-tour-dates-slot"></div>; acts as the insertion point.

Data model:
- All tour dates are stored as blocks (type: "date") on the shared
  section. Fields: date, descriptor, venue, city, state, ticket_url,
  sold_out — all editable via the Theme Editor sidebar.
- Editing once updates both homepage and dates page simultaneously.

Template-aware rendering:
- template.name == 'index'   → home style (.gk-tour-dates / .gk-date-row)
  initial_visible=3, reveal_step=3, style.display JS
- template.suffix == 'dates' → page style (.gk-dates / .gk-date)
  initial_visible=10, reveal_step=10, is-hidden class JS

No visual changes:
- All class names, CSS, spacing, glow, hover transitions, and button
  styling copied verbatim from existing gk-tour-dates-home.liquid and
  gk-dates-page.liquid into the shared section.
- Homepage position unchanged (between featured_collection and
  gk_stream_follow in index.json order array).
- Old section files left untouched for reference.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
… fallback

layout/theme.liquid (1-line change):
  Mount now renders {% section 'gk-tour-dates' %} — the canonical 854-line
  section with blocks — instead of the redundant gk-tour-dates-shared section.

sections/gk-tour-dates.liquid (2 insertions, no existing logic touched):
  Insertion A (after upcoming_count loop): when section.blocks.size == 0,
    calls render 'gk-tour-dates-shared' mode:'count' to get upcoming_count
    from the snippet (settings.gk_tour_dates_data or hardcoded fallback).
  Insertion B (wraps existing sorted-blocks render loop): when blocks empty,
    renders via snippet (render_home for index, render+row_prefix for dates
    page). When blocks are present, runs the existing sorted loop unchanged.
  Result: existing dates keep showing after deployment; as soon as the first
  block is added in Theme Editor, blocks become the sole data source.

sections/gk-tour-dates-slot.liquid (schema only):
  Added a paragraph setting that tells the user this is a position anchor
  and directs them to the GK Tour Dates section for block management.

No CSS, JS, class names, markup, or template JSON changed.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…r dates)

Replaces old placeholder TicketWeb URLs with the real Greg Koch 2026 tour
dates that are already on main (City Winery, The Vixen, Iridium, etc.) so
this branch merges cleanly without conflicts.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
- Both templates now use 'gk-tour-dates' type directly (no slot needed)
- All 20 April-May 2026 shows pre-loaded as editable blocks in each template
- Removed slot/mount JS from layout/theme.liquid
- Dropped dependency on settings textarea entirely

How to edit dates in Theme Editor:
  Homepage:   Customize → click 'GK Tour Dates' section → add/edit/remove Show blocks
  Dates page: Customize → Dates page → click 'GK Tour Dates' → add/edit/remove Show blocks

Each block has individual fields: Date, Venue, City/State, Descriptor, Ticket URL, Sold out.
No pipe-delimited formatting required.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Previously, dates like "Thu, FEB 28" or "Feb, 29" silently disappeared because
Liquid parsed them to a wrong year (e.g. year 28 AD), producing a non-zero
timestamp far in the past. The _show_ts == 0 safety net didn't catch these.

New logic:
- Default: show ALL blocks (keep = true)
- Only hide when date parses to a valid year >= 2020 AND is before today
- Misparses (year < 2020), unparseable dates, and blank dates with
  venue/city data all stay visible and sort to the end
- Updated hint text: "IMPORTANT: Include the full year — e.g. February 28, 2026"

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
…nstead

Pre-seeding blocks via git causes Shopify's editor to replace ALL blocks
with just the new one when the user clicks "Add Show". This is a Shopify
editor limitation: it doesn't merge git-committed blocks with editor-created
blocks in its draft state.

With 0 blocks in the template, the section correctly falls back to the
snippet (snippets/gk-tour-dates-shared.liquid) which shows all 20
April–May 2026 dates with working GET TICKETS links.

To add a new show: click "Add Show" in the editor. Once a block exists,
only blocks render (not the fallback). To fully migrate to blocks, add
all dates as blocks via the editor and they will persist correctly.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Two new sections + shared snippet:
  sections/gk-bandsintown-home.liquid  (default: 3 visible, reveal 3)
  sections/gk-bandsintown-page.liquid  (default: 10 visible, reveal 10)
  snippets/gk-bandsintown-embed.liquid (CSS + BIT widget + JS)

- Dark glass cards matching site aesthetic (rgba black, orange glow)
- Orange pill GET TICKETS buttons with hover lift
- RSVP buttons and BIT artist header hidden
- MutationObserver waits for async widget render then applies
  show/hide logic; show-more button reveals N more per click
- Fully scoped CSS (.gk-bit-home / .gk-bit-page) — no global leakage
- Responsive: stacked layout on mobile
- All settings editable in Theme Editor (artist name, visible count,
  reveal step, heading, subtext, padding, bg color)

No existing files modified.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
- Strip snippet to widget markup only (CSS/JS now live in section files)
- Scoped CSS with !important overrides: glass card rows, orange hover glow
  (translateY + border-color), pill-shaped ticket buttons with glow shadow
- JS rewrite: MutationObserver with 200ms debounce, setInterval retry
  (250ms × 20 = 5s max), double-init guard via data-bit-initialized,
  6-selector fallback chain for reliable event-row detection

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Remove all !important CSS overrides for event rows (glass card, hover
glow, pill ticket buttons, flex layout, date/venue/location colours).
BIT widget now renders with its own native styling.

Kept: section layout CSS, hide-header/RSVP rules, show-more button style,
and the full MutationObserver + setInterval + debounce show-N JS.

https://claude.ai/code/session_01GbgrA5NZvF9QCZUZdGUh1u
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants