line_flex_message_simulator_render_demo.rb

require "json"

# 資料表
class Product
  attr_accessor :name
  attr_accessor :price
  attr_accessor :image
  attr_accessor :inventory
  def initialize(name:, price:, inventory:, image:)
    self.name = name
    self.price = price
    self.inventory = inventory
    self.image = image
  end
end

# 資料
products = [
  Product.new(
    name: "Arm Chair, White",
    price: 49.99,
    inventory: true,
    image: "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_5_carousel.png"
  ),
  Product.new(
    name: "Metal Desk Lamp",
    price: 11.99,
    inventory: false,
    image: "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_6_carousel.png"
  ),
  Product.new(
    name: "3",
    price: 11.99,
    inventory: false,
    image: "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_6_carousel.png"
  )
]

# 資料套版 line flex simulator
def to_carousel(products)
  {
    "type": "carousel",
    "contents": [
      products.first(2).map do |product|
        {
          "type": "bubble",
          "hero": {
            "type": "image",
            "size": "full",
            "aspectRatio": "20:13",
            "aspectMode": "cover",
            "url": product.image
          },
          "body": {
            "type": "box",
            "layout": "vertical",
            "spacing": "sm",
            "contents": [
              {
                "type": "text",
                "text": product.name,
                "wrap": true,
                "weight": "bold",
                "size": "xl"
              },
              {
                "type": "box",
                "layout": "baseline",
                "contents": [
                  {
                    "type": "text",
                    "text": "$#{product.price.to_s.split(".")[0]}",
                    "wrap": true,
                    "weight": "bold",
                    "size": "xl",
                    "flex": 0
                  },
                  {
                    "type": "text",
                    "text": ".#{product.price.to_s.split(".")[1]}",
                    "wrap": true,
                    "weight": "bold",
                    "size": "sm",
                    "flex": 0
                  }
                ]
              },
              ({
                "type": "text",
                "text": "Temporarily out of stock",
                "wrap": true,
                "size": "xxs",
                "margin": "md",
                "color": "#ff5551",
                "flex": 0
              } unless product.inventory)
            ].compact
          },
          "footer": {
            "type": "box",
            "layout": "vertical",
            "spacing": "sm",
            "contents": [
              {
                "type": "button",
                "style": "primary",
                "color": product.inventory ? "#00c300" : "#aaaaaa",
                "action": {
                  "type": "uri",
                  "label": "Add to Cart",
                  "uri": "https://linecorp.com"
                }
              },
              {
                "type": "button",
                "action": {
                  "type": "uri",
                  "label": "Add to wishlist",
                  "uri": "https://linecorp.com"
                }
              }
            ]
          }
        }
      end,
      ({
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "contents": [
            {
              "type": "button",
              "flex": 1,
              "gravity": "center",
              "action": {
                "type": "uri",
                "label": "See more",
                "uri": "https://linecorp.com"
              }
            }
          ]
        }
      } if products.length > 2)
    ].flatten.compact
  }
end

# flex message
def to_flex(contents)
  {
    "type": "flex",
    "altText": "this is a flex message",
    "contents": contents
  }
end

# 實際呼叫
puts to_flex(to_carousel(products)).to_json