@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

npm install @weareconceptstudio/ecommerce

Usage

Using Versioned Exports (Recommended)

// 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';

Using Named Exports

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

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

Default Export (v1 for backward compatibility)

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

Available Implementations

v1 / catalog

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

v2 / shop

• 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:

   export * from '@weareconceptstudio/new-shop-package';

3. Add export to package.json:

   "./v3": {
     "types": "./dist/v3/index.d.ts",
     "default": "./dist/v3/index.js"
   }

4. Optionally add a named export (e.g., ./new-shop)

Examples

Using Catalog (v1)

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

function App() {
	return (
		<CatalogProvider>
			<CatalogTemplate
				segments={segments}
				categories={categories}
				ingredients={ingredients}
				tags={tags}
				slug={slug}
			/>
		</CatalogProvider>
	);
}

Using Shop (v2)

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

function App() {
	return (
		<ShopProvider>
			<CategoryTemplate
				productsData={productsData}
				router={router}
				searchParams={searchParams}
				pathname={pathname}
			/>
		</ShopProvider>
	);
}

Migration Guide

From @weareconceptstudio/catalog

Before:

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

After:

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

From @weareconceptstudio/shop

Before:

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

After:

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