Skip to main content

Interface: OptionSetsObservers

Observers for tracking product options, blocks, and image widget states.

This group of observers allows you to monitor option selections, available option blocks, block groups, and the state of image/texture upload widgets. These observers are essential for building custom option selectors, tracking configuration changes, and managing image uploads.

Properties​

blockGroups​

blockGroups: Observable<BlockGroupWithStatus[]>

The organized groups of blocks with their selection status.

This observable emits an array of block groups, each containing information about the blocks within the group and their current selection status. This is useful for building UIs that organize options into logical groupings and display validation status.

Each group includes flags indicating whether all required options have been selected, making it easy to identify and highlight incomplete sections.

Example​

window.mimeeqApp.observers.optionSets.blockGroups.subscribe(({ newValue }) => {
  if (newValue) {
    const groupsContainer = document.getElementById('option-groups');
    groupsContainer.innerHTML = '';

    // Create UI elements for each group
    newValue.forEach(group => {
      const groupElement = document.createElement('div');
      groupElement.className = `option-group ${group.hasErrors ? 'incomplete' : 'complete'}`;

      // Add group header
      const header = document.createElement('h3');
      header.textContent = group.name;
      groupElement.appendChild(header);

      // List selected values in this group
      group.values.forEach(blockValue => {
        const valueElement = document.createElement('div');
        valueElement.textContent = `${blockValue.name}: ${blockValue.value}`;
        groupElement.appendChild(valueElement);
      });

      groupsContainer.appendChild(groupElement);
    });

    // Update the submission button state based on validation
    const allComplete = !newValue.some(group => group.hasErrors);
    document.getElementById('submit-btn').disabled = !allComplete;
  }
});

blocks​

blocks: Observable<PreparedBlock[]>

The available option blocks for the currently selected product.

This observable emits an array of prepared blocks that represent the structure of configurable options for the current product. Each block contains information about the options available, their display settings, and other metadata.

For regular products, this always represents all available blocks. For modular products, this represents the blocks for the currently selected component (when only one component is selected). All hidden options are filtered out from this list.

Example​

window.mimeeqApp.observers.optionSets.blocks.subscribe(({ newValue }) => {
  if (newValue) {
    const optionsContainer = document.getElementById('options-container');
    optionsContainer.innerHTML = '';

    // Generate UI for each block
    newValue.forEach(block => {
      const blockElement = createBlockElement(block);

      // Add options for this block
      if (block.options) {
        block.options.forEach(option => {
          const optionElement = createOptionElement(option);
          blockElement.appendChild(optionElement);
        });
      }

      optionsContainer.appendChild(blockElement);
    });
  }
});

imageWidgetActiveBlock​

imageWidgetActiveBlock: Observable<Nullable<ImageWidgetBlock>>

Information about the active image/texture upload widget.

This observable emits data about the currently active block that's using an image upload widget. This is used to determine which block should receive the selected image when a user chooses an image from the library.

Will be null when no image upload widget is active.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetActiveBlock.subscribe(({ newValue }) => {
  if (newValue) {
    console.log(`Image widget active for block: ${newValue.blockName}`);

    // Update UI to show which block is receiving the image
    document.getElementById('active-block-name').textContent = newValue.blockName;

    // Configure the image uploader based on block settings
    configureImageUploader({
      allowedTypes: newValue.accept || [],
      textureMode: newValue.textureMode
    });
  } else {
    // No active image block, hide or disable relevant UI elements
    document.getElementById('image-upload-area').style.display = 'none';
  }
});

imageWidgetImages​

imageWidgetImages: Observable<Nullable<ImageWidgetImage[]>>

Available images in the library for the current customer/product.

This observable emits an array of images that are available in the library for the current customer and product. These images can be selected and applied to image upload widgets.

Will be null when the library is not loaded or when there are no images available.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetImages.subscribe(({ newValue }) => {
  if (newValue) {
    const imagesContainer = document.getElementById('image-library');
    imagesContainer.innerHTML = '';

    // Generate thumbnails for each image in the library
    newValue.forEach(image => {
      const thumbnailElement = document.createElement('div');
      thumbnailElement.className = 'image-thumbnail';

      // Create the image element
      const img = document.createElement('img');
      img.src = image.s3Path || '';
      img.alt = image.fileName;
      img.loading = image.isLoading ? 'lazy' : 'eager';

      // Add click handler to select this image
      thumbnailElement.addEventListener('click', () => {
        selectImage(image.imageId);
      });

      thumbnailElement.appendChild(img);
      imagesContainer.appendChild(thumbnailElement);
    });
  } else {
    // No images available, show empty state
    document.getElementById('image-library').innerHTML =
      '<p>No images available. Upload some images to get started.</p>';
  }
});

imageWidgetIsLibraryOpen​

imageWidgetIsLibraryOpen: Observable<boolean>

Indicates whether the image library modal is currently open.

This observable emits a boolean value indicating whether the image/texture upload widget's library modal is currently open. This can be used to show/hide UI elements or adjust layouts when the library is displayed.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetIsLibraryOpen.subscribe(({ newValue }) => {
  // Toggle visibility of custom overlays or UI elements
  document.getElementById('custom-library-overlay').style.display =
    newValue ? 'block' : 'none';

  // Adjust main content area
  document.getElementById('main-content').classList.toggle('library-open', newValue);

  // Trigger analytics
  if (newValue) {
    trackEvent('image_library_opened');
  }
});

imageWidgetSelectedImage​

imageWidgetSelectedImage: Observable<Nullable<string>>

The ID of the currently selected image for the active block.

This observable emits the ID of the image that is currently selected in the image library for the active block. This can be used to highlight the selected image in custom UIs and track selection changes.

Will be null when no image is selected or when no image block is active.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetSelectedImage.subscribe(({ newValue }) => {
  // Remove highlight from all images
  document.querySelectorAll('.image-thumbnail').forEach(el => {
    el.classList.remove('selected');
  });

  if (newValue) {
    // Highlight the selected image
    const selectedEl = document.querySelector(`[data-image-id="${newValue}"]`);
    if (selectedEl) {
      selectedEl.classList.add('selected');

      // Scroll the selected image into view
      selectedEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    // Enable the "Apply" button since an image is selected
    document.getElementById('apply-image-btn').disabled = false;
  } else {
    // Disable the "Apply" button since no image is selected
    document.getElementById('apply-image-btn').disabled = true;
  }
});

imageWidgetUploadingImages​

imageWidgetUploadingImages: Observable<boolean>

Indicates whether images are currently being uploaded to the library.

This observable emits a boolean value indicating whether images are currently being uploaded to the logos library. This can be used to show loading indicators and disable UI elements during the upload process.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetUploadingImages.subscribe(({ newValue }) => {
  // Show/hide loading indicator
  document.getElementById('upload-progress').style.display =
    newValue ? 'block' : 'none';

  // Disable/enable UI elements during upload
  document.getElementById('upload-btn').disabled = newValue;
  document.getElementById('cancel-btn').disabled = !newValue;

  // Update status message
  document.getElementById('status-message').textContent =
    newValue ? 'Uploading images...' : 'Ready';

  // When the upload completes, refresh the image library
  if (newValue === `false` && previousValue === `true`) {
    refreshImageLibrary();
  }
  let previousValue = newValue;
});

imageWidgetUploadingPrintOnDemand​

imageWidgetUploadingPrintOnDemand: Observable<boolean>

Indicates whether a print-on-demand image is being uploaded.

This observable emits a boolean value indicating whether an image is currently being uploaded specifically for the print-on-demand widget. This is different from regular image uploads and may have different UI representations.

The print-on-demand widget requires more complex processing of uploaded images, including resolution checks, positioning calculations, and preview generation.

Example​

window.mimeeqApp.observers.optionSets.imageWidgetUploadingPrintOnDemand.subscribe(({ newValue }) => {
  // Show/hide the print-on-demand specific loader
  document.getElementById('pod-upload-progress').style.display =
    newValue ? 'block' : 'none';

  // Disable/enable print-on-demand specific UI elements
  document.querySelectorAll('.pod-control').forEach(el => {
    el.disabled = newValue;
  });

  // Show appropriate status message
  document.getElementById('pod-status').textContent =
    newValue ? 'Processing your design...' : 'Ready for customization';

  // When `true`, display a quality warning if the image resolution is low
  if (newValue === `true`) {
    checkAndShowQualityWarnings();
  }
});

selectedOptions​

selectedOptions: Observable<Record<string, SelectedOptions>>

The currently selected options for each product instance.

This observable emits a record where keys are instance IDs and values are arrays of selected options. For standard products, there will be a single entry with key "SINGLE_PRODUCT_ID". For modular products, there will be an entry for each product instance on the scene.

This is the core data structure that represents the complete configuration state of all product instances in the configurator.

Example​

window.mimeeqApp.observers.optionSets.selectedOptions.subscribe(({ newValue }) => {
  if (newValue) {
    // For a standard product:
    const standardOptions = newValue["SINGLE_PRODUCT_ID"];

    // For modular products:
    Object.entries(newValue).forEach(([instanceId, options]) => {
      console.log(`Instance ${instanceId} has ${options.length} options selected`);

      // Log details of each selected option
      options.forEach(option => {
        console.log(`Selected: ${option.name} for block: ${option.blockName}`);
      });
    });

    // Update external systems with the new configuration
    updateExternalSystem(newValue);
  }
});