product-item

5min

The product item component is suitable for the list of products and should be used as a part of 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.
﻿
The core structure includes:  title
Other options:
image - The option to add an image of your product
price, discount - This allows you to display the price including the currency. The discount should set in the range 0 - 1 (1 = 100%)
tag - The option to add a tag to your item
amountControl - This property has several setup options:
initialValue
minimum and maximum
step
value
action onChange
action onDelete
Actions: 
onPress  - The possibility to add any of the actions (please refer to the list of our Actions). This action(s) will be triggered as a reaction to the press event.
﻿Examples and code snippets ﻿
Product-item example
﻿
In this example, we display a simple list that contains a product-item component. Each product contains a title, tag, image, and price. The advantage is the possibility of searching, which is suitable for a larger number of products. The property "discount" 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 (dynamic)
datasources (dynamic)
|
datasources:
  product:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/products
      query: |
        SELECT 
          id, 
          '$.title', 
          '$.uri',
          '$.tag', 
          '$.price',
          '$.discount', 
          '$.quantity',
          '$.category',
          '$.productId'
          FROM [default/products] WHERE '$.title' LIKE '%'||@search||'%' AND '$.category' = "product" OR @search IS NULL AND '$.category' = "product" ORDER BY '$.title'
      queryParameters:
        search: =@ctx.jig.state.searchText
datasources:
  product:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/products
      query: |
        SELECT 
          id, 
          '$.title', 
          '$.uri',
          '$.tag', 
          '$.price',
          '$.discount', 
          '$.quantity',
          '$.category',
          '$.productId'
          FROM [default/products] WHERE '$.title' LIKE '%'||@search||'%' AND '$.category' = "product" OR @search IS NULL AND '$.category' = "product" ORDER BY '$.title'
      queryParameters:
        search: =@ctx.jig.state.searchText
﻿
See also
﻿Developer reference﻿
﻿Relevant examples (Github)﻿
﻿