Fluent Commerce Logo
Docs
Sign In

Enable Phone Camera scanning in Fluent STORE Picking

How-to Guide

Author:

Randy Chan

Changed on:

4 Feb 2025

Key Points

  • A step-by-step guide to enable phone camera scanning for product picking.
  • Configuration

Steps

Step arrow right iconConfigure setting: fc.mystique.fields.picklist

The full details of the picklist setting can be found here.


1{
2    "query": "query ($waveId: ID!) {  pickwave:waveById(id: $waveId) {      items(first: 100) {          edges {             node {                 quantity                product {             name                         ... on VariantProduct {             __typename        ref                     gtin                    stdProduct:product{ ... on StandardProduct{               __typename       ref                      attributes{                        name                        value                        }    }                }                     catalogue {                       ref                     }                     attributes {                       name                       value                     }                     categories(first: 1) {                       edges {                         node {                           name                         }                       }                     }                   }                 }             }         }     } }}",
3    "startQuantityAtMax": false,
4    "dataSource": "pickwave.items",
5    "attributes": [
6        {
7            "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.productName.heading",
8            "value": "{{img product.attributes.byName.imageUrl product.attributes.byName.imageUrlRef alt='alt' width=50 margin='0.5em'}} {{product.name}}",
9            "sortBy": "product.name"
10        },
11        {
12            "label": "Barcode",
13            "value": "{{product.gtin}}",
14            "sortBy": "product.gtin"
15        },
16        {
17            "label": "brandname",
18            "value": "{{product.stdProduct.attributes.byName.imageUrl}}",
19            "sortBy": "product.stdProduct.attributes.byName.imageUrl"
20        },
21        {
22            "label": "i18n:fc.sf.ui.wave.pickAndPack.list.pick.column.sku.heading",
23            "value": "{{product.ref}}",
24            "sortBy": "product.ref"
25        }
26    ],
27    "scanner": {
28        "enableCameraScanner": true,
29        "scannerFields": [
30            "product.gtin",
31            "product.ref",
32            "product.name",
33            "product.attributes.byName.BARCODE1",
34            "product.attributes.byName.BARCODE2",
35            "product.attributes.byName.BARCODE3"
36        ],
37        "filterFields": [
38            "product.gtin",
39            "product.ref",
40            "product.name",
41            "product.attributes.byName.BARCODE1",
42            "product.attributes.byName.BARCODE2",
43            "product.attributes.byName.BARCODE3"
44        ],
45        "rowId": "product.ref",
46        "scanTimeout": 200,
47        "incrementBy": 1,
48        "toastTimeout": 2000,
49        "highlightDuration": 300,
50        "camera": {
51            "decoders": [
52                "code_128_reader",
53                "qr_reader"
54            ]
55        }
56    },
57    "rowExpansion": [
58        {
59            "component": "fc.card.attributes.grid",
60            "dataSource": "product.attributes",
61            "props": {
62                "exclude": [
63                    "imageUrl",
64                    "imageUrlRef"
65                ]
66            }
67        }
68    ]
69}

Language: json

Name: fc.mystique.fields.picklist JSON

Description:

Sample JSON that enables scanning code 128 and QR code.

Note that you can declare which

`scannerFields`
will detect scanning.



Step arrow right iconSample Barcode for testing

You can use https://barcode.tec-it.com/en/Code128?data=02020202002 to generate a sample barcode where a barcode is matching with your product's scanner field.


Step arrow right iconTest scanning with your phone

Here are some of the sample testing:

Pick Scanning by productRef:

Pick Scanning by productRef:



Pick Scanning by GTIN code-128:

Pick Scanning by GTIN code-128:




Pick Scanning by QR Code:

Pick Scanning by QR Code:




Item not found:

Item not found: