How to Integrate Lovable with PrestaShop

Log into your PrestaShop admin panel and navigate to Advanced Parameters → Webservice. If you do not see this menu item, ensure your PrestaShop version supports the Web Service feature (version 1.5 and above). On the Webservice page, toggle 'Enable PrestaShop Webservice' to Yes if it is not already enabled. Then click 'Add new webservice key'. On the key creation form, the 'Key' field can be auto-generated by clicking the 'Generate' button — this creates a 32-character alphanumeric key that is your API authentication credential. Fill in a description like 'Lovable Frontend'. Under Permissions, select the resources your Lovable app needs to access. For a read-only product catalog, check the GET permission for 'products', 'categories', 'images', and 'languages'. For order lookup, also check GET for 'orders' and 'customers'. Check only the minimum permissions your integration needs. Click Save to create the key. Note down the 32-character key — it is displayed on the key creation page and in the key list afterward so you can retrieve it later if needed.

Open your Lovable project and click the '+' icon next to the Preview to open the Cloud tab. Navigate to the Secrets section in the Cloud panel. Add two secrets: PRESTASHOP_API_KEY with your 32-character Web Service key as the value, and PRESTASHOP_STORE_URL with your store's base URL — for example https://mystore.com — with no trailing slash. The PRESTASHOP_STORE_URL is technically a public value but storing it as a secret makes your Edge Function environment-flexible, so you can switch between staging and production stores without code changes. PrestaShop's Web Service uses HTTP Basic Auth where the API key is the username and the password is empty — your Edge Function will encode this as Base64. These secrets are encrypted at rest and only accessible from Deno Edge Functions, never from your React components. Lovable's SOC 2 Type II certified infrastructure ensures your PrestaShop API key is handled with production-grade security.

Ask Lovable to create a Supabase Edge Function that proxies requests to your PrestaShop Web Service API and handles XML-to-JSON conversion. This is the most technically involved part of the integration because PrestaShop returns XML, not JSON. Deno does not have a built-in XML parser, but you can use a lightweight approach with the DOMParser available in Deno's Web API, or import an XML parsing library from deno.land/x. The Edge Function should accept a 'resource' parameter (e.g., products, categories, orders) and optional 'id' and 'filter' parameters. It builds the PrestaShop API URL as PRESTASHOP_STORE_URL + /api/ + resource with output_format=JSON appended — PrestaShop Web Service actually supports JSON output via the output_format=JSON query parameter, which is far simpler than parsing XML. Always use output_format=JSON to avoid the XML parsing complexity entirely. The Edge Function constructs a Basic Auth header by Base64 encoding the API key with a colon and empty password, then forwards the request and returns the JSON response.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  try {
14    const apiKey = Deno.env.get("PRESTASHOP_API_KEY");
15    const storeUrl = Deno.env.get("PRESTASHOP_STORE_URL");
16
17    if (!apiKey || !storeUrl) {
18      return new Response(
19        JSON.stringify({ error: "PrestaShop credentials not configured" }),
20        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
21      );
22    }
23
24    const url = new URL(req.url);
25    const resource = url.searchParams.get("resource") || "products";
26    const id = url.searchParams.get("id");
27    const limit = url.searchParams.get("limit") || "20";
28
29    let psPath = `/api/${resource}`;
30    if (id) psPath += `/${id}`;
31
32    const psUrl = new URL(`${storeUrl}${psPath}`);
33    psUrl.searchParams.set("output_format", "JSON");
34    psUrl.searchParams.set("limit", limit);
35
36    // Forward any filter parameters (PrestaShop filter syntax: filter[field]=value)
37    url.searchParams.forEach((value, key) => {
38      if (key.startsWith("filter")) {
39        psUrl.searchParams.set(key, value);
40      }
41    });
42
43    // PrestaShop Basic Auth: API key as username, empty password
44    const credentials = btoa(`${apiKey}:`);
45
46    const response = await fetch(psUrl.toString(), {
47      headers: {
48        "Authorization": `Basic ${credentials}`,
49        "Accept": "application/json",
50      },
51    });
52
53    if (!response.ok) {
54      const text = await response.text();
55      return new Response(
56        JSON.stringify({ error: `PrestaShop returned ${response.status}`, detail: text }),
57        { status: response.status, headers: { ...corsHeaders, "Content-Type": "application/json" } }
58      );
59    }
60
61    const data = await response.json();
62    return new Response(JSON.stringify(data), {
63      headers: { ...corsHeaders, "Content-Type": "application/json" },
64    });
65  } catch (error) {
66    return new Response(
67      JSON.stringify({ error: error.message }),
68      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
69    );
70  }
71});

With the Edge Function deployed, ask Lovable to build a product catalog React component. PrestaShop's product API response structure wraps items in the resource name as a key — for example, calling /api/products returns { products: [ { id, name, price, ... } ] }. When requesting a single product by ID, the response is { product: { ... } }. PrestaShop multilingual fields (name, description, meta_title) are returned as arrays of language objects: [ { id: 1, value: 'Product Name in French' }, { id: 2, value: 'Product Name in English' } ]. Your React component needs to select the correct language by matching language ID to the user's preferred language. Product images are separate resources — call /api/images/products/{product_id} to get image URLs. Ask Lovable to create a component that fetches the product list, then fetches images for each product, and displays them in a responsive grid with name (using the first language variant), price formatted with the store's currency, and stock availability.

PrestaShop images are served through a dedicated image API separate from the product data endpoint. The URL structure for product images is: STORE_URL/api/images/products/PRODUCT_ID/IMAGE_ID where IMAGE_ID starts from 1. When you request a product's full details by ID (/api/products/{id}?output_format=JSON), the response includes an associations.images array listing all image IDs for that product. For the product listing page, you can shortcut this by using the image URL pattern directly with image ID 1 for the main image, then fetch additional images only on the product detail page. For language handling, fetch the available languages from /api/languages?output_format=JSON to get the mapping between language IDs and language codes (e.g., 1 = fr, 2 = en). Store the current language preference in React state or local storage. When displaying multilingual fields, filter the language array by the matching language ID. Lovable can help generate a custom hook called usePrestaShopLanguage that reads the browser's navigator.language, maps it to a PrestaShop language ID, and exports a helper function to extract the correct translation from any multilingual field.