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

$3


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

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

$3


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

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

$3


`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

;
};
``

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