product-item

The product item component is suitable for a list of products and should be used with the list components or the list jig.

Product-item preview

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
title	Add a title for the for the product-item. You can use an expression and datasource to set the title.

Other options
amountControl	This property has several setup options: initialValue minimum - Set a minimum limit to the number that can be selected. Default is 0. maximum - Set a maximum limit to the number that can be selected. step - Set the increments/decrement. Default is 1. value - Value of amount control. onChange action - will be triggered when value is changed. onDelete action - A trash symbol is displayed when the value is 1 or (min + 1).
discount	This allows you to display the discount price including the currency. Set the discount in the range 0 - 1 (1 = 100%). Discount is set in float format e.g. 0.12.
image	The option to add an image of your product by providing the uri
price	This allows you to display the base price of the product including the currency.
style	isWaitingSync - Displays a Waiting sync indicator.
tag	The option to add a tag to your item. Add a tag title for example max amount, the tag can be configured with an expression to determine when it should be displayed. tag: [email protected] =10 ? 'max amount':''

Actions
onPress	The action is triggered while pressing on a product item in the list. Use IntelliSense (ctrl+space) to see the list of available actions.

State Configuration	Key	Notes
[email protected].	amount	Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The [email protected] is the state of the current object in the array.
[email protected].	amount	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.

Examples and code snippets

Simple product-item with tags

In this example, a simple list containing a product-item component is shown. Each product contains a title, tag, image, and price. The discount property calculates the price after the discount.

Examples: See the full example using dynamic data in GitHub.

Product-item with tags

product-item-tags-dynamic

title: Product item list
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dGVjaG5vbG9neSUyMHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
        title: Product item
        subtitle: List with product item

data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    image:
      uri: [email protected]
    discount: [email protected]
    price:
      value: [email protected]
      format:
        numberStyle: currency
    tag: [email protected]

datasource (dynamic)

Product-item with onChange, amountControl and search

Product-item

In this example, a simple list containing a product-item component is shown. Each product contains a title, tag, image, amountControl, and price. The added advantage is that you can search the list making it suitable for a larger number of products. The discount property calculates the price after the discount.

Examples: See the full example using dynamic data in GitHub.

Datasource: See the full datasource for dynamic data in GitHub.

product-item-example- dynamic

data: [email protected]
isSearchable: true
item: 
  type: component.product-item
  options:
    tag: [email protected] =10 ? 'max amount':''
    title: [email protected]
    image:
      uri: [email protected]
    discount: [email protected]
    price:
      value: 
        [email protected] = 0 ? @ctx.current.item.price :(@ctx.component.state.amount * $number(@ctx.current.item.price))
      format:
        numberStyle: currency
    amountControl:
      initialValue: =$number(@ctx.current.item.quantity)
      maximum: 10
      onChange:
        type: action.execute-entity
        options:
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/products
          method: update
          data:
            id: [email protected]
            quantity: [email protected]

datasources (dynamic)

Product-item with summary

In this example, a list containing a product-item component is shown. Each product contains a title, image, and price. The discount property calculates the price after the discount. The summary component at the bottom shows the total of items selected in the amountControl.

Examples: See the full example in GitHub.

Product-item with summary

product-item-summary-static

title: Product item and summary
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dGVjaG5vbG9neSUyMHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
        title: Product item and summary
        subtitle: List with product item and summary

data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    image:
      uri: [email protected]
    discount: [email protected]
    price:
      value: [email protected] = 0 ? @ctx.current.item.price :$sum(@ctx.component.state.amount * @ctx.current.item.price)
      format:
        numberStyle: currency
    amountControl:
      maximum: 10
      initialValue: [email protected]

summary:
  children:
    type: component.summary
    options:
      layout: cart
      title: Items in your cart
      value: =$sum(@ctx.jig.state.amounts.amount)

datasource (static)

See also

• State