QuickView Getting Started Guide

Publicator allows you to use your existing product windows, called "quickviews", in your online catalog.

Using the Zmags API it’s easy to embed your catalogs, lookbooks and other publications into your website, enjoying the rich functionality of Zmags Publicator, as well as the full use of your product quickviews.
The process from Upload to a Commerce enabled catalog is as follows:

Adding Product Links & Widgets
Publicator makes it easy to add and update Product Links & Widgets in your publication, enabling customers to open your product quickviews without ever leaving the page. Your readers may then add products directly to their shopping cart and continue reading.

Product Links allow you to design and use your own image icons and buttons in your catalog. Product Widgets allow you to use the built in Zmags product icons and add transparent shopping layers in your catalog.

How to create a Product Link
1) Log into Publicator and click on "All Publications".
2) To the right of the publication you'd like to add links to, click the little icon in the 'Enrichments' column.
3) Wait for Enrichments to load. Using the page-select menu on the right side, navigate to the first page you would like to link.
4) Click the link icon on the left side and choose "Product Link". Use the mouse cursor to draw a link box on the page.
5) This will open the product link dialog box
6) Select “Manual” and enter your product ID in the “Product ID” field. Leave the other product fields blank.
7) To add your own image icon or button, select “External Source”. In the dropdown menu you will find all images uploaded into the Image folder within your Publicator account. After selecting your image, change “Opacity” to 100.

How to create a Product Widget
1) Log into Publicator and click on "All Publications".
2) To the right of the publication you'd like to add a widget to, click the little icon in the 'Enrichments' column.
3) Wait for Enrichments to load. Using the page-select menu on the right side, navigate to the desired page.
4) Click the cog icon on the left side and choose Product Details Widget; after that, choose whether you would like to use a simple rectangular link area, or draw a more advanced polygon.
5) If you chose the "Rectangular Tool", simply draw a box on the page by dragging from where you would like one corner to be, to where you would like the opposite corner to be.
6) If you chose the "Polygonal Tool", click anywhere on the page to place the first point. Then click elsewhere to place two or more subsequent points. When finished, click the original point to close the polygon.
7) Once you have created a Product Details Widget, select “External” and enter your product ID in the “Product ID” field. Leave the other product fields blank.

Embedding your Publication Using the Zmags API
Before you embed the publication into your website, you first need to activate it in Publicator. This is done by clicking the grey check mark to the left of its name in the list.
After that, click on the publication’s name and copy the Publication ID. This will be needed to identify it in the Zmags API.
The next step is to embed the publication into your website using the Zmags API. Using the API you can then listen for events triggered when the user clicks on one of your product links or widgets.

The three different type of events are:
    com.zmags.api.Viewer.PRODUCT_LINK_ACTIVATE
    com.zmags.api.Viewer.PRODUCT_WIDGET_ACTIVATE
    com.zmags.api.Viewer.BUY_THE_LOOK_WIDGET_ACTIVATE
(For more complete documentation on these events, click here.)

To use these events on your own site, simply copy / paste the code below into any HTML page which possesses the code necessary to open your website's light boxes. Be sure to replace PUB_ID_HERE with your publication ID, which can be found by clicking the publication's name in the All Publications list of the Zmags Publicator. Change the numbers for top, left, height, and width in the last line to resize and reposition the publication as desired.

<script>
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();

    function launchWebSiteProductWindow(productID){
        // Replace line below with code to launch your web site's product window with the given product ID (aka SKU)
        alert("Launch product window with product ID: " + productID);
    }
    
    viewer.onproductlinkactivate = function(event){
        launchWebSiteProductWindow(event.product.product_id);
    }
    viewer.onproductwidgetactivate = function(event){
        launchWebSiteProductWindow(event.product.product_id);
    }
    viewer.onbuythelookwidgetactivate = function(event){
        // Replace line below with code to launch your web site's buy-the-look window
        alert("buyTheLookWidgetActivateHandler, event products: " + event.products);
    }
</script>
<div id="myViewerContent" style="position:absolute; top:10px; left:10px; width:800px; height:600px;"></div>

You will also need to add the following to the <head> section of the HTML page:

<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>