Basket Embed

The Mimeeq Basket is a B2B order and RFQ (Request for Quote) system that lets customers collect configured products, review them, and submit orders. It works as both a standalone embed and as functionality within product configurator embeds.

The basket provides a complete checkout workflow: cart management, quantity adjustments, custom field collection, pricing rules (discounts and surcharges), PDF generation, and email notifications — all configurable from the admin panel.

Standalone Basket Embed

The standalone basket embed renders a persistent cart interface — typically a basket icon that opens a slide-out panel showing cart contents, totals, and the submission form.

Setup

The standalone basket embed code is generated in Admin Panel → Settings → Customer Settings → Basket → Basket Code. Unlike product embeds, it does not use embed templates.

<mmq-embed
  short-code="BSK101"
  explore-products-location="/products"
  view-basket-online-location="/cart"
  basket-for-logged-in-only
></mmq-embed>

<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

Configuration Attributes

Attribute	Type	Description
short-code	string	The basket embed short code from the admin panel
explore-products-location	string	URL for the "Explore Products" link shown in an empty basket
view-basket-online-location	string	URL for viewing submitted basket details
basket-for-logged-in-only	boolean	When present, basket is only visible to authenticated users

Basket in Product Configurators

You can also enable basket functionality inside product and modular configurator embeds. This adds an "Add to Cart" button and connects the configurator to the basket system.

To enable it, configure these settings in your embed template:

• Enable Basket — turns on basket integration for this template
• Add to Cart Placement — controls where the button appears: replaces the Finish button, or appears on the summary screen

Global Basket Embed

If you have both a standalone basket embed on your pages and basket enabled in embed templates, enable the Use Global Basket Embed option in the template. This prevents duplicate basket instances and event conflicts when both are present on the same page.

Cart Operations API

The basket system exposes a full set of actions through window.mimeeqApp.actions for programmatic cart management. This is the typical workflow:

1. Create a Cart

const { cartId } = await window.mimeeqApp.actions.createCart();

2. Add Items

Items are added with product details, pricing context, and quantity. In standard use, the configurator handles this when the user clicks "Add to Cart." For programmatic control:

await window.mimeeqApp.actions.addItemToCart({
  cartId: 'cart_123456',
  productId: 'PROD-abc',
  productName: 'Office Chair',
  quantity: 5,
  variantCode: 'PPRFX=Fabric-d10&Color-a2',
  shortCode: 'GW0NQZ',
  image: 'https://cdn.example.com/chair.jpg',
  price: 100,
  unitPrice: 20,
  currency: 'USD',
  // Pricing context
  companyId: 'company_789',
  priceType: 'WHOLESALE',
  priceListGroup: 'dealer_program_A',
  templateId: 'template_001',
});

3. Manage Cart Contents

// Get all items
const items = await window.mimeeqApp.actions.getCartItems('cart_123456');

// Handle error states
if ('code' in items) {
  // items.code: 'CART_CLOSED' | 'CART_NOT_FOUND' | 'CART_ACCESS_FORBIDDEN'
  console.log('Cart unavailable:', items.code);
  return;
}

// Remove an item
await window.mimeeqApp.actions.removeCartItem('cart_123456', 'item_789');

4. Recalculate Prices

When pricing context changes (switching company, price type, or price list), recalculate the cart to update all item prices and modifiers:

const updated = await window.mimeeqApp.actions.recalculateCart(
  'cart_123456',
  'company_dealer_789',  // Company ID
  'WHOLESALE',           // Price type
  'dealer_program_A',    // Price list group
  'template_001',        // Embed template ID
);

// updated.cartItems — array of items with new prices
// updated.priceModifiers — applied discounts/surcharges

5. Checkout

The checkout supports a multi-step flow. First, get the submission form structure (which includes any custom fields configured in the admin panel):

const formFields = await window.mimeeqApp.actions.getCartSubmissionForm('cart_123456');
// Returns CartCustomField[] — field definitions with types, validation, options

Optionally save progress incrementally:

const preResult = await window.mimeeqApp.actions.preSubmitCart('cart_123456', {
  fullName: 'Jane Smith',
  email: '[email protected]',
  companyName: 'Acme Corp',
  language: 'en',
});

// preResult.priceModifiers — may update based on submitted info

Submit the final order:

const result = await window.mimeeqApp.actions.submitCart('cart_123456', {
  fullName: 'Jane Smith',
  email: '[email protected]',
  phone: '+1 555-123-4567',
  companyName: 'Acme Corp',
  address: '123 Main St',
  language: 'en',
  submittedAt: Date.now(),
  notes: 'Deliver to loading dock B',
  parameters: [],  // Processed custom field values
});

// result.referenceCode — unique order reference (e.g. "OARTWSTS")

Events

Browser Events

Event	Fired When	Payload
mimeeq-basket-submitted	Cart is successfully submitted	{ referenceCode: string }
mimeeq-basket-updated	Item added, removed, or prices recalculated	Updated cart state

document.addEventListener('mimeeq-basket-submitted', (event) => {
  const { referenceCode } = event.detail;
  console.log('Order submitted:', referenceCode);

  // Redirect to confirmation page, trigger analytics, etc.
  window.location.href = `/order-confirmation?ref=${referenceCode}`;
});

Webhook

The basket-submitted webhook fires server-side when a basket is submitted. Configure it in Admin Panel → Settings → Webhooks.

The payload includes the full order data:

{
  "id": "CART-40e54c8a-4ce4-4c32-a299-669c6fc301cb",
  "customerId": "CUST-c62ee8d8-ad02-464f-a322-10847d9984b2",
  "status": "SUBMITTED",
  "referenceCode": "OARTWSTS",
  "items": [
    {
      "cartItemId": "ITEM-00067907-b445-40da-b40b-f69e9df0fba3",
      "productId": "PROD-7e042c5b-ead6-4e54-b0bb-827b581df5a0",
      "productName": "Product Name",
      "quantity": 5,
      "variantCode": "PPRFX=Fabric-d10&CastorsandGlides-a4&Colour-a2",
      "shortCode": "GW0NQZ",
      "image": "https://example.com/image.jpg",
      "specification": {
        "Fabric": "ONE-35",
        "Castors and Glides": "Soft Castors",
        "Colour": "Black"
      },
      "sku": "SKU-123456",
      "isModular": false,
      "note": "This is a note",
      "link": "https://example.com/product",
      "price": 100,
      "unitPrice": 20,
      "currency": "USD"
    }
  ],
  "submitter": {
    "fullName": "John Doe",
    "email": "[email protected]",
    "language": "en",
    "phone": "123-456-7890",
    "companyName": "Example Company",
    "address": "123 Example Street",
    "notes": "This is a note"
  },
  "customFields": {
    "customField1": "value1",
    "customField2": "value2"
  },
  "priceModifiers": [
    {
      "name": { "en": "Partner discount" },
      "description": { "en": "Discount above £100" },
      "mode": "PERCENTAGE",
      "type": "DISCOUNT",
      "modifierValue": 10,
      "calculatedValue": -50
    },
    {
      "name": { "en": "Delivery charge" },
      "description": { "en": "Delivery charge is 10£" },
      "mode": "FIXED",
      "type": "ADDITION",
      "modifierValue": 10,
      "calculatedValue": 10
    }
  ],
  "pdfUrl": "https://cdn.example.com/webhooks/cart/pdf/OARTWSTS.pdf"
}

For webhook setup instructions, see Webhooks.

Price Modifiers

Baskets support pricing rules that apply discounts or surcharges at the basket level. These are configured in Admin Panel → Settings → Basket → Pricing Rules and are automatically calculated based on basket value, custom field values, or other conditions.

Price modifiers appear in both the API responses and webhook payloads:

// After recalculation or in cart data
for (const modifier of priceModifiers) {
  console.log(modifier.name);          // "Partner discount"
  console.log(modifier.mode);             // "PERCENTAGE" or "FIXED"
  console.log(modifier.type);             // "DISCOUNT" or "ADDITION"
  console.log(modifier.modifierValue);    // The rule value (e.g. 10 for 10%)
  console.log(modifier.calculatedValue);  // The actual amount applied (e.g. -50)
}

Custom Fields

Basket custom fields are configured in the admin panel and collected during the submission process. They appear as part of the submission form and are included in webhook payloads and email notifications.

Use getCartSubmissionForm to retrieve the field definitions, which include type, validation rules, and options for select fields. The parameters array in the submission data carries the collected values.

For details on custom field types and how to work with them programmatically, see Custom Fields.

Basket UI Components

The basket renders through several web components that can be styled using CSS ::part() selectors:

Component	Description
mmq-basket-panel	Slide-out panel with cart contents, contact form, and totals
mmq-basket-items	List of items in the basket
mmq-basket-contact-details	Submitted contact information display
mmq-basket-preview	Lightweight order preview
mmq-cart-item	Individual cart item with image, specs, price, quantity
mmq-basket-additions	Price modifier display (discounts, surcharges)
mmq-contact-form	Checkout form with custom fields

For the full list of stylable ::part() selectors per component, see Components Reference.

Related Resources

• Embed Templates — Configure basket settings per template
• Webhooks — Server-side basket submission handling
• Custom Fields — Working with basket custom fields
• Custom Pricing Integration — How pricing interacts with the basket
• Events — Complete event reference

Admin Setup

For full business setup including email templates, PDF branding, translations, submission settings, and pricing rules, see Mimeeq Basket System on our help site. For pricing rule configuration, see Basket Pricing Rules.