@weareconceptstudio/shop

A comprehensive e-commerce component library for React, built with styled-components and designed for flexibility and scalability.

📦 Installation

npm install @weareconceptstudio/shop

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-dom styled-components @weareconceptstudio/core @weareconceptstudio/form

🚀 Quick Start

1. Wrap your app with ShopProvider

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

function App() {
	return (
		<ShopProvider fontFamily='apercuProFont' fontFamily2='gtSuperFont'>
			{/* Your app components */}
		</ShopProvider>
	);
}

2. Use the Templates

import { CategoryTemplate } from '@weareconceptstudio/shop';
import { useRouter, useSearchParams } from 'next/navigation';

function CategoryPage({ productsData }) {
	const router = useRouter();
	const searchParams = useSearchParams();
	const pathname = usePathname();

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

📚 Components

Templates

CategoryTemplate

A complete catalog page template with filters, sorting, and pagination.

Props:

• productsData (object, required): Product data including products array, filters, and category info
• router (object, required): Next.js router instance
• searchParams (object, required): URL search parameters
• pathname (string, required): Current pathname

Example productsData structure:

{
  products: [...],
  total: 100,
  pageSize: 12,
  filters: {
    categories: [...],
    colors: [...],
    prices: [...],
    sortBy: [...]
  },
  selectedCategory: {
    id: 1,
    name: "Electronics",
    url: "/catalog/electronics"
  },
  parentCategory: null
}

ProductIndividualTemplate

A complete product detail page template.

Props:

• productData (object, required): Complete product information
• router (object, required): Next.js router instance

Components

Shop

The main catalog component with filtering and sorting capabilities.

ProductItem

Product card component for displaying products in grids.

Pagination

Pagination component with page navigation.

Breadcrumbs

Breadcrumb navigation component.

Filters

Filter panel with color, price, and category filters.

MobileFilter

Mobile-optimized filter overlay.

🎨 Customization

Custom Components via Context

You can inject custom components through the ShopProvider:

<ShopProvider
	ProductItemUserView={MyCustomUserView}
	ProductItemPublicView={MyCustomPublicView}
	ProductItemFavorite={MyCustomFavorite}
	ProductIndividualFavoriteButton={MyFavoriteButton}
>
	{children}
</ShopProvider>

Font Configuration

<ShopProvider fontFamily='YourPrimaryFont' fontFamily2='YourSecondaryFont'>
	{children}
</ShopProvider>

Display Configuration

Control the visibility of various UI elements through the ShopProvider:

Shop/Catalog Display Options

<ShopProvider
	hasPriceFilter={true} // Show/hide price filter
	hasColorFilter={true} // Show/hide color filter
	hasSortBy={true} // Show/hide sort by dropdown
	hasPagination={true} // Show/hide pagination
	hasTagInProductCard={true} // Show/hide tags in product cards
	hasShopBreadcrumb={true} // Show/hide breadcrumbs in catalog
>
	{children}
</ShopProvider>

ProductIndividual Display Options

<ShopProvider
	hasProductBreadcrumb={true} // Show/hide breadcrumbs
	hasRate={true} // Show/hide ratings/reviews summary
	hasColorAttribute={true} // Show/hide color selector
	hasSizeAttribute={true} // Show/hide size selector
	hasRegistry={true} // Show/hide registry button
	hasFavoriteButton={true} // Show/hide favorite button
	hasRelatedProducts={true} // Show/hide "You may also like" section
	hasProductImages={true} // Show/hide product images
	hasReviews={true} // Show/hide reviews section
	hasShippingInformation={true} // Show/hide shipping information
	hasMostPopular={true} // Show/hide "Most Popular" section
>
	{children}
</ShopProvider>

Example: Minimal Product Page

<ShopProvider hasRegistry={false} hasRelatedProducts={false} hasMostPopular={false} hasShippingInformation={false}>
	<ProductIndividualTemplate {...props} />
</ShopProvider>

🌐 Internationalization

The package includes translations for English, Armenian, and Russian.

import { translations } from '@weareconceptstudio/shop';

// Available translations
translations.en; // English
translations.hy; // Armenian
translations.ru; // Russian

Translation Keys

{
  shop: {
    // Catalog
    colors: 'colors',
    sortBy: 'Sort by',
    filterBy: 'Filter by:',
    browseBy: 'Browse by:',

    // Product
    addToCart: 'Add to cart',
    outOfStock: 'Out of stock!',

    // Reviews
    ratingsAndReviews: 'Ratings & reviews',

    // And more...
  }
}

🛠️ Utilities

Constants

import { BREAKPOINTS, ANIMATION, DEFAULTS } from '@weareconceptstudio/shop';

// Responsive breakpoints
BREAKPOINTS.DESKTOP; // 1024
BREAKPOINTS.TABLET; // 768
BREAKPOINTS.MOBILE; // 480

// Animation timing
ANIMATION.ADDED_TO_CART_DELAY; // 1500
ANIMATION.FADE_IN_DURATION; // 0.3
ANIMATION.FADE_IN_DELAY; // 1.5

// Default values
DEFAULTS.PAGE_SIZE; // 12
DEFAULTS.INITIAL_PAGE; // 1
DEFAULTS.MIN_QUANTITY; // 1

📖 API Reference

ShopProvider Props

| Prop | Type | Default | Description | | ------------------------------------------- | --------- | --------------- | ------------------------------------- | | Font Configuration | | | | | fontFamily | string | 'apercuProFont' | Primary font family | | fontFamily2 | string | 'gtSuperFont' | Secondary font family | | Custom Components | | | | | ProductItemUserView | Component | null | Custom user view component | | ProductItemPublicView | Component | null | Custom public view component | | ProductItemArchiveRegistryIndividual | Component | null | Custom archive registry component | | ProductItemFavorite | Component | null | Custom favorite component | | ProductIndividualFavoriteButton | Component | null | Custom favorite button | | Shop Display Configuration | | | | | hasPriceFilter | boolean | true | Show/hide price filter | | hasColorFilter | boolean | true | Show/hide color filter | | hasSortBy | boolean | true | Show/hide sort by dropdown | | hasPagination | boolean | true | Show/hide pagination | | hasTagInProductCard | boolean | true | Show/hide tags in product cards | | hasShopBreadcrumb | boolean | true | Show/hide breadcrumbs in catalog | | ProductIndividual Display Configuration | | | | | hasProductBreadcrumb | boolean | true | Show/hide breadcrumbs in product page | | hasRate | boolean | true | Show/hide ratings summary | | hasColorAttribute | boolean | true | Show/hide color selector | | hasSizeAttribute | boolean | true | Show/hide size selector | | hasRegistry | boolean | true | Show/hide registry button | | hasFavoriteButton | boolean | true | Show/hide favorite button | | hasRelatedProducts | boolean | true | Show/hide related products | | hasProductImages | boolean | true | Show/hide product images | | hasReviews | boolean | true | Show/hide reviews section | | hasShippingInformation | boolean | true | Show/hide shipping info | | hasMostPopular | boolean | true | Show/hide most popular section |

CategoryTemplate Props

| Prop | Type | Required | Description | | -------------- | ------ | -------- | ----------------------- | | productsData | object | Yes | Product and filter data | | router | object | Yes | Next.js router instance | | searchParams | object | Yes | URL search parameters | | pathname | string | Yes | Current pathname |

🎯 Examples

Basic Catalog Page

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

export default function CatalogPage() {
  const productsData = {
    products: [...],
    total: 100,
    pageSize: 12,
    filters: {
      categories: [...],
      colors: [...],
      prices: [...],
      sortBy: [...]
    },
    selectedCategory: {
      id: 1,
      name: "Category Name"
    }
  };

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

With Custom Product Card

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

const CustomProductCard = ({ product }) => <div>{/* Your custom product card */}</div>;

export default function App() {
	return (
		<ShopProvider ProductItemPublicView={CustomProductCard}>
			<CategoryTemplate {...props} />
		</ShopProvider>
	);
}

🔧 Development

Build

npm run build

Watch Mode

npm run watch

Type Checking

npm run typecheck

📝 License

ISC

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📮 Support

For issues and questions, please use the GitHub Issues page.

Made with ❤️ by Concept Studio