# @evlop/shopify

A TypeScript package providing Shopify data types, React hooks, and utilities for mobile applications.

## Structure

```
src/
├── interfaces/          # TypeScript interfaces for Shopify entities
├── hooks/               # React hooks for data fetching
├── components/          # React components
├── contexts/           # React contexts
└── helpers/            # Utility functions
```

## Core Interfaces

- **ShopifyProduct** - Product data with variants, images, pricing
- **ShopifyCollection** - Collection data with SEO and actions
- **ShopifyCart** - Cart with line items and discount applications
- **ShopifyCustomer** - Customer data with addresses and metadata
- **ShopifyImage** - Image data with multiple sizes
- **ShopifyProductVariant** - Product variant with pricing and options

## Data Fetching Hooks

All hooks use `useDataSource` from `@evlop/commons` and return properly typed data:

### Products
```typescript
useProducts({ productIds: ['id1', 'id2'] })
useProducts({ collectionId: 'collection-123' })
useProducts({ search: 'shoes' })
useProducts({ sortBy: 'price-ascending', query: 'sneakers' })

useProduct({ productId: 'id' })
useProduct({ productHandle: 'handle' })
```

### Collections
```typescript
useCollections() // All collections
useCollections({ collectionIds: ['id1', 'id2'] }) // Specific collections

useCollection({ collectionId: 'id' })
useCollection({ collectionHandle: 'handle' })
```

### Metaobjects & Metafields
```typescript
useMetaobjects({ metaobjectType: 'blog_post' })
useMetaobject({ metaobjectId: 'id' })
useMetaobject({ metaobjectHandle: 'handle', metaobjectType: 'type' })

useMetafields({ resourceType: 'product', resourceId: 'id' })
useMetafields({ resourceType: 'product', resourceHandle: 'handle' })
```

## Components

- **ProductRatings** - Display product ratings and reviews
- **ProductVariantPrice** - Show variant pricing with discounts

## Contexts

- **CurrencyFormatterContext** - Currency formatting utilities
- **ProductReviewsContext** - Product review data management

## Key Features

- **Type Safety** - Full TypeScript support with detailed interfaces
- **Flexible Hooks** - Multiple options for data fetching (ID, handle, search, etc.)
- **Currency Support** - Built-in currency formatting and conversion
- **Product Reviews** - Rating and review management system
- **Consistent API** - Uniform interface across all data hooks

## Usage

```typescript
import { useProducts, useProduct, ShopifyProduct } from '@evlop/shopify';

const ProductList = () => {
  const products = useProducts({ collectionId: 'shoes' });
  return <div>{/* render products */}</div>;
};
```

All interfaces are pure TypeScript types without implementation, focusing on data structure definitions for API responses and component props.