0.0.1 • Published 6 months ago
pcx-dev v0.0.1
PCX Development Documentation
index.ts Documentation
Overview
The main TypeScript file that handles the e-commerce functionality for the PCX Markets Shopify storefront. It manages product displays, cart operations, and checkout processes using the Shopify Storefront API.
Key Constants
API Configuration
publicAccessToken
- Shopify Storefront API access token for authentication
- Keep this value private and secure
storeDomain
- Base domain for the Shopify store
- Your store's myshopify.com domain
productId
- Main product ID used for fetching product data
- Contains both Clean By The Ton and Personal Annual Footprint variants
Product Constants
Clean By The Ton:
- Base KG Value: 1000
- Base LBS Value: 2200
- Base Bottles Value: 66000
- Variant ID: Contact development team
Personal Annual Footprint:
- Base KG Value: 220
- Base LBS Value: 485
- Base Bottles Value: 4400
- Variant ID: Contact development team
Key Features
- Product price and impact calculations
- Cart management
- Gift options handling
- Quantity controls
- Checkout process
Main Components
Cart Management
- Creates and manages shopping cart items
- Handles item quantity updates
- Supports gift options with recipient details
- Calculates and updates subtotals
Product Calculations
- Handles two main products:
- Clean By The Ton
- Personal Annual Footprint
- Calculates environmental impact metrics (KG/LBS/Bottles)
- Updates prices based on quantity changes
Form Handling
- Gift option toggles
- Quantity input validation
- Required field management
- Form submission controls
API Integration
- Uses Shopify Storefront API
- Handles cart creation
- Manages checkout URL generation
- Processes product variant fetching
Usage Example
// Initialize the client
const storefrontClient = createStorefrontApiClient({
storeDomain: "your-store.myshopify.com",
apiVersion: "2024-04",
publicAccessToken: "your-access-token",
});
// Add items to cart
addToCart({
variantItemId: "product-variant-id",
qty: "1",
isGift: false,
product: productData,
isGiftEmail: null,
isGiftMessage: null,
isGiftName: null,
});
Key Functions
createLineItemsManager()
: Manages cart itemsupdateCart()
: Refreshes cart displayhandleQuantityChange()
: Updates quantities and calculationscreateCartAndAddItems()
: Creates new cart with Shopify APIgetCartWebUrl()
: Generates checkout URL
Dependencies
- @shopify/storefront-api-client
- DOM manipulation
- Custom type definitions