Description
This Shopping List Interface Asset (Shopping List IA) enables you to add and remove priced items from a list. When your user finishes shopping, the interface asset can also create an email body containing the list. You can use this email body with the Share via Email Interface Asset.
As this interface asset is written in JavaScript, you can easily modify its behavior by retrieving the source code in this Github repository.
This IA is used in the Browse & Select reference design and we recommend you watch the webinar recording located at the bottom of that page.
Accessing the Shopping List IA
In Composer 6.6.0 or above
The Shopping List IA is embedded in Composer 6.6.0, meaning it will be available in the list of out-of-the-box interface assets.
The instructions below only apply to older versions of Composer. If you already had a Shopping List IA in your own IA folder as described below, we recommend you delete it when upgrading to Composer 6.6.0 or above.
Legacy instructions for Composer 6.5 or older
The Shopping List interface asset is not installed with Intuiface Composer. Rather, it is available as part of the DIY Shopping Catalog sample experience. Follow these steps so you can make this IA available for use across all of your projects:
- Download the sample DIY Shopping Catalog from the Examples tab of your Experiences Panel in Composer, or from the online Intuiface Examples catalog.
- Close Composer.
- Open File Explorer at the project location
{My Documents}\Intuiface\DIY Shopping Catalog
then copy the ShoppingCart folder located inFiles\InterfaceAssets
- Paste this folder into
{My Documents}\Intuiface\Interface Assets
. - Open Composer.
The Shopping List interface asset will now be available like any other off-the-shelf interface asset, meaning it will be available across all of your Intuiface projects.
Usage
The main workflow is as follows:
- Add a "product catalog" to your experience, either by manually inserting content (images / texts) or by using an Excel file as a data source. (Any data source accessible by an interface asset could be used. This example uses Excel as it is universally known.)
- Use the Add Item action to add an item to the list.
- Create your Data Template to visually represent the content of the list.
- Use the Share via Email Interface Asset to send the list summary via email.
The product page with the "Add" button:
The Asset Grid and its Data Template, using the List Items property as a data feed:
The generated email:
Properties, Triggers and Actions
Properties
The properties below are read-only, meaning you can only access them through binding.
-
List Items: the list containing all the added items. Each item has the following properties
- Item ID
- Item Name
- Item Image
- Item Description
- Item Unit Price
- Item Quantity
- Item Total Price
- List Items - Design Mode: Because your list will always be empty at design time, you can use this list of simulated items as a data feed for your collection while in Composer's Edit Mode to create your data template. Don't forget to switch back to the real List Items property before hitting Play or deploying to Player.
- Number of Items
- Total Price
- Email Body: This property will contain an HTML-formatted list summary as an email body that can be used by the Share via Email Interface Asset.
- Exported JSON: this property will contain a JSON-formatted list summary of the items in the shopping list. You can edit the content of this method using TypeScript to tailor the JSON to your requirements, then use the content of this property within any other Interface Asset action parameter, ex: send the list to the Retail POS system through an HTTP call using the API Explorer.
Triggers
-
Error Received: Raised if an error occurs when generating the email body.
- Message: The error message
- Mail created: Raised when the email body is generated.
Actions
-
Add item: Adds an item to the shopping list using the following information.
- Item ID: a unique identifier that will be used by the list engine
- Item Name
- Item Description
- Item Image
- Item Unit Price
- Quantity: 1 by default.
- Clear Cart: Removes all items from the list.
- Create email body: Creates a list summary that can be emailed using the Share Via Email interface assets.
-
Decrement quantity: Decrements the quantity of the specified item by 1.
- Item ID
-
Increment quantity: Increments the quantity of the specified item by 1.
- Item ID
-
Initialize email template: Retrieves an HTML Template from a given URL
- Template URL
-
Remove item: Removes the specified item from the list.
- Item ID
-
Set quantity: Adjusts the quantity of the specified item.
- Item ID
- Quantity
Create a new email template
The default email template can be found in the Shopping List folder and is named email_template.html.
Reuse it as your own template or modify it as needed. Be sure to keep the following placeholders:
- {HEADER}: contains the text appearing before the table
- {TABLE_LINES}: contains the table lines generated by the Shopping List
- {TOTAL_PRICE}: contains the total price computed by the Shopping List
Video explanation - Using the Shopping List - Interface Asset
You will find, in the Quarterly Q&A Live - Winter edition 2022 video, a detailed example of how to use the Shopping List - Interface Asset
Comments
0 comments
Article is closed for comments.