superglue.js/examples/basket/template.html

Simple web application platform using superviews.js and supermodels.js together with browserify

<template name="basket" args="model">
  <script>
    var basket = model.basket
    var products = model.products
    var linesSummary = require('./lines-summary.html')
    var totalSummary = require('./total-summary.html')

    function add (product) {
      var items = basket.items

      var existing;
      for (var i = 0; i < basket.items.length; i++) {
        if (basket.items[i].productId === product.productId) {
          existing = basket.items[i]
          break
        }
      }

      if (existing) {
        existing.quantity++
      } else {
        var item = items.create()
        item.productId = product.productId
        item.quantity = 1
        items.push(item)
      }
    }

    function remove ($index) {
      basket.items.splice($index, 1)
    }

    var sortBy = basket.sortBy
    var sortByTerms = ['cost', 'quantity', 'productId']

  </script>

  <select onchange="{basket.sortBy = this.value}" class="pull-right">
    <option>Sort by:</option>
    <option each="term in sortByTerms" value="{term}">{term}</option>
  </select>

  <script>
    linesSummary(basket)
  </script>

  <table class="table" if="basket.items.length">
    <thead>
      <tr>
        <th>id</th>
        <th>productId</th>
        <th>productName</th>
        <th>quantity</th>
        <th>price</th>
        <th>discountPercent</th>
        <th>cost</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr each="item, item.id in basket.sortedItems">
        <td>{item.id}</td>
        <td>{item.product.productId}</td>
        <td>{item.product.productName}</td>
        <td><input type="number" value="{item.quantity}" onchange="{item.quantity = this.value}"></td>
        <td>{item.product.price}</td>
        <td>{item.product.discountPercent * 100 + ' %'}</td>
        <td>{item.cost.toFixed(2)}</td>
        <td>
          <button onclick="{remove($index)}" class="btn btn-sm btn-danger">Remove</button>
        </td>
      </tr>
    </tbody>
    <script>
      totalSummary(basket)
    </script>
  </table>
  <div if="!basket.items.length" class="alert alert-info">You have no items in your basket!</div>

  <div each="product in products" style="width: 33%; float: left;">
    <div>{product.productId}</div>
    <div>{product.productName}</div>
    <div>{product.price}</div>
    <div>{product.discountPercent * 100 + ' %'}</div>
    <div>{product.cost}</div>
    <img src="{product.image}" style="max-width: 240px; max-height: 200px;"/>
    <button onclick="{add(product)}" class="btn btn-sm btn-success">Add to basket</button>
  </div>

  <div each="key, key in model">
    <span>{key}</span>
    <span>{$index}</span>
  </div>

  <pre>
    <code>
    {JSON.stringify(model, null, 2)}
    </code>
  <pre>
</template>