Skip to content

Add ecommerce starter template with Nanostores integration#163

Draft
Fryuni wants to merge 1 commit intomasterfrom
claude/ecommerce-nanostores-croct-RDGOc
Draft

Add ecommerce starter template with Nanostores integration#163
Fryuni wants to merge 1 commit intomasterfrom
claude/ecommerce-nanostores-croct-RDGOc

Conversation

@Fryuni
Copy link
Member

@Fryuni Fryuni commented Mar 2, 2026

Summary

This PR adds a new ecommerce starter template that demonstrates how to build a personalized shopping experience using React, Vite, and Croct Nanostores. The template includes personalized banners, product recommendations, and cart tracking capabilities.

What's included

  • Complete ecommerce template with React + TypeScript + Vite setup
  • Nanostores integration for state management (announcement bar, hero banner, product recommendations, shopping cart)
  • Croct personalization via slots and content rules for dynamic content
  • Cart tracking that automatically syncs with Croct for behavior-based personalization
  • Reusable components:
    • AnnouncementBar — Personalized top-of-page banner
    • HeroBanner — Full-width hero section with CTA
    • ProductGrid — Personalized product recommendations
    • Cart — Shopping cart with add/remove/quantity management
  • Configuration schemas for managing announcement bar, hero banner, and product card content
  • Styling with a complete CSS stylesheet for a modern ecommerce UI
  • Template automation via template.json5 that handles project setup, dependency installation, and Croct resource creation

Key features

  • Automatic Vite project scaffolding if no project exists
  • Croct slot and component resource creation
  • Cart state synchronized with Croct for personalization triggers
  • Responsive product grid with hover effects
  • Fixed cart panel with item management
  • Sticky header with navigation and cart toggle

Checklist

  • Code follows project style guidelines
  • Self-reviewed all code changes
  • Documentation included (README.md with setup instructions)
  • No new warnings generated
  • Template configuration is complete and valid

https://claude.ai/code/session_01MWdQnUEgE12Y4pNCg2ZbwJ

Adds a new starter template at croct://starter/ecommerce-nanostores that
scaffolds a React + Vite ecommerce site with personalized content using
the croct-nanostores library (https://croct-nano.fryuni.dev).

Includes:
- Announcement bar, hero banner, and product recommendations via Croct slots
- Cart state management with automatic Croct tracking (trackCart)
- Auto-refresh plugin so content updates on user behavior changes
- Three Croct CMS component schemas with default English content
- Full React component set with minimal CSS styling

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

2 participants