@weareconceptstudio/ecommerce

Unified Ecommerce Package - Access all shop implementations via versioned or named exports.

Problem

Previously, you had to import from different packages:

- @weareconceptstudio/catalog for catalog implementation
- @weareconceptstudio/shop for shop implementation
- And potentially more implementations with different names

This made it hard to manage and switch between implementations.

Solution

This unified package provides a single entry point with versioned exports, so you can:

- Use versioned exports (/v1, /v2, etc.) for consistent naming
- Use named exports (/catalog, /shop) for semantic clarity
- Easily add new implementations without changing the API

Installation

``bash
npm install @weareconceptstudio/ecommerce
`

Usage

$3

`typescript
// v1 - Catalog implementation
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce/v1';

// v2 - Shop implementation
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/ecommerce/v2';

// Future implementations
import { NewShopProvider } from '@weareconceptstudio/ecommerce/v3';
`

$3

`typescript
// Catalog implementation
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce/catalog';

// Shop implementation
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/ecommerce/shop';
`

$3

`typescript
// Default export includes v1 (catalog) exports
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce';
`

Available Implementations

$3

- Package: @weareconceptstudio/catalog
- Provider: CatalogProvider
- Template: CatalogTemplate
- Use case: Original catalog implementation

$3

- Package: @weareconceptstudio/shop
- Provider: ShopProvider
- Template: CategoryTemplate
- Use case: Modern shop implementation

Adding New Implementations

When you need to add a new implementation (e.g., v3):

1. Create a new file: src/v3/index.ts
2. Re-export from the new package:
`typescript
export * from '@weareconceptstudio/new-shop-package';
`
3. Add export to package.json:
`json
"./v3": {
"types": "./dist/v3/index.d.ts",
"default": "./dist/v3/index.js"
}
`
4. Optionally add a named export (e.g., ./new-shop)

Examples

$3

`tsx
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce/v1';

function App() {
return (

segments={segments}
categories={categories}
ingredients={ingredients}
tags={tags}
slug={slug}
/>

);
}
`

$3

`tsx
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/ecommerce/v2';

function App() {
return (

productsData={productsData}
router={router}
searchParams={searchParams}
pathname={pathname}
/>

);
}
`

Migration Guide

$3

Before:

`typescript
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/catalog';
`

After:

`typescript
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce/v1';
// or
import { CatalogProvider, CatalogTemplate } from '@weareconceptstudio/ecommerce/catalog';
`

$3

Before:

`typescript
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/shop';
`

After:

`typescript
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/ecommerce/v2';
// or
import { ShopProvider, CategoryTemplate } from '@weareconceptstudio/ecommerce/shop';
``

Benefits

1. Consistent API: All implementations accessed via the same package
2. Versioned: Easy to track which implementation you're using
3. Extensible: Add new implementations without breaking changes
4. Backward Compatible: Default export maintains v1 compatibility
5. Type Safe: Full TypeScript support with proper type exports