Custom Ecommerce Integration

How to Use the Mimeeq Configurator with Third-Party Commerce Sites

Integrate Mimeeq Configurator seamlessly with platforms like WooCommerce, Wix, PrestaShop, X-Cart, Magento, BigCommerce, and others.

NOTE: Ensure you have an app environment set up with Mimeeq and access to the API Key. This can be found at: Admin Panel > Settings > CustomerSettings > Account.

Steps for Integration

Embed the Configurator Code:
Copy the embed code for a single product, a product group, or the full product list. Make sure to select a template with the “Basket Support” toggle enabled and choose the HTML sub-option.
Place the embed code snippet where you want the configurator to appear, such as inline on a page, in a pop-up, or an overlay panel. The choice is yours.
Explore various options within the Mimeeq dashboard's embed templates, like rendering in a modal, selecting UI elements, or using a custom UI.
For detailed guidance, visit the following links:

🔗 Configurator Embeds
🔗 Modular Configurator
🔗 Localization
🔗 Custom Translations


Handling the 'Add to Cart' Event:

When a customer finalises their configuration and clicks “Add to Cart,” specific data is returned in a payload. For details on the event and data structure, see 🔗 Selected Configuration Events.
Example Payload: 🔗 CodePen Example just click add to cart to test it
Key fields to note:

"shortCode": "UTUW6S",
  "configurationCode": "SeatFinishes-b3&BaseFinishes-a7&OwnMaterial-&UploadCustomerMaterial-",
  "productId": "PROD-839943b5-d722-477e-8031-0da8a42ed473",
  "qty": 1,
  "code": "HA_1",
  "productName": "Hilko Armchair by Leloux - Add Own Material",
  "collectionId": "",
  "selectedOptions": {
    "Seat Finishes": "Crown Velvet 30",
    "Base Finishes": "Black",
    "Own Material": "Inactive"
  },
  "isModular": false,
  "embedShortCode": "U1X94N",
  "sku": "PRODUCT-GP1/MET//",
  "publicPriceListGroups": "cf9f6f0b-e295-45c2-b0fb-a1cf05e0a20c",
  "image": "base64(64379 chars)"

API Calls for Product Details and Pricing:

Use the returned shortcode and quantity, along with the unique API key, to make secure backend API calls.
For pricing information, refer to /get-product-price-info at 🔗 Product Price Info API.
For product details, see /get-product-info at 🔗 Product Info API.
With this data, you can send the price, product description, and image to your cart, product catalogue, ERP system, or other relevant systems.

Example Process for a Store like Shopify

In platforms like Shopify, real products or variants need to be created for integration:

When the 'Add to Cart' button is clicked, the frontend queries the backend app to create a product in the commerce system.
The app passes the configuration to the Mimeeq APIs, retrieves pricing, and then creates the product using this information.
Once the product is ready, as per the commerce cart API response, the frontend adds this product to the cart.

Note: The specific flow depends on the limitations and constraints of the commerce platform.

Shopify Users: Check out our fully-featured Shopify app. To get started, click 🔗 Shopify App - Getting Started.

Utilizing the Returned Data on Your Host Site

Here are some suggestions for using the data effectively:

Check if the unique SKU exists in your product catalogue.
Update the price if necessary.
Add the updated product to your commerce catalogue or cart.
Pass a formatted product description to the catalogue.
Alternatively, create a one-time custom product directly in the cart, depending on your system's API structure and security conditions.

Suggested SKU Code Format

For unique identification, create a custom product code combining the variant code and shortcode in this format: {CODE}-{SHORTCODE}.

For any assistance or queries, feel free to contact Mimeeq support.

🔗

Updated on: 27/11/2023