Skip to content

Claude/add bandsintown sections s1 rf f#3898

Open
ByllanBonk wants to merge 133 commits intoShopify:mainfrom
ByllanBonk:claude/add-bandsintown-sections-S1RfF
Open

Claude/add bandsintown sections s1 rf f#3898
ByllanBonk wants to merge 133 commits intoShopify:mainfrom
ByllanBonk:claude/add-bandsintown-sections-S1RfF

Conversation

@ByllanBonk
Copy link

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 28 commits February 26, 2026 05:00
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
Fills _gk_dates_raw with 20 confirmed upcoming dates from the
Paul Gilbert WROC World Tour 2026 (Greg Koch opens all US dates).

Dates run April 22 – May 30, 2026 across 20 cities.
Each entry includes a direct venue/ticket URL.

Only the capture block was changed — all rendering logic, CSS,
and section files are untouched.

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

chore: replace placeholder dates with real Greg Koch 2026 tour dates
- 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
…on-LpfJ9

Claude/unified tour dates section lpf j9
- 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
…s-LpfJ9

refactor: replace slot/mount with direct block-based tour dates
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
…on-LpfJ9

fix: forgiving date parsing — only hide confirmed-past dates
…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
…on-LpfJ9

Claude/unified tour dates section lpf j9
- 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
…s-LpfJ9

fix: stronger CSS overrides + robust show-N JS for BIT sections
Committed from shop: Greg Koch
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
…ns-LpfJ9

fix: revert BIT styling to native widget; keep show-more JS only
Restores the full custom CSS styling that makes the tour dates look like the old website:
- Glass card design with backdrop blur and subtle borders
- Orange date styling with hover effects
- Full button styling with shadows and brightness transitions
- Mobile responsive layout adjustments
- Improved JS selectors for more reliable event detection

The show-more dropdown button functionality now has the proper custom styling it deserves.

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

Previous code used style.display='none' which CSS !important rules could
override, meaning all events stayed visible. Now uses:
- el.style.setProperty('display','none','important') to hide (beats any CSS)
- el.style.removeProperty('display') to show (restores native widget display)
- data-gk-hidden attribute to track state instead of checking style.display
- Retry timeout extended to 10s for slow connections
- Stripped all custom event row CSS that was fighting the hiding logic

Home page: 3 dates on load, 3 revealed per click
Dates page: 10 dates on load, 10 revealed per click

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

Claude/unify tour dates sections lpf j9
…bust show-more

- Replace broken snippet reference with official Bandsintown anchor-initializer
  embed (bit-widget-initializer) + dynamic script loader (window.__gkBitLoaded guard)
- Match site aesthetic: Bebas Neue/DM Mono/DM Sans fonts, #E8690A orange accent,
  radial-gradient glass cards with border rgba(255,255,255,0.10)
- Heavy scoped CSS overrides (!important) suppress BIT chrome (header, footer,
  powered-by, RSVP buttons, social share) and restyle event rows + ticket buttons
- Hover: translateY(-1px) lift, rgba(232,105,10,0.45) border, orange inset glow
- Ticket buttons: orange pill (#E8690A bg, DM Mono 12px, 0.12em tracking)
- Show-more: MutationObserver + 300ms retry loop (12s max), data-gk-hidden attr,
  SHOW MORE DATES button hidden when no events remain
- Theme editor: show small informational notice but still attempt widget render
- Home defaults: 3 initial / 3 per click / 900px max-width
- Page defaults: 10 initial / 5 per click / 1100px max-width
- max_width range setting added to both sections

https://claude.ai/code/session_01Nr2QngJBUeVEivxvKEa7dU
Root cause: `window.__gkBitLoaded` guard prevented BIT main.min.js from
re-loading after a theme editor save. When Shopify re-renders the section
HTML, the old widget DOM is destroyed and a fresh .bit-widget-initializer
anchor appears — but BIT had already executed and didn't process it.

Fix (both sections):
- Remove the single-load guard; instead remove-then-re-add the BIT
  <script> tag (tagged data-gk-bit) every time the section renders,
  forcing main.min.js to re-execute and find the new anchor
- Wrap show-more logic in a callable `bootShowMore()` function
- Register a `shopify:section:load` listener (once per section, guarded
  by window['__gkBitEvt_' + sectionId]) that re-triggers BIT script
  reload + bootShowMore() with 600ms delay as a safety net for edge
  cases where inline scripts don't re-execute
- Increase retry timeout from 12s to 15s for slower connections

https://claude.ai/code/session_01Nr2QngJBUeVEivxvKEa7dU
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