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

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’);});
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`);}});

--

--

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