Lovable and Ecwid integration: Step-by-Step Guide 2025

 

Integrating Ecwid with Your Lovable Project

 

• This guide demonstrates how to integrate Ecwid into your Lovable project using TypeScript. It will show you how to create a new integration file, modify your main application file, add necessary type declarations, and configure dependencies without using a terminal.

 

Creating the Ecwid Integration File

 

• In your Lovable project directory, create a new folder named integrations inside your src directory (if it doesn’t exist yet).
• Create a file named ecwid.ts in the src/integrations folder.
• Insert the following TypeScript code into ecwid.ts to inject the Ecwid script into your page:

// src/integrations/ecwid.ts
export function loadEcwid(storeId: string): Promise {
  return new Promise((resolve, reject) => {
    // Check if the Ecwid script has already been loaded
    if (document.getElementById('ecwid-script')) {
      resolve();
      return;
    }

    // Create a new script element and set its attributes
    const script = document.createElement('script');
    script.id = 'ecwid-script';
    script.src = https://app.ecwid.com/script.js?${storeId};
    script.async = true;

    // Resolve the promise once the script has loaded
    script.onload = () => resolve();
    script.onerror = () => reject(new Error('Failed to load Ecwid script'));

    // Append the script to the document body
    document.body.appendChild(script);
  });
}

 

Modifying Your Main Application File

 

• Locate your main entry file in your Lovable project (commonly src/main.ts or src/index.ts).
• Add an import statement to include the Ecwid integration function from the file you just created.
• Call the function when the document is loaded, passing your Ecwid store ID. Replace YOURECWIDSTORE_ID with your actual store ID.

// src/main.ts (or your main entry file)
import { loadEcwid } from './integrations/ecwid';

const ECWIDSTOREID = 'YOURECWIDSTORE_ID'; // Replace with your actual Ecwid store ID

window.addEventListener('DOMContentLoaded', async () => {
  try {
    // Load the Ecwid script
    await loadEcwid(ECWIDSTOREID);
    console.log('Ecwid script loaded successfully.');
    // Initialize additional Ecwid functionalities here if needed
  } catch (error) {
    console.error('Error loading Ecwid:', error);
  }
});

 

Declaring Ecwid Global Variables (Optional)

 

• If you plan to interact with Ecwid's global objects in your TypeScript code, create a type declaration file.
• Create a new folder named types inside your src directory, then create a file named ecwid.d.ts within that folder.
• Add the following code to declare an Ecwid interface and global variable:

// src/types/ecwid.d.ts
interface Ecwid {
  // Define Ecwid properties and methods as needed
}

declare var Ecwid: Ecwid;

 

Configuring Dependencies Without a Terminal

 

• Since Lovable does not provide a terminal, you cannot use command-line tools like npm to install dependencies. Instead, include any required third-party libraries directly via CDN links.
• Open your main HTML file (typically named index.html in your project root) and add the necessary script tags.
• For example, if you need to add another library, insert its CDN link as shown below:

 

Testing the Ecwid Integration

 

• Open your Lovable project in a browser.
• Check the console to ensure that the message "Ecwid script loaded successfully." is logged.
• If there are any errors, the console will display an error message from the catch block in your main file.
• You can now integrate further Ecwid functionalities into your application as needed.