build your own string®

Javascript functions

Build Your Own should be integrated in an iframe and you have access to the article list for the design via Javascript.

This is how it works in short.

BYO sends an event, "byoLoaded", to its parent window when all necessary assets are loaded.

You can choose to activate a cart button in BYO by sending an "enableCart" event to BYO. When the cart is clicked it will post a list of all articles in the design to its partent window.

Every time the article list is changed BYO posts a message "updateDesign" with the full list of articles.

Wait for BYO to load

BYO will post a message when ready to activate the cart function. This will happen before the full page is loaded.

'event': 'byoLoaded'

This is an example how to listen for this:

window.addEventListener('message', handleLoad, true);

Activate the cart function in BYO

Post "enableCart" to the iframe via window.postMessage. BYO only accepts this call after the "byoLoaded" event is sent.

Sample code

document.querySelector('iframe').contentWindow.postMessage({event:"enableCart",data:{}},"*")

Listen for updateCart or updateDesign events and handle the article list according to your needs.

"updateDesign" is sent everytime the list is changed and don't needs to be activated.

"updateCart" is sent when the cart button in BYO is clicked.

Sample code

window.addEventListener('message', handleArticleList, true);

Response from the event "cartUpdate"

        data.data = {
          designid : "123456",    // unique design id for the current shelf. Empty string if the design has not been saved
          name     : "design",    // the name of the design set by the user. Defaults to "design"
          items    :  [           // array with all the articles in the design
                          ean         : "7350038270467", // eancode for the item
                          article     : "SF20030-13-2", // article number for the item
                          quantity    : 1                 
          ]
        }

All put together. All the code you need:

        window.addEventListener('message', messageHandler, true); // use this if you are going to enable the cart button

        function messageHandler(event){
            if(event.data.event == "byoLoaded") {
                handleLoad(event)
            }
            if(event.data.event == "cartUpdate") {
                addToCart(event)
            }
            if(event.data.event == "designUpdate") {
                handleCart(event)
            }
        }
        
        function handleLoad(event) {
            // enable the button in BYO
            document.querySelector('iframe').contentWindow.postMessage({event:"enableCart",data:{}},"*")
        }
        
        function addToCart(event) {
            let designid = event.data.data.designid
            let designname = event.data.data.name
            let cart = event.data.data.items
            // add your code for handling user did an add to cart click
        }
        
        function handleCart(event) {
            let designid = event.data.data.designid
            let designname = event.data.data.name
            let cart = event.data.data.items
            // add your code for handling article list changed in BYO
        }

argument	description	sample value
lan	Language used in Build Your Own user interface.	See side for list of available languages.
countrycode	2 letter ISO code for country. Sets currency and units.	SE
guid	Store GUID. New customers will be members of the store.	sit_1234567890abcdef
designtemplate*	Design id for a standard design. Build Your Own will be loaded with this design.	Contact string for a list of design template ids.