InDesign Web Viewers are a very powerful and sometimes underestimated feature that allows you to add dynamic content in a Twixl publication. Any rectangle on an InDesign page can become a source of HTML content. This is not limited to just displaying a specific page of a web site, but can also be used to integrate things like a form, a survey or even a shopping basket that can use localStorage.
In order to explain how this works, we created a Shopping basket example.
You can check out the result in the Twixl Viewer by tapping this link on your device (make sure you have the Viewer Classic installed). If you open the Shopping Basket example in the Twixl Viewer, there will be three pages in the publication:
- the first page shows 4 types of fruit, and tapping the "+" icon will add the item to the shopping cart and display the overview of the basket
- the second page provides the same option, but is visualized a bit differently
- the third page shows an overview of the shopping cart, from where the order can be confirmed
How does this work?
The InDesign source publication can be downloaded here. The download consists of:
- an InDesign book called
LocalStorageShoppingCartwith three articles - a
WebResourcesfolder with the HTML content
MORE INFO:
- In article 1, each of the 4 types of fruit has a Web Overlay button assigned to it that triggers it to be added to the shopping cart.
- In article 2, the same information is visualized differently using Web Viewers for each of the fruit types, and will allow you to "Add one" to the basket and update the information of the button on the fly.
- Article 3 is the overview of the shopping basket, where a user can confirm the order by entering his e-mail address.
The logic for all of this can be found in the contents of the WebResources folder, in a document shopping_cart.html, along with some JavaScript files.