Skip to main content

Interface: ProductListObservers

Observers for tracking product list data.

This group of observers provides access to the product catalog data used by the product list embed. These observers are populated when a product list embed is mounted and provide the raw data needed to display product catalogs, browse categories, and build custom product listing interfaces.

Properties​

categories​

categories: Observable<ProductCategory[]>

The list of product categories.

This observable emits an array of product categories in flat structure. Categories can be organized into a tree using the parentProductCategoryId property on each category item.

Categories are typically used to build navigation menus and filter products by their assigned categories.

Examples​

window.mimeeqApp.observers.productList.categories.subscribe(({ newValue }) => {
  if (newValue) {
    // Build tree structure from flat array
    const tree = buildCategoryTree(newValue);

    // Render category navigation
    renderCategoryMenu(tree);
  }
});
// Simple flat list usage
window.mimeeqApp.observers.productList.categories.subscribe(({ newValue }) => {
  if (newValue) {
    const select = document.getElementById('category-filter');
    select.innerHTML = '<option value="">All Categories</option>';

    newValue.forEach(cat => {
      const option = document.createElement('option');
      option.value = cat.productCategoryId;
      option.textContent = cat.productCategoryName;
      select.appendChild(option);
    });
  }
});

isLoading​

isLoading: Observable<boolean>

Indicates whether product list data is currently being loaded.

This observable emits true when products or categories are being fetched from the server, and false when loading is complete. Use this to display loading indicators in custom product list implementations.

Example​

window.mimeeqApp.observers.productList.isLoading.subscribe(({ newValue }) => {
  const loader = document.getElementById('product-list-loader');
  loader.style.display = newValue ? 'flex' : 'none';
});

products​

products: Observable<ProductListItem[]>

The list of available products.

This observable emits an array of products available for display in the product list. The data is fetched when a product list embed mounts and may be filtered by product group if specified in the embed configuration.

Products are returned as a flat array. Filtering by category, search, or product type (modular/standard) should be performed by the consuming application.

Example​

window.mimeeqApp.observers.productList.products.subscribe(({ newValue }) => {
  if (newValue) {
    console.log(`${newValue.length} products available`);

    // Filter by category
    const categoryId = 'cat_123';
    const filtered = newValue.filter(p =>
      p.categories?.includes(categoryId)
    );

    // Render product grid
    renderProductGrid(filtered);
  }
});