E-commerce Bot | Part 6 | Create a Welcome Menu using Adaptive Card

In this bot series, we will create an E-commerce bot for one of the Online Chocolate Store “Naami Chocos“. This bot will have the following functionalities –

  1. Authentication
  2. Add to Cart
  3. Payment Integration
  4. FAQs using QnA Maker
  5. Connect the bot to the Facebook page

In this part, we will create a menu that will be shown to the users when they successfully authenticate. This menu will have the following buttons –

  1. View Products
  2. View Cart
  3. Place Order
  4. My Orders

Video

We will create this menu using an Adaptive card. This menu will be in the loop after the finish of the MainDialog. Add the piece in IntroStepAsync in MainDialog.cs file.

private async Task<DialogTurnResult> IntroStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            UserProfile userProfile = await _stateService.UserProfileAccessor.GetAsync(stepContext.Context, () => new UserProfile());

            if (userProfile.EmailVerified)
            {
                List<string> operationList = new List<string> { "View Products", "View Cart", "Place Order", "My Orders" };

                // Create card
                var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
                {
                    // Use LINQ to turn the choices into submit actions
                    Actions = operationList.Select(choice => new AdaptiveSubmitAction
                    {
                        Title = choice,
                        Data = choice,  // This will be a string
                    }).ToList<AdaptiveAction>(),
                };
                // Prompt
                return await stepContext.PromptAsync(nameof(ChoicePrompt), new PromptOptions
                {
                    Prompt = (Activity)MessageFactory.Attachment(new Attachment
                    {
                        ContentType = AdaptiveCard.ContentType,
                        // Convert the AdaptiveCard to a JObject
                        Content = JObject.FromObject(card),
                    }),
                    Choices = ChoiceFactory.ToChoices(operationList),
                    // Don't render the choices outside the card
                    Style = ListStyle.None,
                },
                    cancellationToken);
            }
            else
            {
                await stepContext.Context.SendActivityAsync(MessageFactory.Text("Your email is not verified, you cannot use the services of this bot."), cancellationToken);
                return await stepContext.BeginDialogAsync(nameof(EmailAuthenticationDialog), null, cancellationToken);
            }
            
        }

Make sure to install the following Nuget package and import the necessary packages.

Add the following import statements to MainDialog.cs.

using AdaptiveCards;
using Microsoft.Bot.Builder;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Builder.Dialogs.Choices;
using Microsoft.Bot.Schema;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using NaamiChocosBot.Dialogs.Operations;
using NaamiChocosBot.Models;
using NaamiChocosBot.Services;
using NaamiChocosBot.Utilities;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

Add Choice Prompt Dialog in the construsctor.

AddDialog(new ChoicePrompt(nameof(ChoicePrompt)));

In the next part, we will implement the View Products dialog and ask the user to Add the products in the cart.

Thank you All!!! Hope you find this useful.

Up ↑

%d bloggers like this: