如何将数组转换为 CSML 中的组件?
How to transform an array into a Component in CSML?
我在 CSML 中创建了一个聊天机器人,我正在尝试找到一种将数组集成到轮播中的方法。
我的问题是我无法在 Carousel 组件内循环。
mainCourse:
// my array
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
...
]
say "Thank you, I also love {{firstChoice}} "
say "Which pizza would you like? "
say Carousel(
cards = [
// Where I'd like to include my array
]
)
谢谢!
您需要遍历数组以获得 component-compatible Card() 组件列表,这里是供参考的文档:https://docs.csml.dev/studio/channels/slack/message-formats#carousel-card
所以下面的代码可以工作:
start:
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Diavola", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/11-diavola.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
]
// You create an empty array
do cards = []
// You loop through your array and foreach entry you create a Card() component
// that you add to the array that'll you'll later use for the Carousel() component
foreach (v, i) in menu {
do newCard = Card(
title=v.name,
subtitle=v.type,
image_url=v.image,
buttons=[Button("Choose")]
)
do cards.push(newCard)
}
say Carousel(cards=cards)
goto end
我在 CSML 中创建了一个聊天机器人,我正在尝试找到一种将数组集成到轮播中的方法。 我的问题是我无法在 Carousel 组件内循环。
mainCourse:
// my array
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
...
]
say "Thank you, I also love {{firstChoice}} "
say "Which pizza would you like? "
say Carousel(
cards = [
// Where I'd like to include my array
]
)
谢谢!
您需要遍历数组以获得 component-compatible Card() 组件列表,这里是供参考的文档:https://docs.csml.dev/studio/channels/slack/message-formats#carousel-card
所以下面的代码可以工作:
start:
do menu = [
{ "name": "Margarita", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/02-margherita.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Marinara", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/01-marinara.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Quatro Fromaggi", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/08-quattro-formaggi.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Diavola", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/11-diavola.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Calzone", "type":"pizza", "image":"https://i1.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/14-calzone-tav.png?zoom=2&resize=150%2C150&ssl=1" },
{ "name": "Vegetariana", "type":"pizza", "image":"https://i2.wp.com/mycornerofitaly.com/wp-content/uploads/2016/11/13-vegetariana.png?zoom=2&resize=150%2C150&ssl=1" }
]
// You create an empty array
do cards = []
// You loop through your array and foreach entry you create a Card() component
// that you add to the array that'll you'll later use for the Carousel() component
foreach (v, i) in menu {
do newCard = Card(
title=v.name,
subtitle=v.type,
image_url=v.image,
buttons=[Button("Choose")]
)
do cards.push(newCard)
}
say Carousel(cards=cards)
goto end