Building Voice-enabled Add to Cart Functionality for an E-commerce web App

  • How to add a voice assistant to a React web application
  • Alan AI basic Script concepts
  • Basic knowledge of Html, CSS, and Javascript.
  • ALAN account(make sure you have signed up)
  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.
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}}});}, []);
intent(‘I want headphones, p => {p.play(‘Adding headphones for you’);});
  • I will take a headphones
  • Add a headphones
  • Add headphones, please
  • Or just headphones
  • 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’);});
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”);});
const[cart,setCart] = useState([])const[allItems,setAllItems] = useState([])
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}`);});
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`);}});
  • 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 checkout for payment all with your voice. Give it a try!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store