Getting Started

The custom HTML Store API allows you to create custom HTML store fronts to embed in Digital Publishing Store (DPS) viewer applications that are created with the Adobe Viewer Builder.

A custom store-front application allows users to purchase subscriptions and folios through the in-app payment mechanism of a specific store, and download products from that store. For example, if you publish an iPad viewer app for use with Apple's App Store, goods purchased through the custom store front use the Apple payment mechanism. Your custom store can leverage the functionality of the viewer app that handles purchases. For example, you can use Viewer Builder to disable the iTunes Subscription "Buy" buttons in the library view of multi-issue viewer apps, forcing all purchases to go through your custom store front instead.

When a designer uses Viewer Builder to create a DPS viewer application, items in the toolbar launch various in-app web views, which can be about or help pages, for example. You can provide your custom store-front as an option through Viewer Builder by adding it as a custom toolbar icon. Your custom icon launches your HTML-based store-front web view, allowing the designer to embed it in their viewer app.

Designing a custom store front

The design of the store front is up to you. You define the store front in a single HTML file, which can use CSS, JavaScript, and images. If you use a frameworks such as JQuery, the related JavaScript files must be included in the zip of your store front source code, or linked from the HTML to a hosted location. We recommend that you host your JavaScript, CSS, and image files on a web-server and link to them from the HTML file. This reduces the risk of having to update your viewer app and resubmit to various app stores when content within your store front changes.

<script src="http://my-website.com/store/js/my_javascript.js"></script>

Making your custom store available to viewer apps

Once your store is complete, you must create a zip archive containing all of its files, and provide that zip through the custom toolbar icons screen of Viewer Builder.

Note: Currently, you must design your store front so that it has a flat directory structure. That is, the top-level folder must contain only HTML, CSS, JavaScript and image files. Viewer Builder expects a zip file that contains no folders. If folders are present, they are ignored.

Offline workflow

We recommend that your design allow for viewing when the viewing device is offline. An easy way to do this is to use the JQuery framework and the $.ajax() errorcallback that fires when a request fails. For example:

$(document).ready(function() {
   var init = function() {              
        $.ajax({
           type: "GET",
           url: "http://www.adobe.com",
           success: function() {
              window.onnetworkconnection();
           },
           error: function() {
              $("body").append("<div id='offline'>You must be connected to 
                                the internet.</div>");
           }
        })
   }
   window.onadobedpscontextloaded = init;
});