Skip to main content

Interface: Observers

Provides reactive streams for monitoring changes in the configurator state.

The Observers interface gives you access to real-time data streams that emit events when various aspects of the product configuration change. By subscribing to these observers, you can create dynamic interfaces that respond to user interactions, update external systems, and implement custom business logic.

Each observer is an RxJS Observable that you can subscribe to with a callback function. The callback will be executed whenever the observed value changes, with the new value (and old value) wrapped in an object passed as an argument.

Example​

// Subscribe to price changes
const priceSubscription = window.mimeeqApp.observers.pricing.prices.subscribe(({ newValue }) => {
  if (newValue) {
    console.log('New price:', newValue.price, newValue.currency);
    document.getElementById('price-display').textContent =
      `${newValue.price} ${newValue.currency}`;
  }
});

// Don't forget to unsubscribe when done to prevent memory leaks
function cleanup() {
  priceSubscription.unsubscribe();
}

Observers​

config​

config: ConfigObservers

Function

Observers for tracking configuration settings.

This group of observers provides data about the current configurator settings, including UI configuration, customer settings, basket configuration, and canvas properties.

Example​

// Adapt UI based on canvas background color
window.mimeeqApp.observers.config.canvasBackground.subscribe(({ newValue }) => {
  if (newValue) {
    const isDark = isColorDark(newValue || '#FFFFFF');
    document.documentElement.classList.toggle('dark-canvas', isDark);
  }
});

// Track customer configuration changes
window.mimeeqApp.observers.config.customerConfig.subscribe(({ newValue }) => {
  if (newValue) {
    console.log('Customer configuration:', newValue);
    updateFeatureAvailability(newValue.limits);
  }
});

history​

history: HistoryObservers

Function

Observers for tracking configuration history changes.

This group of observers allows you to monitor the history stack of configuration changes, enabling features like undo/redo buttons and tracking the user's journey through the configuration process.

Example​

// Monitor history changes to update UI controls
window.mimeeqApp.observers.history.stack.subscribe(({ newValue }) => {
  if (newValue) {
    // Update undo/redo button states based on stack position
    window.mimeeqApp.observers.history.currentElement.subscribe(({ newValue: currentIndex }) => {
      const atStart = currentIndex <= 0;
      const atEnd = currentIndex >= newValue.length - 1;

      document.getElementById('undo-btn').disabled = atStart;
      document.getElementById('redo-btn').disabled = atEnd;
    });
  }
});

misc​

misc: MiscObservers

Function

Miscellaneous observers for other configurator aspects.

This group of observers provides data about various other aspects of the configurator, including favorites, canvas properties, and 2D layers.

Example​

// Update favorites UI when collections change
window.mimeeqApp.observers.misc.favouriteCollections.subscribe(({ newValue }) => {
  if (newValue) {
    renderFavoritesMenu(newValue);
  }
});

// Adjust UI based on canvas aspect ratio
window.mimeeqApp.observers.misc.canvasAspectRatio.subscribe(({ newValue }) => {
  if (newValue) {
    document.getElementById('canvas-container').style.aspectRatio = newValue;
  }
});

modular​

modular: ModularObservers

Function

Observers specific to modular product configurations.

This group of observers provides data specific to modular products, allowing you to track selected components, snapping points, element actions, and other aspects of modular configuration.

Example​

// Monitor which element is currently selected
window.mimeeqApp.observers.modular.currentElement.subscribe(({ newValue }) => {
  if (newValue) {
    console.log('Selected element changed:', newValue);
    highlightElementInCustomUI(newValue);
  }
});

// Track products on the scene
window.mimeeqApp.observers.modular.hasProducts.subscribe(({ newValue }) => {
  document.getElementById('clear-scene').disabled = !newValue;
  document.getElementById('empty-scene-message').style.display =
    newValue ? 'none' : 'block';
});

optionSets​

optionSets: OptionSetsObservers

Function

Observers for tracking product option selections.

This group of observers allows you to monitor which options are selected for different blocks, how block groups are organized, and the state of special widgets like image uploaders.

Example​

// Monitor selected options to update external systems
window.mimeeqApp.observers.optionSets.selectedOptions.subscribe(({ newValue }) => {
  if (newValue) {
    console.log('Selected options changed:', newValue);
    updateExternalSystem(newValue);
  }
});

// Track which option groups have all required options selected
window.mimeeqApp.observers.optionSets.blockGroups.subscribe(({ newValue }) => {
  if (newValue) {
    const incompleteGroups = newValue.filter(group => group.hasErrors);
    updateValidationUI(incompleteGroups);
  }
});

pricing​

pricing: PricingObservers

Function

Observers for tracking pricing information.

This group of observers allows you to monitor price changes, quantity adjustments, price type selections, and other pricing-related aspects of the product configuration.

Example​

// Update price display when price changes
window.mimeeqApp.observers.pricing.prices.subscribe(({ newValue }) => {
  if (newValue) {
    document.getElementById('product-price').textContent =
      `${newValue.price.toFixed(2)} ${newValue.currency}`;

    document.getElementById('delivery-time').textContent =
      newValue.deliveryTime || 'Contact us for delivery information';
  }
});

// Enable/disable quantity breaks section based on available data
window.mimeeqApp.observers.pricing.prices.subscribe(({ newValue }) => {
  if (newValue) {
    const qtyBreaksSection = document.getElementById('quantity-breaks');
    if (newValue.levels && newValue.levels.length > 1) {
      qtyBreaksSection.style.display = 'block';
      renderQuantityBreaks(newValue.levels);
    } else {
      qtyBreaksSection.style.display = 'none';
    }
  }
});

product​

product: ProductObservers

Function

Observers for tracking general product information.

This group of observers provides data about the current product, including metadata, configuration codes, loader states, and tab information.

Example​

// Update product information in UI when product changes
window.mimeeqApp.observers.product.mainProductData.subscribe(({ newValue }) => {
  if (newValue) {
    document.getElementById('product-name').textContent = newValue.metadata.name;
    document.getElementById('product-description').textContent =
      newValue.metadata.description || 'No description available';
    document.getElementById('product-brand').textContent = newValue.metadata.brand;
  }
});

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