jamey/simpleshop_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5473337894
simpleshop_theme/PHASE_9_PROGRESS.md

12 KiB
Raw Blame History

Phase 9: Storefront Integration - Progress Tracker

Last Updated: 2026-01-01 Status: Not Started Current Step: Step 0 (Preparation)

Quick Reference

  • Detailed Plan: .claude/plans/snuggly-forging-cat.md
  • Main Plan: PLAN.md (lines 643-690)
  • Spec: SPEC.md

Progress Overview

  • Step 1: Extract Shared Components
  • Step 2: Create LoadTheme Plug
  • Step 3: Create Storefront Layout
  • Step 4: Create Home Page LiveView
  • Step 5: Create Collection Page LiveView
  • Step 6: Create Product Detail Page (PDP) LiveView
  • Step 7: Create Cart Page LiveView
  • Step 8: Create Static Pages (About, Contact, Error)
  • Step 9: Wire Up CSS Cache Invalidation
  • Step 10: Add Cache Warming on Application Start
  • Step 11: Update Navigation Links
  • Step 12: Testing and Polish

Completion: 0/12 steps (0%)

Step-by-Step Progress

Step 1: Extract Shared Components

Status: ❌ Not Started Git Commit: refactor: extract shared shop components from preview pages

Goal: Move reusable preview components to components/shop/ for use in both admin and storefront

Files to Create (5):

  • lib/simpleshop_theme_web/components/shop/announcement_bar.ex
  • lib/simpleshop_theme_web/components/shop/header.ex
  • lib/simpleshop_theme_web/components/shop/footer.ex
  • lib/simpleshop_theme_web/components/shop/search_modal.ex
  • lib/simpleshop_theme_web/components/shop/product_card.ex

Files to Modify (8):

  • lib/simpleshop_theme_web/live/theme_live/preview_pages.ex - Import new components
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
  • lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

Validation:

  • Run mix test test/simpleshop_theme_web/live/theme_live_test.exs
  • Visit /admin/theme - verify all 7 preview pages still render
  • No visual regressions

Notes:

Step 2: Create LoadTheme Plug

Status: ❌ Not Started Git Commit: feat: add LoadTheme plug for public storefront

Goal: Create plug that loads theme settings and CSS for every public request

Files to Create (2):

  • lib/simpleshop_theme_web/plugs/load_theme.ex
  • test/simpleshop_theme_web/plugs/load_theme_test.exs

Files to Modify (1):

  • lib/simpleshop_theme_web/router.ex - Add plug to :browser pipeline

Validation:

  • Run mix test test/simpleshop_theme_web/plugs/load_theme_test.exs
  • Verify assigns available in requests
  • Verify CSS cached and reused

Notes:

Step 3: Create Storefront Layout

Status: ❌ Not Started Git Commit: feat: add shop layout with theme CSS injection

Goal: Create dedicated layout for public storefront with theme CSS injection

Files to Create (1):

  • lib/simpleshop_theme_web/components/layouts/shop.html.heex

Files to Modify (1):

  • lib/simpleshop_theme_web/components/layouts.ex - Add shop/1 function

Validation:

  • Inspect HTML - verify data attributes present
  • Verify CSS injection works
  • Layout compiles without errors

Notes:

Step 4: Create Home Page LiveView

Status: ❌ Not Started Git Commit: feat: add public home page with theme support

Goal: Create public homepage LiveView using real/mock data

Files to Create (3):

  • lib/simpleshop_theme_web/live/shop_live/home.ex
  • lib/simpleshop_theme_web/live/shop_live/home.html.heex
  • test/simpleshop_theme_web/live/shop_live/home_test.exs

Files to Modify (1):

  • lib/simpleshop_theme_web/router.ex - Add route: live "/", ShopLive.Home, :index

Validation:

  • Visit / - verify homepage renders
  • Theme styles applied correctly
  • Announcement bar toggle works
  • Header layout variations work
  • Sticky header toggle works
  • Products display (mock data)

Notes:

Step 5: Create Collection Page LiveView

Status: ❌ Not Started Git Commit: feat: add collection/product grid page with filtering

Goal: Create product collection/grid page with filtering and sorting

Files to Create (3):

  • lib/simpleshop_theme_web/live/shop_live/collection.ex
  • lib/simpleshop_theme_web/live/shop_live/collection.html.heex
  • test/simpleshop_theme_web/live/shop_live/collection_test.exs

Files to Modify (1):

  • lib/simpleshop_theme_web/router.ex - Add routes for collections

Validation:

  • Visit /collections and /collections/:slug
  • Filter sidebar works
  • Sort dropdown works
  • Grid columns (2, 3, 4) work
  • Card shadow setting respected
  • Hover image toggle works

Notes:

Step 6: Create Product Detail Page (PDP) LiveView

Status: ❌ Not Started Git Commit: feat: add product detail page with gallery and variants

Goal: Create individual product page with gallery, details, add to cart

Files to Create (3):

  • lib/simpleshop_theme_web/live/shop_live/product.ex
  • lib/simpleshop_theme_web/live/shop_live/product.html.heex
  • test/simpleshop_theme_web/live/shop_live/product_test.exs

Files to Modify (1):

  • lib/simpleshop_theme_web/router.ex - Add route: live "/products/:slug"

Validation:

  • Visit /products/:slug
  • Variant selection works
  • Image gallery works
  • Trust badges show/hide based on setting
  • Reviews show/hide based on setting
  • Related products show/hide based on setting
  • Add to cart shows flash
  • Gallery position (left/right) works

Notes:

Step 7: Create Cart Page LiveView

Status: ❌ Not Started Git Commit: feat: add shopping cart page with line items

Goal: Create shopping cart page with line items and checkout

Files to Create (3):

  • lib/simpleshop_theme_web/live/shop_live/cart.ex
  • lib/simpleshop_theme_web/live/shop_live/cart.html.heex
  • test/simpleshop_theme_web/live/shop_live/cart_test.exs

Files to Modify (1):

  • lib/simpleshop_theme_web/router.ex - Add route: live "/cart"

Validation:

  • Visit /cart
  • Quantity update works
  • Remove item works
  • Price calculations correct
  • Empty cart state works
  • Checkout button shows flash
  • Button style setting respected

Notes:

Step 8: Create Static Pages (About, Contact, Error)

Status: ❌ Not Started Git Commit: feat: add static pages (about, contact, 404) with theme support

Goal: Create remaining static pages

Files to Create (6):

  • lib/simpleshop_theme_web/live/shop_live/about.ex
  • lib/simpleshop_theme_web/live/shop_live/about.html.heex
  • lib/simpleshop_theme_web/live/shop_live/contact.ex
  • lib/simpleshop_theme_web/live/shop_live/contact.html.heex
  • test/simpleshop_theme_web/live/shop_live/about_test.exs
  • test/simpleshop_theme_web/live/shop_live/contact_test.exs

Files to Modify (2):

  • lib/simpleshop_theme_web/router.ex - Add routes
  • lib/simpleshop_theme_web/controllers/error_html.ex - Add 404 template (or create if missing)

Validation:

  • Visit /about - page renders
  • Visit /contact - form works
  • Visit invalid URL - 404 shows with theme
  • All pages respect theme settings

Notes:

Step 9: Wire Up CSS Cache Invalidation

Status: ❌ Not Started Git Commit: feat: add CSS cache invalidation on theme save

Goal: Ensure CSS cache invalidates when theme settings saved

Files to Modify (2):

  • lib/simpleshop_theme/settings.ex - Add cache invalidation to update_theme_settings/1
  • lib/simpleshop_theme_web/live/theme_live/index.ex - Ensure save triggers invalidation

Validation:

  • Change theme in admin
  • Save theme
  • Visit storefront
  • Verify changes reflected immediately
  • Check cache being used

Notes:

Step 10: Add Cache Warming on Application Start

Status: ❌ Not Started Git Commit: feat: add CSS cache warming on application startup

Goal: Pre-generate and cache theme CSS when app starts

Files to Modify (1):

  • lib/simpleshop_theme/application.ex - Add cache warming after supervisor start

Validation:

  • Restart application
  • Check logs for "Theme CSS cache warmed successfully"
  • Visit storefront immediately (should be fast)
  • No DB queries for CSS on first request

Notes:

Step 11: Update Navigation Links

Status: ❌ Not Started Git Commit: feat: add navigation between admin and storefront

Goal: Connect theme editor to storefront and vice versa

Files to Modify (2):

  • lib/simpleshop_theme_web/components/shop/header.ex - Add admin link when authenticated
  • lib/simpleshop_theme_web/live/theme_live/index.html.heex - Add "View Shop" link

Validation:

  • When logged in on storefront, "Edit Theme" link appears
  • Click link - navigates to theme editor
  • In theme editor, click "View Shop" link
  • Opens storefront in new tab

Notes:

Step 12: Testing and Polish

Status: ❌ Not Started Git Commit: test: add comprehensive tests and polish for Phase 9

Goal: Comprehensive testing and UX improvements

Testing Areas:

  • All storefront LiveViews tested
  • Plug behavior tested
  • Cache invalidation flow tested
  • Theme application across all pages tested
  • Responsive behavior tested

Polish Areas:

  • Loading states added
  • Error handling complete
  • Performance optimized
  • Accessibility checked
  • Mobile tested
  • Cross-browser tested

Validation:

  • Run mix test - all tests pass
  • No console errors
  • Good Lighthouse scores
  • Responsive on all devices

Notes:

Git Commit Log

Track all commits made during Phase 9 implementation:

# Commits will be added here as we progress
# Format: [YYYY-MM-DD HH:MM] <commit-hash> <commit-message>

Issues / Blockers

Track any issues encountered:

  • None yet

Future Enhancements (Post-Phase 9)

  1. Products Context - Add real product management
  2. Orders & Checkout - Cart persistence and checkout flow
  3. Custom Domain Support
  4. SEO Optimization
  5. Analytics Integration
  6. Email Templates
  7. Multi-currency Support
  8. Advanced Shipping
  9. Discount Codes
  10. Customer Accounts

Context Preservation

Key Architectural Decisions:

  • CSS applied via .shop-root class with data attributes
  • Same three-layer CSS system as theme editor
  • LoadTheme plug provides @theme_settings and @generated_css assigns
  • CSS cached in ETS via CSSCache GenServer
  • Preview data used until real Products context exists
  • Shared components in components/shop/ directory

Critical Files:

  • Theme editor: lib/simpleshop_theme_web/live/theme_live/index.ex
  • CSS generator: lib/simpleshop_theme/theme/css_generator.ex
  • Settings context: lib/simpleshop_theme/settings.ex
  • Preview data: lib/simpleshop_theme/theme/preview_data.ex

Current State (as of last update):

  • Theme editor fully functional at /admin/theme
  • 8 presets working with real-time preview
  • All customization options implemented
  • Logo/header uploads with BLOB storage working
  • SVG recoloring functional
  • No public storefront routes yet (Phase 9 not started)

How to Use This File

  1. Starting a new step: Update the step status to "🚧 In Progress"
  2. Completing files: Check off files as created/modified
  3. Finishing a step:
    • Mark step as "✅ Complete"
    • Update completion percentage
    • Make git commit with specified message
    • Add commit to Git Commit Log section
  4. Encountering issues: Add to Issues/Blockers section
  5. Taking notes: Add to Notes field for each step

For new conversations: Read this file first to understand current progress and context.