Multiplex

Multiplex allows multiple Faslet size recommendation buttons to appear on the same product page designed for multi-brand retailers who need to surface fit intelligence across different brands simultaneously. It is one of the capabilities that makes Faslet uniquely suited to both mono-brand and multi-brand retail environments.

info

Multiplex is only available on custom integrations, and will not work with Shopify or Lightspeed. If you are on one of these platforms, you can migrate to a custom integration by following the Custom Integration Guide.

Differences from a normal integration

Here are the differences between Multiplex and a normal integration:

1. Smaller button

Visually, a special small button will be rendered instead of the full button, like this:

For the button:

For the result:

2. Faster Loading

The Multiplex button will onload load once it is scrolled into view. This is to prevent the page from loading slowly if you have multiple buttons on the page.

Implementation

For each button you would like to show, you will need to add a new <faslet-app> tag. It looks like this:

Note the addition of the mode="mini" attribute. This is what tells size-me to render as a mini widget.

You will need to modify the data passed in to the Faslet Global Object to support multiple products. You can remove the variants and colors fields, and replace them with a products dictionary. The new Faslet Global object will look something like this:

window._faslet = {
    sku: '',
    shopUrl: window.location.href,
    addToCart: addToCart,
    products: {
        PRODUCT_ID_1: {
            variants: [
              { size: "S", color: "red", id: "variant_id_1_1", available: true, sku: "1-123", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "S", color: "blue", id: "variant_id_1_2", available: true, sku: "1-456", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "M", color: "red", id: "variant_id_1_3", available: true, sku: "1-789", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "M", color: "blue", id: "variant_id_1_4", available: false, sku: "1-000", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "L", color: "blue", id: "variant_id_1_5", available: false, sku: "1-111", price: 59.99, imageUrl: 'https://placekitten.com' },
            ],
            colors: [
              { id: "red", name: "Dashing Red" },
              { id: "blue", name: "Stylish Blue" },
            ],
        },
        PRODUCT_ID_2: {
            variants: [
              { size: "S", color: "red", id: "variant_id_2_1", available: true, sku: "2-123", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "S", color: "blue", id: "variant_id_2_2", available: true, sku: "2-456", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "M", color: "red", id: "variant_id_2_3", available: true, sku: "2-789", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "M", color: "blue", id: "variant_id_2_4", available: false, sku: "2-000", price: 59.99, imageUrl: 'https://placekitten.com' },
              { size: "L", color: "blue", id: "variant_id_2_5", available: false, sku: "2-111", price: 59.99, imageUrl: 'https://placekitten.com' },
            ],
            colors: [
              { id: "red", name: "Dashing Red" },
              { id: "blue", name: "Stylish Blue" },
            ],
        },
        ...
    }
};

The variants and colors are no longer top level fields on the _faslet object, but now exist within a products dictionary that is keyed by Product Identifiers. Combined with passing the product-identifier to the <faslet-app> tag, this will allow size-me to render the correct variants for each product.

Note that the id field on the _faslet object is no longer required.

Buttonless mode

If you are building your own button with Buttonless mode, you can use the openWidget function to open the widget for a specific product. This function takes the product identifier as an argument.

window._faslet.openWidget('PRODUCT_ID_2');

Similarly, the onButtonShow and onButtonHidden callbacks now take the product identifier as an argument.

window._faslet = {
    onButtonShow: (productId) => {
        console.log('button loaded for product', productId);
    },
    onButtonHidden: (productId) => {
        console.log('button hidden for product', productId);
    },
    ...
};

Help

In case of any questions, please don’t hesitate to contact us on support@faslet.me