Build with me: voice-enabled Add-to-Cart Functionality for an E-Commerce Web App using Alan AI

Enabling e-commerce apps with voice UX can definitely help improve the shopping experience for users. I spent some time exploring ways by which we can easily add voice capabilities into mobile or web apps and got to know about the Alan Voice SDK.

In this article, I’ll be talking about Alan AI and building a demo project about adding items to the cart functionality with Voice.

In this tutorial, we’ll create a simple Add to Cart functionality in the React app, integrate a voice assistant using Alan, and then test it on a device. Once the process is completed, the app will allow users to tap to interact with the voice assistant.

FROM THIS TUTORIAL YOU WILL LEARN:

• How to add a voice assistant to a React web application
• Alan AI basic Script concepts

PREREQUISITES BEFORE YOU GET STARTED

• Basic knowledge of Html, CSS, and Javascript.
• ALAN account(make sure you have signed up)

FOLLOW THESE SIMPLE STEPS:

Step 1) Create a web app

First, we will create our app — a simple web page with a list of items to order. Feel free to clone and run this code to get a manual eCommerce web app. A simple eCommerce web app is ready for you to add items to the cart manually. Open the file in the browser. You will see a page similar to this:

Step 2: Create a voice assistant

To add a voice assistant to the app, we need to create a project in Alan Studio. In the project, we will write a dialog, or the voice script, with commands for our app.

1. Sign up for Alan Studio or sign in if you are already registered.
   When you sign up, Alan adds free interactions to your balance to let you get started. To get additional interactions to your balance, sign up with your GitHub account or connect your Alan account with your GitHub account and give stars to Alan repositories.
2. In Alan Studio, click Create Voice Assistant, choose to create an empty project, specify the project name and click Create.

After completion, Alan screen will look like this: (called as a workspace where all the Alan commands will be written)

Now, to integrate Alan, paste the code below with your unique integration key in the App.js file, using the use effect hook and the functional component.

App.js code:

import React, { useEffect } from ‘react’;
useEffect(() => {
alanBtn({
key: ‘YOUR_KEY_FROM_ALAN_STUDIO_HERE’,
onCommand: (commandData) => {
if (commandData.command === ‘go:back’) {
// Call the client code that will react to the received command
}
}
});
}, []);

And after saving, your current eCommerce app will contain the ALAN button at the bottom right corner:

Step 3: Add a voice command

When we created the project in Alan Studio, Alan automatically added a voice script with a simple voice command to it. We will use it as an example to add a new command, or intent, to our voice script. To the voice script, add the following command and save the script:

intent(‘I want headphones, p => {
p.play(‘Adding headphones for you’);
});

Check how the new command works in the Debugging Chat in the right pane of Alan Studio or directly on the web page. Click the Alan button and say: I want headphones. Alan will reply: Adding headphones for you.

Step 4: Specify alternatives and options

The phrase used to invoke a voice command is called a pattern. At present, our command is invoked by one phrase: I want headphones. However, the users can give a voice command in different ways. For example:

• I will take a headphones
• Add a headphones
• Add headphones, please
• Or just headphones

To be sure the voice command is invoked by any of these phrases, we can add alternatives and options to the command pattern.

• To define alternatives, enclose all possible variants in brackets and use the | delimiter.
• To define optional parts of the user command, enclose these parts in brackets and add | at the end of them.

intent(‘(I want|I will take|Add|) (a|) headphones, (please|)’, p =>{
p.play(‘Adding headphones for you’);
});

Now all the above phrases with slots will work as:

Step 5) Displaying all items using Alan

List all the items in Alan's workspace and make an intent to show all the menu items by looping over each item and showing them with all the properties entered. To achieve this, let’s create another piece of useState for those allItems because initially, we weren’t going to have an Items list, it’s only after we ask Alan to get them.

const[allItems,setAllItems] = useState([])

When Alan returns back the menu items, we call the command property to make Alan show the list of items. As any time Alan sends us an object that has a command property that says get items’ list, we know that Alan is giving us these menu items back.

Alan code:

intent(
‘(show|open|what is on) (me|) (the|) list of all (available|) items’,
‘what (do you have|can you offer|is available)’,
p => {
p.play({command: ‘getMenu’, data: allItems});
p.play(“Here are all the items we have”);
}
);

App.js code:

const[cart,setCart] = useState([])
const[allItems,setAllItems] = useState([])

Step 6) Ordering the items based on name/category/price

Achieving this may sound like a ton of work. It’s just a matter of a couple of codes. Let’s make another intent using a switch case to add the functionality of ordering our list items in a group of different properties(added previously).

Alan code:

intent(
‘(order|sort) by $(ORDER_BY name|price|category)’,
p => {
const orderBy = p.ORDER_BY.value;
let orderedAllItems = allItems;
switch(orderBy){
case ‘name’:
orderedAllItems = allItems.sort((p1, p2) => p1.name.localeCompare(p2.name));
break;
case ‘price’:
orderedAllItems = allItems.sort((p1, p2) => p1.price — p2.price);
break;
case ‘category’:
orderedAllItems = allItems.sort((p1, p2) => p1.category.localeCompare(p2.category));
break;
}
p.play({command: ‘getMenu’, data: orderedAllItems});
p.play(`Here are the items ordered by ${orderBy}`);
}
);

Ask Alan to “Order by name/price/category” and Alan will do that for you. Here’s a glimpse:

User: “order by price”

Alan’s response: “ordering by price”

Step 7) Adding items to the cart with voice

To add an item(s) to the cart, let’s introduce an if-else loop to check if the item demanded is available or not. To check if the item is unavailable, let’s use a regex slot. If the item is available, store the item name along with our properties available and add them to the cart. To get each of the items available in the store, let’s use Javascript’s join function in Alan to map over all items and get their respective names joined by a bar (|).

In React.js, let’s add a command inside the useEffect to update our cart whenever addToCart is called.

Alan:

const itemsList = allItems.map(mi => mi.name).join(‘|’);
intent(`Add $(ITEM ${itemsList}) to the cart`,
`Add $(UNAVAILABLE_ITEM* .*) to the cart`, p => {
if(p.UNAVAILABLE_ITEM){
p.play(“Sorry, that item is unavailable”);
} else {
const itemName = p.ITEM.value;
const itemToGoInCart = allItems.find(mi => mi.name.toLowerCase() === itemName.toLowerCase());
console.log(itemToGoInCart);
p.play({command: ‘addToCart’, data: itemToGoInCart});
p.play(`Adding ${itemName} to the cart`);
}
});

Let’s try adding some items to the cart with Alan:

WHAT YOU FINALLY GET AFTER GOING THROUGH THIS TUTORIAL

An add-to-cart e-commerce web application with functionality integrated with a voice to list all items, group items by feature, ask Alan for an item’s price, and lastly add desired items to the cart, thus providing a hands-free experience, is ready to be hosted.

What’s next to follow?

• To make it more robust and user-friendly, try adding simple CSS styling.
• How about adding a voice navigation feature and removing items from the cart, closing the cart, and checking out for payment all with your voice? Give it a try!

Want to learn more about Alan AI? Check this

GITHUB LINK: https://github.com/Aastha2602/ecommerce-alan