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:


Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo