0.0.1 • Published 6 months ago

pcx-dev v0.0.1

Weekly downloads
-
License
-
Repository
-
Last release
6 months ago

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 items
  • updateCart(): Refreshes cart display
  • handleQuantityChange(): Updates quantities and calculations
  • createCartAndAddItems(): Creates new cart with Shopify API
  • getCartWebUrl(): Generates checkout URL

Dependencies

  • @shopify/storefront-api-client
  • DOM manipulation
  • Custom type definitions
0.0.1

6 months ago

0.0.0

6 months ago