4-3 整理一個輪播樣板

一、輪播主架構：

1. flex樣版網站
2. 從Showcase，找一個輪播樣版
3. 複製語法
4. flex主架構

   
   //---------------------------------- flex(訂單完成)
   let messages = [{
   "type": "flex",
   "altText": "訂單完成",//訊息副標題
   "contents": flexTemplate()
   }];
   
   

    

二、建立樣版函式

1. 複製
2. 更名為「carouselFlexTemplate()」
3. 將樣版網站複製語法貼上
4. 測試
5. 未來再將需要之「變數」帶入即可
6. 函式

   
   //---------------------------------- flex(商品展示)
   let messages = [{
   "type": "flex",
   "altText": "商品展示",//訊息副標題
   "contents": carouselFlexTemplate()
   }];
   
   

   
   /*============================================
   carouselFlexTemplate
   https://developers.line.biz/flex-simulator/  
   ============================================*/
   function carouselFlexTemplate() {
   let content = ``;
   let messages = {
   "type": "carousel",
   "contents": [
   {
   "type": "bubble",
   "size": "micro",
   "hero": {
   "type": "image",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",
   "size": "full",
   "aspectMode": "cover",
   "aspectRatio": "320:213"
   },
   "body": {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "text",
   "text": "Brown Cafe",
   "weight": "bold",
   "size": "sm",
   "wrap": true
   },
   {
   "type": "box",
   "layout": "baseline",
   "contents": [
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
   },
   {
   "type": "text",
   "text": "4.0",
   "size": "xs",
   "color": "#8c8c8c",
   "margin": "md",
   "flex": 0
   }
   ]
   },
   {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "box",
   "layout": "baseline",
   "spacing": "sm",
   "contents": [
   {
   "type": "text",
   "text": "東京旅行",
   "wrap": true,
   "color": "#8c8c8c",
   "size": "xs",
   "flex": 5
   }
   ]
   }
   ]
   }
   ],
   "spacing": "sm",
   "paddingAll": "13px"
   }
   },
   {
   "type": "bubble",
   "size": "micro",
   "hero": {
   "type": "image",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip11.jpg",
   "size": "full",
   "aspectMode": "cover",
   "aspectRatio": "320:213"
   },
   "body": {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "text",
   "text": "Brow&Cony's Restaurant",
   "weight": "bold",
   "size": "sm",
   "wrap": true
   },
   {
   "type": "box",
   "layout": "baseline",
   "contents": [
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
   },
   {
   "type": "text",
   "text": "4.0",
   "size": "sm",
   "color": "#8c8c8c",
   "margin": "md",
   "flex": 0
   }
   ]
   },
   {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "box",
   "layout": "baseline",
   "spacing": "sm",
   "contents": [
   {
   "type": "text",
   "text": "東京旅行",
   "wrap": true,
   "color": "#8c8c8c",
   "size": "xs",
   "flex": 5
   }
   ]
   }
   ]
   }
   ],
   "spacing": "sm",
   "paddingAll": "13px"
   }
   },
   {
   "type": "bubble",
   "size": "micro",
   "hero": {
   "type": "image",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip12.jpg",
   "size": "full",
   "aspectMode": "cover",
   "aspectRatio": "320:213"
   },
   "body": {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "text",
   "text": "Tata",
   "weight": "bold",
   "size": "sm"
   },
   {
   "type": "box",
   "layout": "baseline",
   "contents": [
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
   },
   {
   "type": "icon",
   "size": "xs",
   "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
   },
   {
   "type": "text",
   "text": "4.0",
   "size": "sm",
   "color": "#8c8c8c",
   "margin": "md",
   "flex": 0
   }
   ]
   },
   {
   "type": "box",
   "layout": "vertical",
   "contents": [
   {
   "type": "box",
   "layout": "baseline",
   "spacing": "sm",
   "contents": [
   {
   "type": "text",
   "text": "東京旅行",
   "wrap": true,
   "color": "#8c8c8c",
   "size": "xs",
   "flex": 5
   }
   ]
   }
   ]
   }
   ],
   "spacing": "sm",
   "paddingAll": "13px"
   }
   }
   ]
   }
   return messages;
   }
   
   

    

7.