Type Alias: GetTabPopular()

GetTabPopular = (configs, backgroundColor?) => Promise<PopularConfigItem[]>

Function

Retrieves data for popular product configurations to display in a tab.

This method processes a collection of popular configuration definitions and enhances them with dynamic data like images, shortcodes, and pricing. Popular configurations serve as pre-defined starting points that showcase recommended or common setups for a product.

Each configuration is validated to ensure it's compatible with the current product, and invalid configurations are automatically filtered out. The result provides everything needed to display visual options to users with accurate pricing.

Parameters

configs

PopularConfiguration[]

Array of popular configuration definitions from the product tab

backgroundColor?

string

Optional background color to use for configuration images

Returns

Promise<PopularConfigItem[]>

A promise resolving to an array of enhanced popular configuration objects

Example

// Fetch and display popular configurations in a product tab
const popularTab = productTabs.find(tab => tab.tabType === 'POPULAR_STATIC');
const popularConfigs = await window.mimeeqApp.actions.getTabPopular(
  popularTab.popularConfigurations,
  '#FFFFFF'  // White background for thumbnails
);

// Create a grid of popular configurations
const container = document.getElementById('popular-configs');
popularConfigs.forEach(config => {
  const configCard = document.createElement('div');
  configCard.className = 'config-card';
  configCard.innerHTML = `
    <img src="${config.image}" alt="Configuration">
    <div class="price">${config.price} ${state.pricing.prices.currency}</div>
    <button class="select-btn">Select</button>
  `;

  // Add click handler to select this configuration
  configCard.querySelector('.select-btn').addEventListener('click', () => {
    window.mimeeqApp.actions.selectPopularConfig(config);
  });

  container.appendChild(configCard);
});