教程: 将定制响应呈现为内容轮播

本教程说明了如何使用定制响应以内容轮播的形式呈现信息。

有关本教程中描述的示例的完整工作版本，请参阅 Content carousel for watsonx Assistant Web chat。

内容轮播 (或 滑块) 是一种交互式元素类型，它将选项显示为可滚动的幻灯片系列。

watsonx Assistant 没有内容轮播的内置响应类型。 相反，您可以使用 user_defined 响应类型发送包含要显示的信息的定制响应，并通过使用标准 JavaScript 库扩展 Web 交谈以呈现内容轮播。

此示例显示如何使用 S雨刮 库将定制响应呈现为内容轮播。

1. 在要创建内容轮播的操作步骤中，使用 JSON 编辑器来定义 user_defined 定制响应，该响应可以包含要包含的任何数据。 在响应中，指定填充内容轮播所需的数据。 在此示例中，我们将发送有关各种类型的信用卡的信息，这些信息显示在定制响应中:

   {
     "generic": [
       {
         "user_defined": {
           "carousel_data": [
             {
               "alt": "everyday card",
               "url": "lendyr-everyday-card.jpg",
               "title": "The Everyday Card",
               "description": "$300 bonus plus 5% gas station cash back offer. Earn 2% cash back on all other purchases."
             },
             {
               "alt": "preferred card",
               "url": "lendyr-preferred-card.jpg",
               "title": "The Preferred Card",
               "description": "$300 bonus plus 5% gas station cash back offer. Earn 5% cash back on all other purchases."
             },
             {
               "alt": "topaz card",
               "url": "lendyr-topaz-card.jpg",
               "title": "The Topaz Card",
               "description": "$90 Annual fee. Earn 120,000 bonus points. Earn additional points on every purchase."
             }
           ],
           "user_defined_type": "carousel"
         },
         "response_type": "user_defined"
       }
     ]
   }
   

   在此示例中，我们将在 user_defined 响应中包含轮播数据。 根据助手的设计，另一个选项是将数据存储在可由 Web 聊天从 context 对象访问的技能变量中。

2. 为 customResponse 事件创建处理程序。 此处理程序使用S雨刮库定义的样式来呈现内容轮播。 (您可以在 完整示例中查看这些样式的定义。)

   此函数还依赖于帮助程序函数 (createSlides())，我们将在下一步中创建此函数。 此函数的完整代码还会初始化S雨刮库。 有关更多信息，请参阅 完整示例。

   function carouselCustomResponseHandler(event, instance) {
     const { element, message } = event.data;
   
     element.innerHTML = `
       <div class="Carousel">
         <div class="swiper">
           <div class="swiper-wrapper"></div>
         </div>
         <div class="Carousel__Navigation" >
           <button type="button" class="Carousel__NavigationButton Carousel__NavigationPrevious bx--btn bx--btn--ghost">
             <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M20 24L10 16 20 8z"></path></svg>
           </button>
           <div class="Carousel__BulletContainer"></div>
           <button type="button" class="Carousel__NavigationButton Carousel__NavigationNext bx--btn bx--btn--ghost">
             <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 8L22 16 12 24z"></path></svg>
           </button>
         </div>
       </div>`;
   
     // Once we have the main HTML, create each of the individual slides that will appear in the carousel.
     const slidesContainer = element.querySelector('.swiper-wrapper');
     createSlides(slidesContainer, message, instance);
   
   ...
   
   }
   

3. 创建 createSlides() 帮助程序函数，用于呈现内容轮播中的每个幻灯片。 此函数从定制响应 (alt，url，title 和 description) 中检索值，并使用这些值来填充幻灯片的 HTML。 (有关完整函数，请参阅 完整示例。)

   carouselData.forEach((cardData) => {
     const { url, title, description, alt } = cardData;
     const cardElement = document.createElement('div');
     cardElement.classList.add('swiper-slide');
   
     cardElement.innerHTML = `
       <div class="bx--tile Carousel__Card">
         <img class="Carousel__CardImage" src="${url}" alt="${alt}" />
         <div class="Carousel__CardText">
           <div class="Carousel__CardTitle">${title}</div>
           <div class="Carousel__CardDescription">${description}</div>
         </div>
   
         <a href="https://www.ibm.com" class="Carousel__CardButton bx--btn bx--btn--primary" target="_blank">
           View more details
         </a>
   
         <button type="button" class="Carousel__CardButton Carousel__CardButtonMessage bx--btn bx--btn--primary">
           Tell me more about this
         </button>
       </div>
     `;
   
     ...
   
     });
   

4. 在 onLoad 事件处理程序中，使用 on() 实例方法来预订 customResponse 事件，并将 carouselCustomResponseHandler() 函数注册为回调。

     instance.on({
       type: 'customResponse',
       handler: (event, instance) => {
         if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'carousel') {
           carouselCustomResponseHandler(event, instance);
         }
       },
     });
   

   在此示例中，我们将检查定制响应的定制 user_defined_type 属性，并仅在指定类型为 carousel 时调用 carouselCustomResponseHandler() 函数。 此可选检查显示如何使用定制属性来定义多个不同的定制响应 (对于 user_defined_type，每个响应具有不同的值)。

有关完整的工作代码，请参阅 Content carousel for watsonx Assistant web chat 示例。