External Cart Integration

For clients who want to use the widget within their own shopping carts, there exists a special JS library to aide in creating product previews outside of the widget.

Begin by embedding https://az412349.vo.msecnd.net/pio/pio.canvaspreviewer.2.11.6.min.js. after the pio.js script.

For example, let’s say that you wanted to get a preview of the first item in the cart, and insert that preview into a container DOM element:

var recipeId = "f255af6f-9614-4fe2-aa8b-1b77b936d9d6";
var url = "https://widget.print.io/";

var items = PIO.getCart();
var previewer = new PIO.CanvasPreviewer();

// generates a preview for one item
previewer.getCanvasForItem({
  recipeId: recipeId,
  url: url,
  item: items[0]
}, function(error, canvasElement) {
  $("#container").append(canvasElement);
});

A full working example is available here.

Closing The Widget After The Edit Step

Its also useful to be able to close the widget when it gets to its cart section, in order to direct the user to the external cart.

This is achievable via adding a subscription to the onEvent function which listens for when the user gets to the cart, and automatically closes the widget when that happens.

PIO.open({
    recipeId:"f255af6f-9614-4fe2-aa8b-1b77b936d9d6",
    url:"https://widget.print.io/widget/",
    fns: {
        onEvent: function(key,value){
            if(key==="analytics-pageview" && value.page==="/widget/tpl-cart"){
                PIO.close();
                // do your redirection here, if needed
            }
        }
    }
});