Dynamic Template Switching

Mimeeq embed templates control both UI appearance and pricing behavior. By dynamically switching between different templates, you can create custom user experiences tailored to specific scenarios. This approach allows you to leverage templates created in the Mimeeq admin panel for different contexts without duplicating configuration.

What Are Embed Templates?

Embed templates are predefined configurations that control how the Mimeeq configurator appears and behaves. They allow you to:

• Control which UI elements are visible or hidden
• Define color schemes and branding
• Set pricing behavior and display options
• Configure modal presentation and dimensions
• Specify language settings
• Include custom CSS and JavaScript
• Apply product-specific rules and behaviors

Templates are created in the Mimeeq admin panel and can be referenced by their ID when embedding the configurator.

Common Use Cases

Template switching is powerful for scenarios such as:

• Toggling between different pricing models (rent vs. buy)
• Changing UI complexity based on user expertise
• Creating multi-step configuration workflows
• Adapting the display for different devices or contexts
• Showing different options to different user segments
• Applying different language settings for international audiences
• Implementing custom themes or styling based on context
• Creating specialized interfaces for different sales channels

Prerequisites

Before implementing dynamic template switching:

1. Create your templates in the Mimeeq admin panel
2. Note the template IDs for each template you want to use
3. Ensure the necessary templates are assigned to your customer

Example 1: Rent vs. Buy Pricing Toggle

This example demonstrates how to switch between rental and purchase pricing models using different templates. We'll create a simple toggle that updates the pricing display when clicked.

<div class="pricing-toggle">
  <button id="buy-option" class="active">Purchase</button>
  <button id="rent-option">Rent</button>
</div>

<mmq-embed id="product-configurator" short-code="ABC123"></mmq-embed>

<script>
  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'product-configurator') return;

    const buyButton = document.getElementById('buy-option');
    const rentButton = document.getElementById('rent-option');
    const configurator = document.getElementById('product-configurator');

    // Template IDs from Mimeeq admin panel
    const PURCHASE_TEMPLATE_ID = 'template_purchase_12345';
    const RENTAL_TEMPLATE_ID = 'template_rental_67890';

    // Initial state - Purchase template
    configurator.setAttribute('template', PURCHASE_TEMPLATE_ID);

    // Switch to rental pricing
    rentButton.addEventListener('click', async () => {
      buyButton.classList.remove('active');
      rentButton.classList.add('active');

      // Check if we have an active cart to update
      const cartObserver = window.mimeeqApp.observers.config.basketConfig;
      const basketConfig = cartObserver.getValue().newValue;

      // Switch the template
      configurator.setAttribute('template', RENTAL_TEMPLATE_ID);

      // If there's an active cart, recalculate with the new template
      if (basketConfig && basketConfig.cartId) {
        await window.mimeeqApp.actions.recalculateCart(
          basketConfig.cartId,
          undefined, // Keep the same company
          undefined, // Keep the same price type
          undefined, // Keep the same price list
          RENTAL_TEMPLATE_ID, // New template ID
        );
      }
    });

    // Switch to purchase pricing
    buyButton.addEventListener('click', async () => {
      rentButton.classList.remove('active');
      buyButton.classList.add('active');

      // Check if we have an active cart to update
      const cartObserver = window.mimeeqApp.observers.config.basketConfig;
      const basketConfig = cartObserver.getValue().newValue;

      // Switch the template
      configurator.setAttribute('template', PURCHASE_TEMPLATE_ID);

      // If there's an active cart, recalculate with the new template
      if (basketConfig && basketConfig.cartId) {
        await window.mimeeqApp.actions.recalculateCart(
          basketConfig.cartId,
          undefined, // Keep the same company
          undefined, // Keep the same price type
          undefined, // Keep the same price list
          PURCHASE_TEMPLATE_ID, // New template ID
        );
      }
    });
  });
</script>

<style>
  .pricing-toggle {
    display: flex;
    margin-bottom: 20px;
  }

  .pricing-toggle button {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .pricing-toggle button.active {
    background: #0066cc;
    color: white;
    border-color: #0055aa;
  }
</style>

Example 2: Progressive UI Complexity

This example shows how to start with a simplified UI (minimal template) and then switch to a more detailed interface when the user is ready for more options.

<div class="configurator-container">
  <mmq-embed id="simple-config" short-code="ABC123"></mmq-embed>
  <button id="advanced-mode-btn" class="advanced-btn">Advanced Mode</button>
</div>

<script>
  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'simple-config') return;

    const configurator = document.getElementById('simple-config');
    const advancedBtn = document.getElementById('advanced-mode-btn');

    // Template IDs from Mimeeq admin panel
    const SIMPLE_TEMPLATE_ID = 'template_simple_12345'; // Has fewer options visible
    const ADVANCED_TEMPLATE_ID = 'template_advanced_67890'; // Shows all options

    // Start with simple template
    configurator.setAttribute('template', SIMPLE_TEMPLATE_ID);

    // Switch to advanced mode
    advancedBtn.addEventListener('click', () => {
      configurator.setAttribute('template', ADVANCED_TEMPLATE_ID);

      // Store the user's preference
      localStorage.setItem('preferredConfigMode', 'advanced');

      // Update button state
      advancedBtn.style.display = 'none';

      // Optional: You could add a "simple mode" button here to switch back
    });

    // Check if the user previously used advanced mode
    if (localStorage.getItem('preferredConfigMode') === 'advanced') {
      configurator.setAttribute('template', ADVANCED_TEMPLATE_ID);
      advancedBtn.style.display = 'none';
    }
  });
</script>

<style>
  .configurator-container {
    position: relative;
  }

  .advanced-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 8px 16px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

Example 3: 3D Preview to Full Configurator Modal

This example demonstrates starting with just a 3D preview (minimal template with most UI hidden) and then opening a modal with the full configurator interface when the user clicks "Configure".

<div class="preview-container">
  <mmq-embed id="product-preview" short-code="ABC123"></mmq-embed>
  <button id="configure-btn" class="configure-btn">Configure</button>
</div>

<div id="configurator-modal" class="modal">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <mmq-embed id="full-configurator" short-code="ABC123"></mmq-embed>
  </div>
</div>

<script>
  // Wait for both embeds to be ready before setting up interactions
  let previewReady = false;
  let fullConfigReady = false;

  const previewEmbed = document.getElementById('product-preview');
  const fullEmbed = document.getElementById('full-configurator');
  const modal = document.getElementById('configurator-modal');
  const configBtn = document.getElementById('configure-btn');
  const closeBtn = document.querySelector('.close-btn');

  // Template IDs from Mimeeq admin panel
  const PREVIEW_TEMPLATE_ID = 'template_preview_12345'; // Only shows 3D with minimal UI
  const FULL_TEMPLATE_ID = 'template_full_67890'; // Shows all options and controls

  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Handle preview embed ready
    if (event.detail.embedInstanceId === 'product-preview') {
      previewReady = true;
      previewEmbed.setAttribute('template', PREVIEW_TEMPLATE_ID);
    }

    // Handle full configurator embed ready
    if (event.detail.embedInstanceId === 'full-configurator') {
      fullConfigReady = true;
      fullEmbed.setAttribute('template', FULL_TEMPLATE_ID);

      // Initially hide the full configurator
      fullEmbed.hide();
    }

    // Set up interactions once both are ready
    if (previewReady && fullConfigReady) {
      setupInteractions();
    }
  });

  function setupInteractions() {
    // Handle configuration button click
    configBtn.addEventListener('click', async () => {
      // Get current configuration from preview
      const configCode = await getCurrentConfiguration(previewEmbed);

      // Show the modal
      modal.style.display = 'block';

      // Show the full configurator
      fullEmbed.show();

      // Apply the same configuration to the full configurator
      if (configCode) {
        window.mimeeqApp.actions.setConfigurationCode(configCode);
      }
    });

    // Handle close button click
    closeBtn.addEventListener('click', async () => {
      // Get the updated configuration from the full configurator
      const updatedConfig = await getCurrentConfiguration(fullEmbed);

      // Hide the modal
      modal.style.display = 'none';

      // Hide the full configurator
      fullEmbed.hide();

      // Apply the updated configuration back to the preview
      if (updatedConfig) {
        // We need to access the preview embed's mimeeqApp instance to set its configuration
        // This is a simplified example - in practice you might need more sophisticated syncing
        previewEmbed.setAttribute('configuration-code', updatedConfig);
      }
    });
  }

  // Helper function to get current configuration code
  async function getCurrentConfiguration(embedElement) {
    // This is a simplified approach - in a real implementation you might
    // want to use observers or other more reliable methods
    try {
      return window.mimeeqApp.observers.product.configurationCode.getValue().newValue;
    } catch (error) {
      console.error('Error getting configuration:', error);
      return null;
    }
  }
</script>

<style>
  .preview-container {
    position: relative;
    width: 100%;
    height: 400px;
  }

  .configure-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
  }

  .modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    margin: 2% auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    z-index: 2001;
  }
</style>

Example 4: User Role-Based Templates

This example shows how to apply different templates based on user roles, such as showing different options to dealers versus retail customers.

<mmq-embed id="role-based-configurator" short-code="ABC123"></mmq-embed>

<script>
  // Define your template IDs from Mimeeq admin panel
  const TEMPLATES = {
    guest: 'template_retail_12345', // Limited options, retail pricing
    customer: 'template_customer_67890', // Standard options, retail pricing
    dealer: 'template_dealer_24680', // All options, dealer pricing
    admin: 'template_admin_13579', // All options, cost pricing, admin features
  };

  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'role-based-configurator') return;

    const configurator = document.getElementById('role-based-configurator');

    // Determine the user's role (this would come from your authentication system)
    // For this example, we'll check if the user is logged in with Mimeeq
    checkUserRole().then((role) => {
      // Apply the appropriate template
      const templateId = TEMPLATES[role] || TEMPLATES.guest;
      configurator.setAttribute('template', templateId);

      console.log(`Applied ${role} template: ${templateId}`);
    });
  });

  // Function to determine user role
  async function checkUserRole() {
    try {
      // Check if the user is logged in with Mimeeq
      const userData = await window.mimeeqApp.authorization.getUserData();

      if (!userData || !('name' in userData)) {
        return 'guest'; // Not logged in
      }

      // Check for dealer permissions - this is an example approach
      // You would adapt this to your actual permission structure
      const hasExportPermission = await window.mimeeqApp.actions.havePermissions(['EXPORT_OBJ']);

      if (userData.isAdmin) {
        return 'admin';
      } else if (hasExportPermission) {
        return 'dealer';
      } else {
        return 'customer';
      }
    } catch (error) {
      console.error('Error checking user role:', error);
      return 'guest'; // Default to guest on error
    }
  }
</script>

Example 5: Device-Based Templates

This example demonstrates switching templates based on the device type, showing a simplified interface on mobile and a full interface on desktop.

<mmq-embed id="adaptive-configurator" short-code="ABC123"></mmq-embed>

<script>
  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'adaptive-configurator') return;

    const configurator = document.getElementById('adaptive-configurator');

    // Template IDs from Mimeeq admin panel
    const MOBILE_TEMPLATE_ID = 'template_mobile_12345'; // Simplified for mobile
    const DESKTOP_TEMPLATE_ID = 'template_desktop_67890'; // Full UI for desktop

    // Check if the device is mobile
    const isMobile =
      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
      window.innerWidth < 768;

    // Apply the appropriate template
    const templateId = isMobile ? MOBILE_TEMPLATE_ID : DESKTOP_TEMPLATE_ID;
    configurator.setAttribute('template', templateId);

    // Handle orientation changes and window resizes
    window.addEventListener('resize', () => {
      const currentlyMobile = window.innerWidth < 768;

      // Only switch templates if the device category changed
      if (currentlyMobile !== isMobile) {
        const newTemplateId = currentlyMobile ? MOBILE_TEMPLATE_ID : DESKTOP_TEMPLATE_ID;
        configurator.setAttribute('template', newTemplateId);
      }
    });
  });
</script>

Example 6: Language-Based Templates

This example shows how to switch templates based on the user's language preference, providing a fully localized experience.

<div class="language-selector">
  <button data-lang="en" class="active">English</button>
  <button data-lang="de">Deutsch</button>
  <button data-lang="fr">Français</button>
</div>

<mmq-embed id="language-configurator" short-code="ABC123"></mmq-embed>

<script>
  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'language-configurator') return;

    const configurator = document.getElementById('language-configurator');
    const languageButtons = document.querySelectorAll('.language-selector button');

    // Templates with different language settings
    const LANGUAGE_TEMPLATES = {
      en: 'template_english_12345',
      de: 'template_german_67890',
      fr: 'template_french_13579',
    };

    // Set initial language based on browser or user preferences
    const initialLang =
      localStorage.getItem('preferredLanguage') ||
      (navigator.language || navigator.userLanguage).substring(0, 2) ||
      'en';

    // Apply the appropriate template
    configurator.setAttribute('template', LANGUAGE_TEMPLATES[initialLang] || LANGUAGE_TEMPLATES.en);

    // Update button states
    languageButtons.forEach((button) => {
      if (button.dataset.lang === initialLang) {
        button.classList.add('active');
      } else {
        button.classList.remove('active');
      }
    });

    // Add click handlers for language switching
    languageButtons.forEach((button) => {
      button.addEventListener('click', () => {
        const lang = button.dataset.lang;

        // Update active button
        languageButtons.forEach((btn) => btn.classList.remove('active'));
        button.classList.add('active');

        // Store preference
        localStorage.setItem('preferredLanguage', lang);

        // Apply the template with the selected language
        configurator.setAttribute('template', LANGUAGE_TEMPLATES[lang]);
      });
    });
  });
</script>

<style>
  .language-selector {
    display: flex;
    margin-bottom: 20px;
  }

  .language-selector button {
    padding: 8px 16px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    margin-right: 10px;
    cursor: pointer;
  }

  .language-selector button.active {
    background: #0066cc;
    color: white;
    border-color: #0055aa;
  }
</style>

Example 7: Themed Templates with Custom CSS

This example demonstrates using templates with custom CSS to provide different visual themes for the configurator.

<div class="theme-selector">
  <button data-theme="default" class="active">Default</button>
  <button data-theme="dark">Dark Mode</button>
  <button data-theme="branded">Branded</button>
</div>

<mmq-embed id="themed-configurator" short-code="ABC123"></mmq-embed>

<script>
  document.addEventListener('mimeeq-app-loaded', (event) => {
    // Make sure this event is for our specific embed
    if (event.detail.embedInstanceId !== 'themed-configurator') return;

    const configurator = document.getElementById('themed-configurator');
    const themeButtons = document.querySelectorAll('.theme-selector button');

    // Templates with different themes applied through custom CSS
    const THEME_TEMPLATES = {
      default: 'template_default_12345',
      dark: 'template_dark_67890',
      branded: 'template_branded_13579',
    };

    // Set initial theme from local storage or default
    const initialTheme = localStorage.getItem('preferredTheme') || 'default';

    // Apply the appropriate template
    configurator.setAttribute('template', THEME_TEMPLATES[initialTheme]);

    // Update button states
    themeButtons.forEach((button) => {
      if (button.dataset.theme === initialTheme) {
        button.classList.add('active');
      } else {
        button.classList.remove('active');
      }
    });

    // Add click handlers for theme switching
    themeButtons.forEach((button) => {
      button.addEventListener('click', () => {
        const theme = button.dataset.theme;

        // Update active button
        themeButtons.forEach((btn) => btn.classList.remove('active'));
        button.classList.add('active');

        // Store preference
        localStorage.setItem('preferredTheme', theme);

        // Apply the themed template
        configurator.setAttribute('template', THEME_TEMPLATES[theme]);
      });
    });
  });
</script>

<style>
  .theme-selector {
    display: flex;
    margin-bottom: 20px;
  }

  .theme-selector button {
    padding: 8px 16px;
    margin-right: 10px;
    cursor: pointer;
  }

  .theme-selector button.active {
    background: #0066cc;
    color: white;
  }

  /* Theme previews in selector */
  .theme-selector button[data-theme='default'] {
    background: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
  }

  .theme-selector button[data-theme='dark'] {
    background: #333;
    border: 1px solid #666;
    color: #fff;
  }

  .theme-selector button[data-theme='branded'] {
    background: #7b1fa2;
    border: 1px solid #6a1b9a;
    color: #fff;
  }
</style>

Synchronizing Templates Between Embeds

If you have multiple embeds that need to stay in sync with the same template, you can use this approach:

function syncTemplates(templateId) {
  // Get all Mimeeq embeds on the page
  const allEmbeds = document.querySelectorAll('mmq-embed');

  // Update each embed with the same template
  allEmbeds.forEach((embed) => {
    embed.setAttribute('template', templateId);
  });

  // If you need to update carts as well
  const cartObserver = window.mimeeqApp.observers.config.basketConfig;
  const basketConfig = cartObserver.getValue().newValue;

  if (basketConfig && basketConfig.cartId) {
    window.mimeeqApp.actions.recalculateCart(
      basketConfig.cartId,
      undefined, // Keep the same company
      undefined, // Keep the same price type
      undefined, // Keep the same price list
      templateId, // New template ID
    );
  }
}

Template Properties

Embed templates can control a wide range of configurator properties:

Category	Properties
User Interface	Visibility of UI elements, buttons, controls, and panels
Branding	Colors, fonts, backgrounds, accent colors
Modal Behavior	Size, position, overflow behavior
Pricing	Pricing display, discount behavior, add-to-cart placement
Language	Interface language, translations
Custom Code	Custom CSS, JavaScript, UI templates
Product Behavior	Default configurations, option availability

For a complete list of properties that can be controlled through templates, refer to the Embed Options documentation.

Best Practices

1. Cache Configuration: When switching templates, the current configuration might be lost if not properly handled. Always save and restore the configuration code when switching templates.

2. Consider Performance: Switching templates causes the configurator to reload, which might impact performance. Use template switching sparingly and at logical points in the user journey.

3. Maintain Consistency: Ensure that all templates have consistent naming for blocks and options to prevent configuration loss when switching between templates.

4. User Feedback: Provide loading indicators when switching templates, as there might be a brief moment where the configurator reloads.

5. Handle Errors: Implement error handling when switching templates, as network issues or configuration incompatibilities might occur.

6. Test Thoroughly: Test template switching across different browsers and devices to ensure consistent behavior.

7. Document Templates: Maintain clear documentation of what each template is designed for and which properties are modified.

Technical Notes

• The template attribute directly controls which template is applied to the configurator
• For cart pricing updates, use the recalculateCart method with the appropriate template ID
• Monitor the mimeeq-app-loaded event to know when an embed is initialized and ready for template switching
• Use the configuration observers to track and synchronize configurations between templates
• Templates can include custom CSS and JavaScript that will be applied when the template is active