How to Use JavaScript to Extend the Mimeeq Configurator

Mimeeq supports the ability for clients to extend our configurator logic using custom JavaScript. Below, you'll find practical examples along with code snippets to guide you through the process.

Example 1: Headless Canvas

Mimeeq’s configurator can be used in a fully or partially headless capacity. This allows you to hide our options panel and integrate your own, while controlling our canvas with simple JavaScript commands.

Practical Example

Imagine you have a sofa that comes in 10 fabrics and 5 wood leg finishes. In Mimeeq, the option block code for fabrics is called “SeatFinishes,” and the code for the fabric is “AM003”. In this scenario, you would use the following JavaScript command to mark the option block and code:

javascript

await mimeeqApp.actions.markOptionByBlockNameAndOptionCode('SeatFinishes', 'AM003');

For more code examples and for selecting multiple options, check out our developer documentation here.

Note: The block name and code are case sensitive.

Example 2: Extend Rules Logic Using External Values Such as Quantity

In this example, we create a scenario where if the quantity is greater than 10, the customer is allowed to pick a custom paint color for the legs of the armchair. Conversely, if the qty is less than 10, they can choose from only one of five predefined options.

To manage this scenario, follow these steps:

Create an option block called “Hidden JS Qty Control” in the Mimeeq app. The name can be anything you like.
Add two options to choose from, with any names and codes you prefer in this example I use "Show" and "Hide"
Toggle the “hide on specification” option to ensure this block will be hidden from cart specifications, including Mimeeq's Basket.



Note: Do not add this block to the Mimeeq option panel it will still be active and controllable but but it will be hidden from view.

Name the block something unique and easy to recognise, such as "qty10".

Use these two options as triggers to set up your rules. For more information on rules, refer to our rules help articles.

When "show" is selected, the color picker will be displayed, a material override action will be implemented, and a message widget will inform the customer about this new option.
When "hide" is selected, a different message will be displayed, the color picker will not be shown, and the standard option will be maintained.

Javascript Code

Below is the JavaScript code that listens for quantity change events. It checks if the qty is greater than or equal to 10, and selects the "show" parameter using the previously mentioned JavaScript command. Likewise, if the qty is less than 10, it selects the "hide" option.

<script>
    let subscription;
    document.addEventListener('mimeeq-3d-product-initialized', () => {
      console.log('Product initialized');
      if(!subscription) {
          subscription = mimeeqApp.observers.pricing.quantity.subscribe(({newValue, oldValue}) => {
              mimeeqApp.actions.markOptionByBlockNameAndOptionCode('qty10', newValue < 10 ? 'hide' : 'show');
          })  
      }
    })

    document.addEventListener('mimeeq-leave-product', () => {
      if(subscription) {
        subscription.unsubscribe();
        subscription = undefined;
      }
    })
</script>

Here is a working example to try, "Try to change the qty to 10 and then again back to 9."



Here is a Video recording explanation

Conclusion

Using our JavaScript API, you can customize the Mimeeq configurator to build in custom logic based on external factors. If you have a use case and need help, feel free to reach out to us using the chat widget in the bottom right corner.

Happy Coding! 💪

Updated on: 20/03/2024