From Barcode to Cart Item

Anyone who has built a registry at a brick and mortar in the last 10 years is probably familiar with the process.  Many retailers will provide the registrants with a barcode scanner, and have them wander the establishment, scanning items that are then translated into a gift registry which can be sent to other parties to purchase.

The use case I specifically wanted to address was similar in nature.  In this case, a Business employee in a warehouse should be able to scan barcodes in a warehouse, and automatically create Cart Items in a Cart.

The solution is effectively described in two parts.  First, we need to be able to read a barcode from a mobile device.  This is assumed to be a tablet or other mobile device that can connect to the internet, has a browser, and a camera.  The second piece is the translation of the data read from the barcode to a Commerce Cloud Cart Item.

There are a number of libraries and APIs available for barcode reading, but I decided to use the QuaggaJS solution, mostly for ease of use, limited dependencies, and the number of potential barcode formats supported.  For portability reasons, I placed all of the front end code in a Visualforce Component, which then is referenced in a Visualforce page.

Since most mobile devices are now equipped with both rear- and front-facing cameras, it was important to specify the rear-facing device as the input source for capturing the barcodes:

Quagga.init({
   inputStream: {
       name: "Live",
       type: "LiveStream",
       target: document.querySelector('#scanner-container'),
       constraints: {
           width: 640,
           height: 480,
           facingMode: "environment"
       },

Once finished with configuring QuaggaJS, I wrapped the HTML elements in a script template (necessary for adopting the UI of the storefront, then created a CC Subscriber Page record per the Commerce Cloud Documentation.

Accessing this page was as simple as navigating to the URI /ccrz__Page?pagekey=SC

The final piece was to implement a call to the ccApiCart.addTo method in the page’s controller via Javascript Remoting.  In my use case, the value decoded from scan is assumed to be the Product SKU.  To further ease this, providing the Product SKU is sufficient in the LineData request parameter (avoiding a query for the relevant Salesforce record Id).  For demo purposes, an assume Quantity of 1 was sufficient, and with that - the item is added to the User’s Cart. Note that for further convenience, addTo will create a new Cart if no Cart Id is provided.

For demo purposes, the User is directed to the Cart after the Product has been successfully added as a Cart Item, but there are multiple avenues that could be pursued instead.  A prompt could allow the user to enter a specific Quantity, or to increase the speed at which items are added, a simple UI element could provide a quick non-interactive visual confirmation of the addition of the item, and return to allow the User to scan subsequent items.

\