Sizolution Widget Integration

Direct Code Integration

{domain} - if your store is located in Russia use domain https://widget.tardis3d.ru, if your store is placed not in Russia, use domain https://eu.sizolution.com

{yourstore} - name of your store (in one word)

1) Product page

  1. You should create object, which must exist before script is loaded

    window.sizolutionData = {
    	lang: "EU" | "DE" | "CS" | "FR" | "PL" | "RU",
      viewType: "card" | "quick", // quick view is supported
      user: {
    		/* it should be unique, not ordinals! (prefered uuid standard)
    			 (for not logged in users it should be temporary (session) id)
    		*/
        id: string,
        isLoggedIn: boolean,
    
    		// optional: (will be used for prefill)
    		gender?: 'male' | 'female',
    		height?: number, // cm
    		weight?: number, // kg
    		waist?: number, // cm,
    		hip?: number // cm
    		bust?: number //cm
      },
      product: {
    		/*
    			product article
    		*/
        id: string,
        name: string,
        image: string,
        /* 
    			 all sizes of current product(including not in stock):
    			 sizes' order in array should be the same as at the site
    			 available sizes – sizes which user can add to bag – they have value: in_stock: 1
    		*/
        sizes: {
    			// eg '40' – must be the same as in you ERP system (or as in feed)
    			// id and rendered fields have often the same value
          id: string,
    			/*
    			how user sees the size at the site, for instance '40 IT'
    			*/
          rendered: string,
    
    			/* If there are other values of current size, then you can
    				 add them as other fields here (for example German)
    				 (Key name here means how size name will be rendered in widget)
    			*/
          German?: string,
    			/*
    				is size in stock:
    				1 - in stock
    				0 - not in stock
    			*/
    			in_stock: 1 | 0
        }[]
      },
      /*
    		this function will be called when user into widget clicks button "add to bag".
    		Size id will be passed at the same format as window.sizolutionData.product.sizes[index].id
    	*/
      addToBasket: (sizeId: string) => void
    	};

    window.sizolutionData = {
        "viewType": "card",
        "user": {
            "id": "AAAEAF3SVRkOkVWdExb6AgA=",
            "isLoggedIn": false
        },
        "product": {
            "id": "OO001EMALBG6",
            "name": "Name of product",
            "image": "https://example.com/img.jpg",
            "sizes": [
                {
                    "id": "31335451885667",
                    "rendered": "S",
                    "in_stock": 0
                },
                {
                    "id": "OO001EMALBG6E38182",
                    "rendered": "M",
                    "in_stock": 1
                },
                {
                    "id": "OO001EMALBG6E40182",
                    "rendered": "L",
                    "in_stock": 1
                }
            ]
        }
    }
    
    window.sizolutionData.addToBasket = (sizeId) => {
    	// logic to add product to the basket by size id is here
    }

    Example:

  1. Insert <div id="Sizolution"></div> into the DOM at the place where button should be rendered
  1. Load script
    <script
    			src="{domain}/widgets/{yourstore}/inject/widget.js"
    			async>
    </script>

For example:

window.sizolutionObject = {
    handleDataProvided: () => new Promise(resolve => {
        // object window.sizolutionData is created
        setTimeout(() => resolve('Success!'), 10);
    })
};

1.1) (OPTIONAL) On the product card page there is often also a quick view mode in sections "you watched recently", "recommend".

When you open this window, you must

  1. Remove <div id="Sizolution">{button content}</div>, which was created on the product card
  1. Create <div id="Sizolution"></div> where the button will be displayed in the modal quick view window
  1. Update object window.sizolutionData with data of product which user has clicked
  1. Call function window.sizolutionObject.updateWidget(),which will render button and update widget

When closing this window, you must repeat the same steps to draw the button back on the product card:

  1. Remove <div id="Sizolution">{button content}</div>, который был в модальном окне быстрого просмотра
  1. Create <div id="Sizolution"></div> where the button on the product card will be displayed
  1. Update object window.sizolutionData
  1. Call function window.sizolutionObject.updateWidget()

2) (OPTIONAL) Product catalog (quick view mode)

  1. Create object
    window.sizolutionData = {
    	viewType: 'quick'
    }

  1. Load script
    <script 
    			src="{domain}/widgets/{yourstore}/inject/widget.js"
    			async>
    </script>
  1. When you open the quick view product window, do the following each time:
    1. Create <div id="Sizolution"></div> where the button will be displayed
    1. Fill object window.sizolutionData
    1. Call window.sizolutionObject.updateWidget()

3) Page when order is created (thank you page)

  1. Create object window.sizolutionData:
    type OrderInfo = {
      basket: {
    		// quantity of a particular product of a particular size
        quantity: number, 
        price: number, // final price with all discounts
    
    		/*
    			SKU identifier of a thing (for example G19082421724)
    		*/
        productId: string,
        size: string, // the size of the thing as it is in the ERP system.
        classifierText?: string, // product classifier
        currentCode?: "RU" | "EU", //currency id
        brand?: string,
        clothType?: string, // type of product by a retailer
    		// another product identifier (may be common to all colors)
        article?: string, 
        gender?: "male" | "female",
        originalPrice?: number // whithout discounts
      }[],
      id: string // order id
    };
    
    type User = {
      id: string,
      isLoggedIn: boolean
    };
    
    window.sizolutionData = {
    	user: User,
    	orderInfo: OrderInfo, // if one order with one id
    	/* 
    		if several orders to different stores (checkouts) with different order identifiers
    	*/
    	orderInfos?: OrderInfo[];
    }

  1. The script needs to be loaded ONLY after this object is available (for example, at the end of the body)

<script 
			src="{domain}/widgets/{yourstore}/inject/orderStats.js"
			async>
</script>

Stats

You can find the stats we can share with you here: Stats