Reusing your Site's Existing Product Windows with Zmags – Fastr Publicator Community

Note: This solution requires use of the Zmags Embedded Viewer API. It assumes that readers have general knowledge of embedding the viewer already. If this is not the case, feel free to click the link above for more information.
This light box solution requires that your website already has existing light box functionality that can be re-used and that you have a Commerce or CommercePro account.

Adding Products Links:
First it is necessary to add product links, product widgets, or both to your publication. These are what will open your site's product windows when clicked.
- Creating Product Links
- Creating widgets (Verge Viewer only.)
- Google Analytics and Product Links

Handling Product Events:
For this next step, your publication must be embedded into your website using the viewer 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>

If you have secure/HTTPS based publications though, be sure to use this line instead:

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

Related articles