.png%3Falt%3Dmedia%26token%3D5eafba86-93d5-4f97-b243-b2bf0af6c24a)
.png%3Falt%3Dmedia%26token%3D5eafba86-93d5-4f97-b243-b2bf0af6c24a)
Comment on page
CATEGORY
In this chapter, we’ll be exploring product categories (“collections”) and sub-categories.
To display lists of products and categories in your chatbot Activechat is using dynamic galleries, which are rendered “on-the-fly” when your bot is communicating with the user and do not require manual pre-filling with products/categories.
The building block is called “CATEGORY” and can be found in the toolbar on the left.
1. First of all, let’s start with displaying the list of all available categories in your online shop.
Here is our sample Shopify store with some products grouped into smart and manual categories (“collections”, as Shopify calls them):
We’ll start by displaying the list with the CATEGORY block in our Visual Builder, and our first bot will have only 5 blocks.
2. Click “RUN” to compile the bot – and here’s the result in Messenger:
Displaying Shopify products category in the chatbot
It seems like that doesn’t make much sense since we do not provide any controls for this gallery, and the user cannot do anything useful with these pretty cards. So, let’s add some controls!
3. Click the “plus” sign in the block editor and add a button or two. We’ll add the “Show details” button to display category details (we’ll be adding subcategories in the next exercise).
Note that we connect this button to a text block with some system variables in it. We’ll use these to identify the card that is selected when the user is pressing the button.
You can add multiple buttons to dynamic galleries, and each card will have these buttons when the gallery is rendered in real-time. How do you know which button on which card was pressed by the user? System attributes help with it.
As a result of adding the button you’ll see this:
Much better! Now we have details about the category that was selected by the user and can use it in our bot logic.
Here is the list of run-time variables available when the user is pressing buttons on the CATEGORY block:
- $_selected_category_id – numeric ID of selected category in your shop
- $_selected_category_title – name (title) of the selected category
- $_selected_category_slug – URL-friendly category name used by Shopify and WooCommerce
Let’s get to sub-categories now!
Let’s switch to WooCommerce to demonstrate that the CATEGORY block is working exactly the same there. (Keep in mind that you can have only one shop connected to a bot, so we’ll have to disconnect Shopify store before connecting WooCommerce).
Here is the list of categories and sub-categories in our sample WooCommerce store:
You can see that we have four top-level categories (Uncategorized, Clothing, Decor and Music) and Clothing includes three sub-categories (Accessories, Hoodies, and Tshirts).
Let’s jump to Visual Builder and see how we can display these in the chatbot. It looks like the bot should get much more complex? Exactly! We’ll add one more block to the flow 😁
Notice the use of the $_selected_category_id system attribute in the settings for the second CATEGORY block. This variable will be updated every time the user is clicking the button in the dynamic gallery, and the bot will be able to display correct sub-categories based on their value.
What happens if there are no sub-categories in the category that the user selects? A run-time error will happen, and control will be sent to the “ERROR” exit from the block. We connect a simple text block there to display the error, and it’s possible to do more complex error handling in a real bot.
Here’s what it looks like in the Messenger:
Finally, it looks like we’ve managed to put the whole category tree from the online shop into an e-commerce chatbot with just six blocks in Activechat! Time to get to products and start selling!
Last modified 1yr ago