How to Integrate Bolt.new with BigCommerce

1// lib/bigcommerce.ts
2const BASE_URL = `https://api.bigcommerce.com/stores/${process.env.BIGCOMMERCE_STORE_HASH}`;
3
4export async function bigcommerceApi<T>(
5  path: string,
6  options: {
7    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
8    body?: unknown;
9    params?: Record<string, string>;
10  } = {}
11): Promise<T> {
12  const url = new URL(`${BASE_URL}${path}`);
13  if (options.params) {
14    Object.entries(options.params).forEach(([k, v]) => url.searchParams.set(k, v));
15  }
16
17  const response = await fetch(url.toString(), {
18    method: options.method ?? 'GET',
19    headers: {
20      'X-Auth-Token': process.env.BIGCOMMERCE_ACCESS_TOKEN!,
21      'Content-Type': 'application/json',
22      Accept: 'application/json',
23    },
24    body: options.body ? JSON.stringify(options.body) : undefined,
25  });
26
27  if (!response.ok) {
28    const error = await response.text();
29    throw new Error(`BigCommerce API error ${response.status}: ${error}`);
30  }
31
32  return response.json() as Promise<T>;
33}

1// app/api/products/route.ts
2import { NextResponse } from 'next/server';
3import { bigcommerceApi } from '@/lib/bigcommerce';
4
5interface BCProduct {
6  id: number;
7  name: string;
8  sku: string;
9  price: number;
10  availability: string;
11  is_visible: boolean;
12  primary_image?: { url_standard: string; url_thumbnail: string };
13  images?: Array<{ is_thumbnail: boolean; url_standard: string; url_thumbnail: string }>;
14}
15
16interface BCProductsResponse {
17  data: BCProduct[];
18  meta: { pagination: { total: number; count: number; per_page: number; current_page: number; total_pages: number } };
19}
20
21export async function GET() {
22  try {
23    const result = await bigcommerceApi<BCProductsResponse>('/v3/catalog/products', {
24      params: { include: 'images,variants', limit: '50', is_visible: 'true' },
25    });
26
27    const products = result.data.map((p) => ({
28      id: p.id,
29      name: p.name,
30      sku: p.sku,
31      price: p.price,
32      availability: p.availability,
33      thumbnail: p.images?.find((img) => img.is_thumbnail)?.url_standard ?? '',
34    }));
35
36    return NextResponse.json({ products, total: result.meta.pagination.total });
37  } catch (error) {
38    return NextResponse.json({ error: 'Failed to fetch products' }, { status: 500 });
39  }
40}

1// hooks/useCart.ts
2import { useState, useCallback } from 'react';
3
4const STORE_DOMAIN = `https://store-${process.env.NEXT_PUBLIC_BC_STORE_HASH}.mybigcommerce.com`;
5
6export function useCart() {
7  const [cartId, setCartId] = useState<string | null>(
8    typeof window !== 'undefined' ? localStorage.getItem('bc_cart_id') : null
9  );
10  const [itemCount, setItemCount] = useState(0);
11  const [checkoutUrl, setCheckoutUrl] = useState<string | null>(null);
12
13  const addToCart = useCallback(async (variantId: number, productId: number, quantity = 1) => {
14    const lineItem = { quantity, product_id: productId, variant_id: variantId };
15
16    let response;
17    if (!cartId) {
18      response = await fetch(`${STORE_DOMAIN}/api/storefront/carts`, {
19        method: 'POST',
20        headers: { 'Content-Type': 'application/json' },
21        body: JSON.stringify({ line_items: [lineItem] }),
22      });
23    } else {
24      response = await fetch(`${STORE_DOMAIN}/api/storefront/carts/${cartId}/items`, {
25        method: 'POST',
26        headers: { 'Content-Type': 'application/json' },
27        body: JSON.stringify({ line_items: [lineItem] }),
28      });
29    }
30
31    if (!response.ok) throw new Error('Failed to update cart');
32    const cart = await response.json();
33
34    const newCartId = cart.id;
35    localStorage.setItem('bc_cart_id', newCartId);
36    setCartId(newCartId);
37    setItemCount(cart.line_items?.physical_items?.reduce((sum: number, i: { quantity: number }) => sum + i.quantity, 0) ?? 0);
38    setCheckoutUrl(cart.redirect_urls?.checkout_url ?? null);
39  }, [cartId]);
40
41  return { cartId, itemCount, checkoutUrl, addToCart };
42}

1// app/api/webhooks/bigcommerce/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface BigCommerceWebhookPayload {
5  scope: string;
6  store_id: string;
7  data: {
8    type?: string;
9    id?: number;
10    status?: { previous_status_id?: number; new_status_id?: number };
11    amount?: { amount?: number; currency_code?: string };
12  };
13  hash: string;
14  created_at: number;
15  producer: string;
16}
17
18export async function POST(request: NextRequest) {
19  const payload: BigCommerceWebhookPayload = await request.json();
20
21  switch (payload.scope) {
22    case 'store/order/created':
23      console.log(`New order #${payload.data.id} created`);
24      // TODO: send confirmation email, update inventory, etc.
25      break;
26
27    case 'store/order/statusUpdated':
28      console.log(`Order #${payload.data.id} status updated to ${payload.data.status?.new_status_id}`);
29      break;
30
31    case 'store/order/refund/created':
32      console.log(`Refund of ${payload.data.amount?.amount} ${payload.data.amount?.currency_code} for order #${payload.data.id}`);
33      break;
34
35    default:
36      console.log(`Unhandled BigCommerce event: ${payload.scope}`);
37  }
38
39  // Always return 200 quickly — BigCommerce retries on non-200 responses
40  return NextResponse.json({ received: true });
41}