Title1

Title2

Title3

6-3-3 商品展示樣版(輪播)

 



/*============================================
  商品展示樣版(輪播)
  https://developers.line.biz/flex-simulator/    
============================================*/
function prodCarouselFlexTemplate() {
  let contents = [];
  // 啟用商品
  let prods = get_rows_prod_main_enable();

  prods.forEach(function (prod) {
    let content = [{
      "type": "text",
      "text": prod.title,
      "weight": "bold",
      "size": "sm",
      "wrap": true
    },
    {
      "type": "text",
      "text": '商品單位: ' + prod.unit,
      "wrap": true,
      "color": "#8c8c8c",
      "size": "xs",
      "flex": 5
    },
    {
      "type": "text",
      "text": '商品單價: ' + prod.price + ' 元',
      "wrap": true,
      "color": "#8c8c8c",
      "size": "xs",
      "flex": 5
    },
    {
      "type": "separator",
      "margin": "xs"
    },
    {
      "type": "text",
      "text": prod.content,
      "wrap": true,
      "color": "#8c8c8c",
      "size": "xs",
      "flex": 5
    },
    {
      "type": "separator",
      "margin": "xs"
    },
    {
      "type": "text",
      "text": '訂購商品,請按下方數量鈕',
      "wrap": true,
      "color": "#ff0000",
      "size": "xs",
      "flex": 5,
      "align": "center",
      "margin": "xs"
    },
    {
      "type": "separator",
      "margin": "xs"
    }];

    if (prod.info) {
      content.push({
        "type": "button",
        "style": "primary",
        "height": "sm",
        "action": {
          "type": "uri",
          "label": "商品資訊",
          "uri": "https://linecorp.com"
        }
      })
    }

    prod.amount.split('|').forEach(function (amount) {
      content.push({
        "type": "button",
        "style": "link",
        "height": "sm",
        "action": {
          "type": "message",
          "label": amount,
          "text": `${amount} ${prod.title}`
        }
      });
    })


    contents.push(
      {
        "type": "bubble",
        "size": "mega",
        "hero": {
          "type": "image",
          "url": prod.pic,
          "size": "full",
          "aspectMode": "cover",
          "aspectRatio": "320:213"
        },
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "paddingAll": "13px",
          "contents": content
        }
      })
  })

  let messages = {
    "type": "carousel",
    "contents": contents
  }
  return messages;
}