Subscribing To Events

There are a number of subscribe-able events one can attach handlers to. To attach a handler one merely passes a function/callback into the PIO.config function.

onEvent

The onEvent function fires when any change occurs in the widget. Below is an example demonstrating some of the events one can attach to.

    PIO.config({
        fns:{
            onEvent:function(key, val){
                if(key==="section-init"){
                    // when a user navigates to a new page/section in the widget
                    // you can later use val.tplName as the 'goTo' param in .open()
                    // to direct the user back to that step
                    console.log('the user is now looking at the '+val.tplName+' template');
                } else if (key==="address-change"){
                    // val contains firstName, lastName, line1, line2, city,
                    //  state, postalCode, email, countryCode
                    console.log("the user’s shipto address:",val);
                }else if(key==="image-added"){
                    // when a user adds an image to their gallery
                    // to potential buy it on a product
                    // val is the url of the image
                    console.log("the user is considering printing the image that has the url "+val);
                }else if(key==="product-focus-change"){
                    // when a user selects a product initially
                    // val is the product name and id
                    console.log("the user is looking at the product named: "+val.name+" id:"+val.id);
                } else if(key==="onCartChange"){
                    // val has an array of items,
                    //   an item is productId, quantity, sku, template, and customizationState,
                    //   which contains the images for the product and their positioning
                    console.log("cart is",val);
                } else if(key==="analytics-pageview"){
                    // when a user switches to another page/section
                    // similar to section-init, but makes it extra easy
                    // to publish to custom analytics engines
                    // val is page, title
                    //
                    // note that publishing this info to GA is turned on by default
                    console.log("page view occurred",val.page,val.title);
                } else if(key==="analytics-event"){
                    // when a specific tracking event occurs in the widget
                    // feel free to suggest events if you want them added
                    // mostly we use pageviews for data currently
                    //
                    // note that publishing this info to GA is turned on by default
                } else if(key==="analytics-addTransaction"){
                    // this and the next 2 events are for GA Ecommerce tracking
                    // the data and the flow is exactly as described here:
                    // https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce
                    //
                    // note that publishing this info to GA is turned on by default
                } else if(key==="analytics-send"){

                } else if(key==="analytics-addItem"){

                } else if(key==="onOrderSubmit"){
                    // contains data similar to analytics ecommerce events
                    // == full order data
                }

            }
        }
    });

onCartChange

The onCartChange function fires when a change has occurred to the cart–be it an item being added/removed from the cart or an item changing within the cart.

    PIO.config({
        fns:{
            onCartChange:function(cart){
                console.log("you now have "+cart.items.length+" items in your cart");
            }
        }
    });

onOpen

The onOpen function fires… when the widget opens. This is useful for instance if you want to change the styling of your page for when the widget is open.

    PIO.config({
        fns:{
            onOpen:function(){
                console.log("opened!");
            }
        }
    });

onClose

The onClose function fires… when the widget closes. This is also useful if you want to change the styling of your page for when the widget is closed.

The onClose function also allows you to control if the widget should actually close– via whether it returns true or false.

    PIO.config({
        fns:{
            onClose:function(){
                var shouldClose = true;
                console.log("closing!");
                return shouldClose;
            }
        }
    });