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
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
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
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
* 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>
* use new df map
* close button top-right, link to same position in new map, use localStorage for modal dismissal
* update map image, iframe detection ignores new map modal
* update embed instructions
* pretty banner
* privacy policy update - routing
* launch the map language
* header stuff
* change donate link
* remove new map notice bc 301 on cf
* use user agent for alpr_counts
* news -> footnote4a
* remove blog scraper
* Added "view image" button, if a wikimedia commons tag is present.
* show thumbnail, prevent 'LPR LPR'
---------
Co-authored-by: Will Freeman <hohosanta@me.com>
Daniel McGee