Our support site has moved to https://support.intuiface.com

Interface Asset - Shopping List

Table of Contents

    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 following the documentation here.

    Accessing the Shopping List IA

    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 Marketplace tab of your Experiences Panel in Composer, or from the Marketplace web page.
    • Close Composer.
    • Open File Explorer at the project location {My Documents}\IntuiFace\DIY Shopping Catalog then copy the ShoppingCart folder located in Files\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.

    ShoppingList-IA.jpg

    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:
    Shopping-Product.jpg

    The Asset Grid and its Data Template, using the List Items property as a data feed:
    ShoppingList-DA.jpg

    The generated email:
    Shopping-Email.jpg

    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.

    Shopping-Props.jpg

    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

    ShoppingAdd.jpg

    Create a new email template

    The default template can be downloaded from this location. Reuse it as your own template or modify as needed. Be sure to keep the following place holders:

    • {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

    Shopping-Email.jpg