15 March 2013
User level: Intermediate
Original publication date: 04/02/2012
Modified: 03/15/2013 (Change log)
Other required products
authenticationService.login(). Using the API, you can access APIs that allow you to duplicate e-commerce functionality found in the default library and customize it to fit your project design. This article will get you started on using a template that has been created to enable users to swipe horizontally through pages and to view a folio preview when they tap a cover.
The store template offers a number of features publishers can leverage to enrich the user experience. Figures 1-4 show how these features look in the template.
In order to make use of this store template you must have folios which are published as public. This store uses the API to populate the Magazines and Specials tab and uses a different XML file, apps.xml, to populate the apps tab. Folio covers are also served from the fulfillment server. All other images are hosted on your server.
In this template, the second tab is labeled "Apps," and the example depicts how publishers could cross-sell other apps that they might have in the iTunes App Store or Google Play marketplace. This tab could be renamed and repurposed for any other use, such as for selling physical goods. For example, it could be renamed "Shop," and you could swap out the links in the apps.xml file for URLs that point to goods on an e-commerce site.
If you unzip the horizontal_swipe_store.zip file, you will see the file structure displayed in Figure 5.
When setting up your store, there are two locations for files. One set of files will be embedded with your viewer by uploading a ZIP file to Viewer Builder. For a description of files that are uploaded to your server, see step 5 below. For a list of files that are zipped for Viewer Builder, see step 6 below.
The "images" folder contains the images used by this template. They should not be included in your store ZIP file, but should be uploaded to your server.
Here are the key files in the package:
Note: Files above with "*"should be included in the store Zip file for Viewer Builder.
To make use of this template with your own content, complete the following steps:
The following sections explain these steps in more detail.
This XML file creates the list of app thumbnails in the Apps tab.
Each app node represents the data required to display one application. If you have more than one page of apps in the viewer, new pages will be automatically created. If you would like to market something other than an app, you can change the
appStoreUrl node to link to something else. For example, you could link directly to your e-commerce page that is selling a hat.
This modification is only necessary if you would like to test your account on the desktop. Since the API file is not available on the desktop, this XML feed is used to display the folios.
On line 8, modify FULFILLMENT_URL so the
accountId parameter matches your accountId. For information on finding your accountId, see the "Connecting to fulfillment" section in the Adobe article Building a custom storefront. Once you have your accountId, you will modify the value after http://edge.adobe-dcfs.com/ddp/issueServer/issues?accountId=.
On line 11, modify APPS_URL so the value matches the URL for where you will be hosting apps.xml.
On line 14, modify IMAGE_PATH_URL so the value matches the path to where your images will be hosted.
On line 17, modify PREVIEW_DIR if the subdirectory for your preview images will be different. This path is a subdirectory of IMAGE_PATH_URL. The preview images are the images that are visible when a user clicks a thumbnail.
In Eclipse, open build.xml in the Ant panel and run the concat target (see Figure 7).
If you do not have Eclipse, you can alternatively modify the values specified above in store.js beginning on line 2979.
On line 10, change the
src attribute so it is pointing at the location for where you will be hosting store.js.
On line 13, change the
href attribute so it is pointing at the location for where you will be hosting store.css.
Preview images are displayed when a user taps a thumbnail, as was shown in Figure 4. Preview images should not be wider than 567px nor longer than 3600px. Beyond 3600px, iOS will make the image appear scaled. Preview images should be named with the format <product-id>.jpg. So if your product ID is jan2012, then the filename for the preview should be jan2012.jpg. Images should then be uploaded to IMAGE_PATH_URL + PREVIEW_DIR. In the example files, this translates to http://lighthouse.adobe.com/dps/horizontal_swipe_store/images/previews/.
When your file modifications and images are ready, upload your images, apps.xml, store.css, and store.js to the URLs specified in step 2. Keep in mind that the image paths in store.css are relative to store.css, so the images should be in a folder named "images" on the same level as store.css. The file structure on your server should look similar to Figure 8.
To upload your files to Viewer Builder, you must first zip the following files:
Once your files are zipped, open Viewer Builder and navigate to the Navigation Toolbar section. For more information on Viewer Builder, see the Viewer Builder tutorial video. In the Navigation Toolbar section, there is a "+" icon in the lower-middle right of the screen which will allow you to add a custom slot (see Figure 9). Navigate to the zip file you created above for the store. Set the Lock Orientation menu to Portrait. Enable the Hide Title Bar and Auto Launch options. In the Label field enter Cover. This field is required but not used in this example. If you don't have any custom icons, you can use the provided store_disabled.jpg, store_off.jpg and store_on.jpg images.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.