+ setIsCartOpen(true)}
+ />
+
+ setIsCartOpen(false)} />
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/CartDrawer.tsx b/shopify-vite-react-ts/src/components/CartDrawer.tsx
new file mode 100644
index 0000000..444f546
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/CartDrawer.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { X, Plus, Minus, ShoppingBag } from 'lucide-react';
+import { useCartContext } from '../hooks/useCartContext';
+import { formatPrice } from '../utils/shopify';
+
+interface CartDrawerProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+const CartDrawer: React.FC
+
+
+
+
+
+
+
+ );
+};
+
+export default CartDrawer;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/Header.tsx b/shopify-vite-react-ts/src/components/Header.tsx
new file mode 100644
index 0000000..3cb1e61
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/Header.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { ShoppingCart } from 'lucide-react';
+
+interface HeaderProps {
+ cartQuantity: number;
+ onCartClick: () => void;
+}
+
+const Header: React.FC
+
+
+ Shopping Cart
+ +
+ {!cart || cart.lines.nodes.length === 0 ? (
+
+
+ {cart && cart.lines.nodes.length > 0 && (
+
+
+ ) : (
+ Your cart is empty
+Add some products to get started
+
+ {cart.lines.nodes.map((line) => (
+
+ )}
+
+
+ ))}
+
+ {line.merchandise.product.featuredImage ? (
+ 
+ ) : (
+
+
+
+ No image
+
+ )}
+
+
+
+ + {line.merchandise.product.title} +
+ {line.merchandise.selectedOptions.map((option) => ( ++ {option.name}: {option.value} +
+ ))} ++ {formatPrice(line.merchandise.price)} +
+
+
+
+ {line.quantity}
+
+
+
+
+
+
+
+ )}
+
+ Subtotal
+
+ {formatPrice(cart.cost.subtotalAmount)}
+
+
+
+
+ Total items
+ {cart.totalQuantity}
+
+
+
+
+ + Shipping and taxes calculated at checkout +
+
+
+
+
+
+
+
+
+ MockStore
+
+
+ {vendor && (
+
+ );
+};
+
+export default ProductDetails;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/ProductImageGallery.tsx b/shopify-vite-react-ts/src/components/ProductImageGallery.tsx
new file mode 100644
index 0000000..c243ec9
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/ProductImageGallery.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { ShopifyProduct } from '../types/shopify';
+
+type ProductImage = ShopifyProduct['images']['nodes'][0];
+
+interface ProductImageGalleryProps {
+ images: ProductImage[];
+ productTitle: string;
+ selectedImage: number;
+ onImageSelect: (index: number) => void;
+}
+
+const ProductImageGallery: React.FC{vendor}
+ )} + ++ {title} +
+ +
+
+
+ {description && (
+
+
+ {formatPrice(currentVariant.price)}
+
+ {isOnSale && currentVariant.compareAtPrice && (
+
+ {formatPrice(currentVariant.compareAtPrice)}
+
+ )}
+ {isOnSale && (
+
+ Sale
+
+ )}
+
+ {!isProductAvailable && (
+ Out of Stock
+ )} +
+
+ )}
+
+ {variants.length > 1 && (
+ {description}
+
+
+ )}
+
+ Options
+
+ {variants.map((variant: ProductVariant, index: number) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ProductImageGallery;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/QuantitySelector.tsx b/shopify-vite-react-ts/src/components/QuantitySelector.tsx
new file mode 100644
index 0000000..058fe53
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/QuantitySelector.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface QuantitySelectorProps {
+ quantity: number;
+ onQuantityChange: (quantity: number) => void;
+}
+
+const QuantitySelector: React.FC
+ {images[selectedImage] ? (
+ ![{images[selectedImage].altText]({images[selectedImage].url})
+ ) : (
+
+
+ {images.length > 1 && (
+
+ No image
+
+ )}
+
+ {images.map((image, index) => (
+
+ ))}
+
+ )}
+
+
+
+ );
+};
+
+export default QuantitySelector;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/ShopifySetupGuide.tsx b/shopify-vite-react-ts/src/components/ShopifySetupGuide.tsx
new file mode 100644
index 0000000..6e07e73
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/ShopifySetupGuide.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import { Store, ExternalLink, Copy, CheckCircle } from 'lucide-react';
+
+const ShopifySetupGuide: React.FC = () => {
+ const [copied, setCopied] = React.useState(false);
+
+ const envExample = `VITE_SHOPIFY_STORE_URL=fakestore-ai.myshopify.com
+VITE_SHOPIFY_API_VERSION=2025-07`;
+
+ const copyToClipboard = async () => {
+ try {
+ await navigator.clipboard.writeText(envExample);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ console.error('Failed to copy to clipboard:', error);
+ }
+ };
+
+ return (
+
+
+ {quantity}
+
+
+
+
+ );
+};
+
+export default ShopifySetupGuide;
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/components/StateComponents.tsx b/shopify-vite-react-ts/src/components/StateComponents.tsx
new file mode 100644
index 0000000..0ad6918
--- /dev/null
+++ b/shopify-vite-react-ts/src/components/StateComponents.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Store } from 'lucide-react';
+
+export const LoadingState: React.FC = () => (
+
+
+
+
+
+
+
+ + Connect Your Shopify Store +
++ To get started, you'll need to configure your Shopify store URL +
+
+
+
+
+
+
+
+ 1
+
+
+
+ + Get Your Shopify Store URL +
++ If you don't have a Shopify store yet, create one for free. If you already have a store, + find your store URL in your Shopify Admin. +
+ +
+
+
+
+ 2
+
+
+
+ + Find Your Store URL +
+
+ In your Shopify Admin, go to Settings → Domains.
+ Your store URL will look like your-store-name.myshopify.com
+
+
+
+ Note: Use only the domain part (e.g., your-store-name.myshopify.com),
+ not the full URL with https://
+
+
+
+ 3
+
+
+
+ + Configure Environment Variables +
+
+ Create or update your .env file
+ in the root of your project with the following:
+
+
+
+ {envExample}
+
+
+
+ Replace fakestore-ai.myshopify.com with your actual Shopify store URL
+
+
+
+
+ Important Notes:
+-
+
- • This template uses Shopify's Tokenless API (no private keys required) +
- • Your store must have products and collections to see content +
- • The API version 2025-07 or newer is required for full functionality +
+
+
+);
+
+interface ErrorStateProps {
+ error: string;
+}
+
+export const ErrorState: React.FC
+
+);
+
+export const EmptyState: React.FC = () => (
+
+
+ ⚠️
+ Something went wrong
+{error}
+
+
+);
\ No newline at end of file
diff --git a/shopify-vite-react-ts/src/context/CartContext.tsx b/shopify-vite-react-ts/src/context/CartContext.tsx
new file mode 100644
index 0000000..b2e924a
--- /dev/null
+++ b/shopify-vite-react-ts/src/context/CartContext.tsx
@@ -0,0 +1,290 @@
+import React, { createContext, useEffect, useState, ReactNode } from 'react';
+import { ShopifyCart, CartLineInput, ShopifyProduct } from '../types/shopify';
+import { shopifyFetch, getCartId, setCartId, removeCartId, isShopifyConfigured, createCheckoutPermalink } from '../utils/shopify';
+import {
+ CREATE_CART,
+ GET_CART,
+ ADD_TO_CART,
+ UPDATE_CART_LINES,
+ REMOVE_FROM_CART,
+} from '../graphql/queries';
+
+interface CartContextType {
+ cart: ShopifyCart | null;
+ loading: boolean;
+ error: string | null;
+ addToCart: (lines: CartLineInput[]) => Promise
+
+ No Products Found
+Please add products to your Shopify store.
+