Files
deflock/webapp
Daniel McGee 2b5e1643b5 Fix cart/collection duplication and reduce empty-cart risk in Shopify 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
2026-07-01 22:30:23 -04:00
..
2026-04-26 22:13:16 -06:00
2024-09-30 17:33:30 -05:00
2026-02-02 12:50:56 -07:00
2026-04-21 12:16:18 -06:00
2026-04-21 12:16:18 -06:00
2024-09-30 17:33:30 -05:00
2025-12-04 19:41:24 -07:00
2025-12-04 19:41:24 -07:00
2025-12-04 19:41:24 -07:00

deflock

This template should help get you started developing with Vue 3 in Vite.

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build