How to Integrate PrestaShop with V0

Log into your PrestaShop back office (usually at your-store.com/admin). Navigate to Advanced Parameters → Webservice. At the top of the page, toggle 'Enable PrestaShop Webservice' to 'Yes' and click 'Save'. Next, click 'Add new webservice key' (the plus button). PrestaShop will generate an API key for you — or you can click 'Generate' to create a new one. Copy this key immediately as you'll add it to Vercel environment variables. For the key permissions, select the appropriate resources. For a read-only storefront, enable GET permission on: `products`, `categories`, `product_features`, `product_feature_values`, `combinations`, `images`, `stock_availables`, `taxes`, `tax_rule_groups`. If you want to handle order creation from the headless frontend, also enable POST/PUT on `carts`, `orders`, and `customers`. Save the webservice key. To verify it works, open your browser and navigate to `https://your-store.com/api/?ws_key=YOUR_API_KEY&output_format=JSON` — you should see a JSON response listing all available API endpoints. If you get a 404, ensure the webservice is enabled. If you get a 403, check the key permissions. PrestaShop's Web Services API base URL is `https://your-store.com/api/` and all endpoints are appended directly: `/api/products`, `/api/categories`, etc. The `output_format=JSON` parameter is required to get JSON instead of XML — always include it.

Create a Next.js API route at `app/api/prestashop/route.ts` that proxies requests to your PrestaShop Web Services API. PrestaShop uses HTTP Basic authentication where the API key is the username and the password is empty — encode `{API_KEY}:` in Base64 for the Authorization header. PrestaShop's JSON API responses nest data under a key matching the resource name. For example, `GET /api/products?output_format=JSON` returns `{ products: [{ id: 1, ... }] }`. For a single product, `GET /api/products/1?output_format=JSON` returns `{ product: { id: 1, ... } }`. Product data in PrestaShop is structured differently from modern e-commerce APIs. Key fields: `id` (integer), `name` (array keyed by language ID), `description` (multilingual), `price` (tax-excluded, as decimal string), `quantity` (from stock_availables link), `active` (1 or 0). Product images require separate requests to `/api/images/products/{product_id}/{image_id}`. For the storefront, the most efficient approach is to fetch products with `display=[id,name,price,description_short,active]` to limit which fields are returned (reduces payload from ~100 fields to just what you need). Use `filter[active]=1` to only return published products. Use `limit=12&page=1` for pagination. PrestaShop stores multilingual content as arrays: `name: [{ id: '1', language: { id: '1' }, value: 'Product Name' }]`. Extract the display name by finding the entry for your target language ID (usually 1 for English) using `name.find(n => n.language.id === '1')?.value`.

1// app/api/prestashop/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const PS_URL = process.env.PRESTASHOP_URL!; // e.g., https://your-store.com
5const PS_KEY = process.env.PRESTASHOP_API_KEY!;
6const LANG_ID = process.env.PRESTASHOP_LANG_ID || '1'; // default language
7
8function getAuthHeader() {
9  return 'Basic ' + Buffer.from(`${PS_KEY}:`).toString('base64');
10}
11
12function extractLangValue(field: any, langId = LANG_ID): string {
13  if (typeof field === 'string') return field;
14  if (!Array.isArray(field)) return '';
15  return field.find((f: any) => String(f?.language?.id ?? f?.attrs?.id) === langId)?.value || '';
16}
17
18async function prestashopFetch(endpoint: string, params?: Record<string, string>) {
19  const url = new URL(`${PS_URL}/api${endpoint}`);
20  url.searchParams.set('output_format', 'JSON');
21  if (params) Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
22
23  const res = await fetch(url.toString(), {
24    headers: { Authorization: getAuthHeader() },
25    next: { revalidate: 300 },
26  });
27  if (!res.ok) throw new Error(`PrestaShop API error: ${res.status}`);
28  return res.json();
29}
30
31export async function GET(request: NextRequest) {
32  const { searchParams } = new URL(request.url);
33  const resource = searchParams.get('resource') || 'products';
34  const id = searchParams.get('id') || '';
35  const page = searchParams.get('page') || '1';
36  const categoryId = searchParams.get('categoryId') || '';
37
38  try {
39    if (resource === 'products') {
40      const params: Record<string, string> = {
41        'display': '[id,name,description_short,price,id_category_default,active]',
42        'filter[active]': '1',
43        'limit': `12,${(parseInt(page) - 1) * 12}`,
44      };
45      if (categoryId) params['filter[id_category_default]'] = categoryId;
46
47      const data = await prestashopFetch('/products', params);
48      const products = (data.products || []).map((p: any) => ({
49        id: p.id,
50        name: extractLangValue(p.name),
51        shortDescription: extractLangValue(p.description_short),
52        price: parseFloat(p.price).toFixed(2),
53        imageUrl: `${PS_URL}/api/images/products/${p.id}/1?ws_key=${PS_KEY}`,
54        categoryId: p.id_category_default,
55      }));
56      return NextResponse.json({ products });
57    }
58
59    if (resource === 'product' && id) {
60      const data = await prestashopFetch(`/products/${id}`, {
61        display: 'full',
62      });
63      const p = data.product;
64      return NextResponse.json({
65        id: p.id,
66        name: extractLangValue(p.name),
67        description: extractLangValue(p.description),
68        price: parseFloat(p.price).toFixed(2),
69        reference: p.reference,
70        weight: p.weight,
71      });
72    }
73
74    if (resource === 'categories') {
75      const data = await prestashopFetch('/categories', {
76        display: '[id,name,active,id_parent]',
77        'filter[active]': '1',
78      });
79      const categories = (data.categories || []).map((c: any) => ({
80        id: c.id,
81        name: extractLangValue(c.name),
82        parentId: c.id_parent,
83      }));
84      return NextResponse.json({ categories });
85    }
86
87    return NextResponse.json({ error: 'Invalid resource' }, { status: 400 });
88  } catch (err: any) {
89    return NextResponse.json({ error: err.message }, { status: 500 });
90  }
91}

Navigate to your Vercel project → Settings → Environment Variables. Add the required variables for your PrestaShop connection. Add `PRESTASHOP_URL` — the base URL of your PrestaShop store, without a trailing slash (e.g., `https://your-store.com`). This is the URL customers use to access your store. If your store is on a subdomain like `shop.yourcompany.com`, use that URL. Add `PRESTASHOP_API_KEY` — the API key you generated in PrestaShop's Advanced Parameters → Webservice section. This is a 32-character alphanumeric string. Set it without the `NEXT_PUBLIC_` prefix as it must remain server-side only. Optionally add `PRESTASHOP_LANG_ID` — the language ID for your default display language. In PrestaShop, go to International → Languages to see your language IDs. English is typically ID 1. If your store is multilingual or a non-English store, set this to the correct language ID for your primary display language. For staging and testing, if you have a PrestaShop development or staging environment, create separate environment variables for Vercel's Preview deployments pointing to the staging PrestaShop instance. This prevents test orders and test product changes from appearing in production. After saving, redeploy and test the integration by visiting `/api/prestashop?resource=products` in your browser — you should see your actual PrestaShop products in the JSON response.

Connect the V0-generated storefront components to your PrestaShop API routes. Create the product listing page using React Server Components for initial data fetching (giving you fast server-rendered page loads) and client components for interactive features like cart state and variant selection. For the product grid, use `generateStaticParams` in Next.js to pre-render category pages at build time — fetch the category list and return each category ID as a static param. This gives fast initial page loads from Vercel's CDN without a server request for the most common browsing patterns. For product images, PrestaShop serves images directly from its Web Services API at `{PS_URL}/api/images/products/{product_id}/{image_id}?ws_key={PS_KEY}`. Since the API key is in the URL (not in a header), these image URLs are technically exposed to the client. For production, consider setting up image proxying through your Next.js API route to keep the key server-side, or use a read-only API key with image-only access. For the checkout flow, redirect users to your PrestaShop store's native cart page after adding items. Alternatively, build cart state in your Next.js app and use PrestaShop's API to create a cart (`POST /api/carts`) and then redirect to PrestaShop's checkout. The fully headless checkout (handling payment entirely in your Next.js app) requires additional complexity: integrating a payment provider and using PrestaShop's order creation API. For product search, PrestaShop's API supports search with `filter[name]=%[search_term]%` but this is case-sensitive. For better search, consider fetching all products and implementing client-side fuzzy search with a library like Fuse.js, or use PrestaShop's search module if installed.

1// Example: Product listing page as React Server Component
2// app/products/page.tsx
3import Image from 'next/image';
4
5interface Product {
6  id: number;
7  name: string;
8  shortDescription: string;
9  price: string;
10  imageUrl: string;
11}
12
13async function getProducts(categoryId?: string): Promise<Product[]> {
14  const params = new URLSearchParams({ resource: 'products' });
15  if (categoryId) params.set('categoryId', categoryId);
16  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
17  const res = await fetch(`${baseUrl}/api/prestashop?${params}`, {
18    next: { revalidate: 300 },
19  });
20  const data = await res.json();
21  return data.products || [];
22}
23
24export default async function ProductsPage({
25  searchParams,
26}: {
27  searchParams: { category?: string };
28}) {
29  const products = await getProducts(searchParams.category);
30
31  return (
32    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
33      {products.map((product) => (
34        <a key={product.id} href={`/products/${product.id}`}
35          className="group border rounded-xl overflow-hidden hover:shadow-lg transition-shadow">
36          <div className="aspect-square relative bg-gray-100">
37            <img
38              src={product.imageUrl}
39              alt={product.name}
40              className="object-cover w-full h-full group-hover:scale-105 transition-transform"
41            />
42          </div>
43          <div className="p-4">
44            <h3 className="font-semibold text-gray-900">{product.name}</h3>
45            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{product.shortDescription}</p>
46            <p className="text-lg font-bold text-gray-900 mt-2">${product.price}</p>
47          </div>
48        </a>
49      ))}
50    </div>
51  );
52}