Size Me Up Multiplex

Having a single button on your PDP is great, but sometimes you want to recommend sizes on a list page, or within a mix-and-match or shop-the-look section. We've got you covered, with SizeMeUp Multiplex.

Faslet's Size Me Up Virtual Assistant can be added multiple times to a single page, by simply tweaking the data passed into it.

info

The Size Me Up Multiplex is only available on custom integrations, and will not work with Shopify, WooCommerce, Lightspeed or GTM. 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 Size me up 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 the Size Me Up 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 the Size Me Up 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