product-item

7min

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﻿
﻿
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 ﻿
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
datasource (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]

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: =@ctx.datasources.product
item:
  type: component.product-item
  options:
    title: =@ctx.current.item.title
    image:
      uri: =@ctx.current.item.uri
    discount: =@ctx.current.item.discount
    price:
      value: =@ctx.current.item.price
      format:
        numberStyle: currency
    tag: =@ctx.current.item.tag
﻿
Product-item with search
﻿
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
datasources (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]
data: =@ctx.datasources.product
isSearchable: true
item: 
  type: component.product-item
  options:
    tag: =@ctx.current.state.amount =10 ? 'max amount':''
    title: =@ctx.current.item.title
    image:
      uri: =@ctx.current.item.uri
    discount: =@ctx.current.item.discount
    price:
      value: 
        =@ctx.component.state.amount = 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: =@ctx.current.item.id
            quantity: =@ctx.current.state.amount
﻿
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
datasource (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]-item1
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)

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: =@ctx.datasources.product-item1
item:
  type: component.product-item
  options:
    title: =@ctx.current.item.title
    image:
      uri: =@ctx.current.item.uri
    discount: =@ctx.current.item.discount
    price:
      value: =@ctx.component.state.amount = 0 ? @ctx.current.item.price :$sum(@ctx.component.state.amount * @ctx.current.item.price)
      format:
        numberStyle: currency
    amountControl:
      maximum: 10
      initialValue: =@ctx.current.item.amount

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

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.