Requirements

Prerequisite knowledge

This article requires that the reader have working knowledge of both InDesign and DPS Interactive Overlays, specifically Web Content overlays. In addition, a working knowledge of JavaScript and server-side applications is required to implement any solution beyond the example that is provided in this article.

 

Additional required other products (third-party/labs/open source)

User level

Intermediate

Prerequisite knowledge

This article requires that the reader have working knowledge of both InDesign and DPS Interactive Overlays, specifically Web Content overlays. In addition, a working knowledge of JavaScript and server-side applications is required to implement any solution beyond the example that is provided in this article.

User level: Intermediate

Required products

Additional required other products (third-party/labs/open source)

Sample files
content_context.zip
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.

 

DPS users sometimes want their Web Content overlays to know the context in which they are displayed. Context here means the folio and article in which they reside, the name of the HTML file being displayed, the folder in which the HTML file resides or even the DPS account information. Knowing which folio and article hosts that content allows the content to display variations based on this knowledge. For instance, a single HTML file can be used to display different content based on where it is placed inside a folio. In addition, if we understand the content's complete context, we can use that context as a unique identifier for the Web Overlay itself, leading to applications such as "like" buttons or offline forms storage and retrieval.

In this article, we will learn how to create a set of methods for determining content context that we can leverage using JavaScript. As an example, we will use this method to create simple, reusable "Add to Cart" button.

Contextually speaking…

We can use the window.location object can be used to determine several properties of the current HTML file. For instance, window.location.protocol returns the web protocol used to load the content. If you are viewing content in a web browser, the return will be either http:// or https://. In an article about determining reader context, we use window.location.protocol to determine whether the reader is using a browser or using Adobe Content Viewer or a Custom Content Viewer to read an article. In that context, window.location.protocol returns file:.

The window.location object has several properties, including but not limited to hostname, pathname, port, protocol and href. For determining content context, however, we need to know the pathname.

The methods

Let's look at the window.location.pathname value for a Web Content Overlay called Notes.1.html that resides in a folder called Notes in an article called Notes1Article in a folio called folioName. You can see where those identifiers appear in the pathname:

window.location.pathname: /var/mobile/Applications/101B02C4-6186-4CC6-AE28-4969460F2A59/Library/Caches/FolioPreview/folioName/Notes1Article/OverlayResources/Notes/Notes.1.html

Based on the path structure, we can create a set of functions to provide ready access to this information. These functions are included in the context.zip archive, in the context.js file.

// setup variables var pathArray = window.location.pathname.split("/"); var breakChar = String.fromCharCode(250); //choose a separator that can't be used in folio metadata var sepChar = String.fromCharCode(251); // the following functions will gather the current folio, article and HTML file name function folio() { var folio = pathArray[pathArray.length - 5]; return folio; } function article() { var article = pathArray[pathArray.length-4]; return article; } function overlayFolder() { var overlayFolder = pathArray[pathArray.length - 2]; return overlayFolder; } function fileName() { var fileName = pathArray[pathArray.length-1]; return fileName; } // this function combines the folio, article and HTML file name into one string function folioArticlePath() { return folio()+sepChar+article()+sepChar+fileName(); }

Since we can now use the path as a unique identifier for a Web Content Overlay, we can begin to use generic HTML that inherits its unique identifier from its context. If you put the context.js file in HTMLResources, then it becomes available to any overlay that needs access to content context. As an example, let's consider an "Add to Cart" button.

Generally speaking, an "Add to Cart" button is a button that allows a user to add a product to a virtual shopping cart that they will use to make an online purchase later. On a web site, these buttons often are rendered on-the-fly by a content management system that programmatically pulls the product imagery, descriptions, and pricing as well as its SKU from a database and formats it using HTML and CSS to look like a product page. In DPS, the presentation of the product, with words, images and "add to cart" button, happen at the time the folio is made. A challenge for retailers has been the hand coding that's been required to create the hyperlinks for the "add to cart" and "buy now" buttons.

Let's make a real simple button that uses the folio data as the identifier. If you build your folio with the article name (not the article Title, but the Article Name in the Folio Builder as illustrated in figure 2) matching the product SKU or other unique identifier, then you can pass that along to your online cart solution as a parameter in the URL.

<script> function article() { var article = pathArray[pathArray.length - 4]; return article; } </script> <input type="button" onclick="window.location.href=\"http://yourcartsolution.com/addtocart?item=\"+ article(); return false;" name="Cart" id="Cart" value="Add to Cart">

The beauty of this little snippet is that you can paste it into InDesign on any page with Object>Insert HTML and it will make an "Add to Cart" button with no additional configuration. Be sure to enable "Auto Play" in the Web Content Overlay panel, though. Depending on your layout, you may want to turn on "Transparent Background", but test that so that your InDesign-built poster image doesn't conflict with the button that the Content Viewer will make on your device. If the poster image does conflict, then you can always grab the poster and slide it out of the crop area to hide it from view so that it won't be on the page when InDesign makes the folio background image. The Web Overlay will then activate and draw the button. InDesign CS5 and 5.5 users can make a Web Content Overlay and point it at the add_to_cart.html file that's in the context.zip file at the top of this article.

In addition, you can add it to a library and simply drag it onto any page where you want to have the button. It will automatically configure itself using the article name as its parameter that it passes to the cart solution.

Where to go from here

Using the content context, coders can build HTML components that provide re-usable, flexible frameworks for designers. The example "Add to Cart" button is simple yet deceivingly powerful, since it allows a designer to add cart functionality simply by naming the article with the SKU. Other use cases could include storing variables in localStorage[] based on the context of the HTML file, resulting in forms that could automatically "know" where they are and could store data based on their HTML file name, enclosing folder, or some combination thereof.