Launch storefront and connect with a bot

The app wouldn't be very useful unless it's connected to a bot. Let's connect our published application with a bot, so we can interact with it in a more realistic way.

  1. Create storefront with the yalo cli tool
yalo create project storefronts
cd storefronts && npm install

yalo create package unilever
cd packages/unilever/

yalo preview
  1. Add functions add ons to launch a new bigstorage configuration
yalo addon:add -t function
Select the **launchBigstorage** from the list

Fill the questions 
? Write the customer's name. 
? Write a slug for Big Storage - one word. 
? Select the customer's country. 
? Write the customer's email that will be allowed to send data updates. 
? Write the Yalo email that will send orders to the customer. 
? Enter the name that is used by the customer to authenticate their end-users. (ie. CNPJ, User Code, etc.). 
? How will confirmed orders be sent to the customer? 
? Write the bot slug for the bot that will be linked to this webview. 
? Write the number for the bot that will be linked to this webview. 
? Ask the UXer for the bot state to which the order is sent (ie. order-summary). 
? Which channel will the webview be implemented in? 
? Which region will the webview be located in? 
? What is the minimum price amount each order must reach. 
? What currency are the webview's prices in? $
? What is the currency's prefix? (ie. MXN, USD, Q). 
? Should the webview contain the option to take notes? 
? Should the webview contain products that can be customized? 
? Should the webview allow the user to reach the product detail page? 
? Hex color for the send button, include #. 
? URL where the logo is hosted. 
? It’s Hex color for the webview, includes #. 
? URL where the webview is hosted. (https://webview-ecommerce-staging2.yalochat.com)
  1. Add function add on to trigger a send to after order in the webview
yalo addon:add -t function

Select the sendTo from the list, and fill the answers

? Write the sent-to base url (http://api-global.yalochat.com)
    ? Write the sent-to API {{JWT_TOKEN}}
  1. Add function add on to get the products from external api
yalo addon:add -t function
Select the **sendTo** from the list, and fill the answers
? Complete URL from where to retrieve the products data. Example: https://api-global.yalochat.com/big-storage-ng/api/store/cbcgt/products 
? http/s method to retrive data GET
? List of headers. Use JSON format. Example: {"Content-Type": "application/json","Authorization": "Bearer skdhgjsg"} 
? If method selected was POST. Add body using JSON format. Example: { "query": "{ products { fields } }" } 
? Paths in object data where product fields could be found. Format "key:path,key:path". Example: "name:name,sku:codes.sku,description:product.Description,category:category,ranking:
data.extra.ranking,imageURL:images,clientType:customType,price:price"
? Keys in priority order to arrange products in ascendent (ASC) and descendent (DES). Format "key1:order,key2:order,key3:order". Example: "ranking:ASC,price:DES" 
? Transform data. Supported types: "array". Format "key:type,key:type". Example: "imageURL:array" (imageURL:array)
? Path in object data to access products list, leave empty if the list is root data. Example: "data.items" 
? Path in object data to group products in collections. Example: "category" category
  1. Publish the storefront using the yalo cli tool
yalo publish
  1. Connect the created storefront to a bot

Examples

Step by Step How to create storefronts
https://www.notion.so/yalo/Launch-storefront-and-connect-with-a-bot-d8a59be2cfd24a58820d0b8d78915bdc

Storefront's configuration package
https://bitbucket.org/yalochat/engyalo-yalo-cli/src/d3b887d7e91664fe77b8d58400f60e61a6119518/examples/?at=feature%2Fexamples


Did this page help you?