Skip to main content

Interface: ProductObservers

Observers for tracking product information and state.

This group of observers provides data about the current product being configured, including metadata, option blocks, views, configuration codes, and validation status. These observers are essential for building custom product displays, monitoring configuration state, and implementing business logic based on product changes.

Properties​

configurationCode​

configurationCode: Observable<undefined | string>

Current configuration code for the product.

This observable emits the configuration code that represents all selected options. The configuration code is a structured string that encodes the complete state of all selected options. For modular products, this will be empty - use modular.variantCodes instead.

Example​

window.mimeeqApp.observers.product.configurationCode.subscribe(({ newValue }) => {
  if (newValue) {
    console.log('Current configuration code:', newValue);

    // Store the configuration code for later use
    sessionStorage.setItem('lastConfig', newValue);

    // Use the configuration code to update external systems
    updateExternalSystem(productId, newValue);
  }
});

configurationShortCode​

configurationShortCode: Observable<string>

Short code for the current configuration.

This observable emits a compact code that represents the current configuration state. This short code can be used for sharing configurations, creating permalinks, or restoring configurations later.

Example​

window.mimeeqApp.observers.product.configurationShortCode.subscribe(({ newValue }) => {
  if (newValue) {
    // Update the shareable URL with the short code
    const shareUrl = `https://example.com/configure?code=${newValue}`;
    document.getElementById('share-url').value = shareUrl;

    // Update the QR code with the shareable URL
    updateQRCode(shareUrl);

    // Enable share buttons now that we have a valid short code
    document.querySelectorAll('.share-button').forEach(btn => {
      btn.disabled = false;
    });
  }
});

currentViewId​

currentViewId: Observable<string>

ID of the currently displayed view.

This observable emits the ID of the currently active view in the configurator. For 3D products, an empty value indicates the 3D model view is active. For products with 2D views, this identifies which specific 2D view is being displayed.

Example​

window.mimeeqApp.observers.product.currentViewId.subscribe(({ newValue }) => {
  // Highlight the current view in the view selector
  document.querySelectorAll('.view-thumbnail').forEach(thumb => {
    thumb.classList.toggle('active', thumb.dataset.viewId === newValue);
  });

  // Toggle 3D-specific controls based on whether 3D view is active
  const is3DViewActive = newValue === '';
  document.getElementById('3d-controls').style.display =
    is3DViewActive ? 'block' : 'none';
});

hotSpot​

hotSpot: Observable<HotSpotInfo>

Information about the currently active hotspot.

This observable emits data about the hotspot that is currently being hovered over or selected on the 3D model. Hotspots are interactive points on the model that can provide additional information or trigger configuration changes.

Example​

window.mimeeqApp.observers.product.hotSpot.subscribe(({ newValue }) => {
  if (newValue) {
    // Show hotspot tooltip at the appropriate position
    const tooltip = document.getElementById('hotspot-tooltip');
    tooltip.style.display = 'block';
    tooltip.style.left = `${newValue.dimensions.x}px`;
    tooltip.style.top = `${newValue.dimensions.y}px`;

    // Load content for this specific hotspot
    loadHotspotContent(newValue.meshId);
  } else {
    // Hide tooltip when no hotspot is active
    document.getElementById('hotspot-tooltip').style.display = 'none';
  }
});

isConfigurationCodeValid​

isConfigurationCodeValid: Observable<boolean>

Indicates whether the current configuration code is valid.

This observable emits a boolean value indicating whether all required options have been selected and the configuration is valid for ordering. This can be used to enable/disable checkout buttons or show validation warnings.

Example​

window.mimeeqApp.observers.product.isConfigurationCodeValid.subscribe(({ newValue }) => {
  // Enable/disable the "Add to Cart" button based on configuration validity
  document.getElementById('add-to-cart-btn').disabled = !newValue;

  // Show/hide validation warning
  document.getElementById('validation-warning').style.display =
    newValue ? 'none' : 'block';

  // Update validation icon
  document.getElementById('validation-icon').className =
    newValue ? 'icon-check' : 'icon-warning';
});

isLoading​

isLoading: Observable<boolean>

Indicates whether the product is currently being loaded.

This observable emits a boolean value indicating whether a product loading operation is in progress. This can be used to show loading indicators and prevent user interactions during loading.

Example​

window.mimeeqApp.observers.product.isLoading.subscribe(({ newValue }) => {
  // Show/hide loading overlay
  document.getElementById('loading-overlay').style.display =
    newValue ? 'flex' : 'none';

  // Disable/enable form controls during loading
  document.querySelectorAll('.product-control').forEach(control => {
    control.disabled = newValue;
  });
});

loader​

loader: Observable<Loader>

Loader information for the 3D scene.

This observable emits the current loading state of the 3D scene, including which assets are currently being loaded and any loading messages that should be displayed to the user.

Example​

window.mimeeqApp.observers.product.loader.subscribe(({ newValue }) => {
  // Update loading indicator
  const isLoading = newValue.isLoadingScene3d;
  document.getElementById('3d-loader').style.display =
    isLoading ? 'block' : 'none';

  // Show the current loading step
  if (isLoading && newValue.messages.length > 0) {
    const latestMessage = newValue.messages[newValue.messages.length - 1];
    document.getElementById('loading-message').textContent = latestMessage.message;
  }
});

mainProductData​

mainProductData: Observable<Nullable<SimpleProduct>>

Data for the currently selected product.

This observable emits the complete product data structure, including metadata, option blocks, views, pricing settings, and other product-specific information. This is the primary source of truth for the current product state.

Example​

window.mimeeqApp.observers.product.mainProductData.subscribe(({ newValue }) => {
  if (newValue) {
    // Update product information in the UI
    document.getElementById('product-name').textContent = newValue.metadata.name;
    document.getElementById('product-code').textContent = newValue.metadata.code;

    // Check if the product has 2D views
    const has2dViews = Array.isArray(newValue.views) && newValue.views.length > 0;
    document.getElementById('view-switcher').style.display =
      has2dViews ? 'block' : 'none';

    // Enable/disable features based on product type
    const isModular = newValue.metadata.mode === 'MODULAR';
    document.getElementById('modular-controls').style.display =
      isModular ? 'block' : 'none';
  }
});

sku​

sku: Observable<string>

SKU of the current product configuration.

This observable emits the current SKU (Stock Keeping Unit) code for the product configuration. The SKU uniquely identifies the specific variant of the product based on the selected options.

Example​

window.mimeeqApp.observers.product.sku.subscribe(({ newValue }) => {
  if (newValue) {
    // Update SKU display
    document.getElementById('product-sku').textContent = `SKU: ${newValue}`;

    // Store the SKU for order processing
    updateOrderForm('sku', newValue);
  }
});

tabs​

tabs: Observable<Nullable<ProductTab[]>>

Available tabs for the current product.

This observable emits the list of tabs available for the current product, including their content, type, and display settings. Tabs can include product information, finishes, related products, and more.

Example​

window.mimeeqApp.observers.product.tabs.subscribe(({ newValue }) => {
  if (newValue) {
    const tabsContainer = document.getElementById('product-tabs');
    tabsContainer.innerHTML = '';

    // Create tab buttons
    newValue.forEach(tab => {
      const tabButton = document.createElement('button');
      tabButton.textContent = tab.tabName;
      tabButton.classList.add('tab-button');
      tabButton.dataset.tabId = tab.id;
      tabButton.addEventListener('click', () => selectTab(tab.id));

      tabsContainer.appendChild(tabButton);
    });

    // Select the first tab by default
    if (newValue.length > 0) {
      selectTab(newValue[0].id);
    }
  }
});