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:
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
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.