Product-item preview
Product-item preview
| Core structure | |
|---|---|
title | Add a title for the product-item. You can use an expression and datasource to set the title. |
type | The layout type of the product-item. Choose between the
|
| Other options | |
|---|---|
amountControl | This property has several setup options:
|
description | A description for the product-item. You can wrap lines based on the numberOfLines property. Text that can be evaluated, translated, and formatted. |
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 |
numberOfColumns | Sets the number of columns used to display items in a multi-column layout. This applies only to vertical lists; it is ignored when isHorizontal is true. This property is set under the data property. |
price | This allows you to display the product's base price, including the currency, using the format properties. The default color hierarchy for pricing.
|
style | isWaitingSync - Displays a Waiting sync indicator. |
subtitle | Second line of text. It is a single line that does not wrap. The text can be evaluated, translated, and formatted. |
tags | The option to add tags to your item. Add a tag or multiple tags, for example, the maximum amount. The tag can be configured with an expression to determine when it should be displayed. |
| 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 |
|---|---|---|
=@ctx.current.state. | amount | Applies to a list, list.item, product-item, and stage components. List's data is an array of records. The =@ctx.current.state is the state of the current object in the array. |
=@ctx.component.state. | amount | State is the variable of the component. |
=@ctx.solution.state. | activeItemId now | Global state variable that can be used throughout the solution. |
Default product-item with tags
Product-item
title: Product item list
type: jig.default
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
children:
- type: component.list
options:
data: =@ctx.datasources.product
isSearchable: true
item:
type: component.product-item
options:
# Display style - 'default' shows a standard product list layout
type: default
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
# Amount control configuration for quantity.
amountControl:
# Sets initial quantity value from the datasource.
initialValue: =$number(@ctx.current.item.quantity)
# Maximum quantity that can be selected.
maximum: 10
# Action triggered when the amount changes.
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
tags:
# Dynamic tag that appears when maximum quantity is reached.
# Shows 'max amount' text when amount equals 10, otherwise empty.
- text: =@ctx.current.state.amount =10 ? 'max amount':''
color: primary
Product-item with summary
Product-item card layout with tags
Product-item with tags in cards and columns
Product-items in cards, columns,
amount control and a summary
Product-item in cards, columns in tabs
Product-item with menu-item