Components
list

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
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: =@ctx.current.state.amount =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

=@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.

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 with tags

product-item-tags-dynamic
datasource (dynamic)

Product-item
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)


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 with summary

product-item-summary-static
datasource (static)


See also



Updated 04 Nov 2024
Doc contributor
Did this page help you?
Yes
No