Skip to content

Store preview 2#127

Merged
stopflock merged 24 commits into
masterfrom
store-preview-2
Jul 15, 2026
Merged

Store preview 2#127
stopflock merged 24 commits into
masterfrom
store-preview-2

Conversation

@stopflock

Copy link
Copy Markdown
Contributor

Going live

mcgeeandme and others added 24 commits June 17, 2026 18:01
* Add the store code from agora.markets 

Uploads a stylesheet and store code to popluate the deflock store hosted by agora.markets

* fix store

---------

Co-authored-by: Will Freeman <hohosanta@me.com>
Added a specific collection entry for the NOALPRS.COM Collection
Changed to a 3 wide design to match the PRintables
…embed

Theme shop tab to match printables, add dark mode support to Shopify embed

Shop tab layout
- Wrap Shopify embed in v-card (elevation 2) to match printables card style
- Add skeleton loaders while the Buy Button SDK initializes
- Add subtitle blurb above the category filter, consistent with printables tab

Dark mode support
- Add useTheme() / isDark computed to track the active Vuetify theme
- Convert SHOPIFY_OPTIONS to buildShopifyOptions(dark) so all SDK-rendered
  surfaces can be re-themed on toggle
- Theme product tile background + text (previously hardcoded white text
  with no background, invisible in light mode)
- Theme product modal background (previously always rendered white
  regardless of site theme)
- Theme cart/checkout drawer background, header, line items, and footer
  (previously always rendered light mode)
- Re-run initShopify() via a watcher on isDark so the embed re-renders
  when the user toggles theme
- Round button border-radius from 0px to 4px across product, modal, and
  cart buttons for visual consistency with printables cards

Bug fixes
- Add shopifyRenderToken generation guard in initShopify() to prevent a
  race condition where overlapping calls (e.g. theme settling shortly
  after mount) could leave the product grid partially rendered with
  missing images
- Move subtitle blurb above the category filter dropdown (was below)

Files changed:
  src/pages/StorePage.vue
…e quantity stepper

Root cause: the cart drawer and product modal are SDK singletons attached
outside shopifyContainer, not children of it. Destroying and recreating
the collection component on theme change only rebuilt the product grid —
the cart/modal never got torn down, so they stayed frozen on whatever
theme was active the first time they rendered.

- Replace destroy-and-recreate with ui.createComponent() + updateConfig()
  on a persisted component reference, so theme changes push new options
  into the cart/modal singletons in place instead of leaving them stale
- Rename initShopify() -> renderShopify() to reflect create-or-update
  behavior
- Drop the shopifyRenderToken race guard from the previous commit — no
  longer needed since we're not destroying/rebuilding DOM on each change
- Theme quantityInput (background, text, border) in both the product tile
  and modal; it was left on the SDK's static default and stayed
  unreadable regardless of theme

Files changed:
  src/pages/StorePage.vue
… embed


Root causes:
- updateConfig() on collection switches did not clear previously-rendered
  product tiles before adding the new collection's, so switching
  categories stacked the new grid below the old one instead of replacing
  it
- Theme toggles could fire overlapping async onReady() callbacks (if
  isDark settles in more than one tick), and the second createComponent()
  call landed on top of the first instead of replacing it, producing
  duplicate tiles
- buildClient() was being called fresh on every theme/collection change
  instead of once per page load, increasing exposure to the pre-existing
  "empty cart on page load" issue by triggering it on every toggle

Fixes:
- Add getShopifyUI() to bootstrap buildClient()/UI.onReady() exactly once
  and cache the promise; every render reuses the same client/UI going
  forward, matching original page-load behavior
- Remove the updateConfig() shortcut entirely — collection switches and
  theme changes now go through the same single render path
- Always destroyShopifyComponents() (collection plus any auto-spawned
  cart/toggle) and clear the container before rebuilding, so no stale DOM
  can persist across a switch
- Reintroduce a shopifyRenderToken guard so a stale async callback from a
  superseded render becomes a no-op instead of creating duplicate tiles

Files changed:
  src/pages/StorePage.vue
Accept cart/modal theme-refresh limitation per BuyButton.js docs (Option A)

Looked up the actual Shopify BuyButton.js source and docs instead of
guessing at API surface. Confirmed there is no documented destroy() or
updateConfig() method — createComponent(type, config) is the only
supported way to create or change what's rendered, and it auto-creates a
separate cart + "cart toggle" component tied to that call, not a child of
the node you pass in.

- Revert to plain clear-and-recreate (container.innerHTML + createComponent)
  for both collection switches and theme toggles — the only pattern the
  SDK actually documents
- Remove all destroy()/updateConfig()/ui.components calls added in prior
  revisions; they relied on unverified internal APIs and were producing
  empty renders more often than not
- Keep the cached client (getShopifyUI(), built once) to avoid re-risking
  the "empty cart on page load" issue on every toggle
- Keep the shopifyRenderToken guard against overlapping async renders
- Document the accepted limitation in code: product grid re-themes live
  on every toggle; cart drawer and product modal pick up a new theme on
  next page load only, since there's no documented way to re-theme those
  singletons without a full reload

Files changed:
  src/pages/StorePage.vue
Adding disclaimer to Checkout and adding Handouts COllection to menu for posters flyers etc
trying to add product decription to colleciton page.
@stopflock
stopflock merged commit e0ff5d2 into master Jul 15, 2026
1 check passed
@stopflock
stopflock deleted the store-preview-2 branch July 15, 2026 02:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants