@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

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

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

Collections

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

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

Metaobjects & Metafields

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

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.