go-web-starter-kit/views/shopping/index.html

<script>
  /*
   * Advantages of => over function:
   * - Easier transition from variables to callbacks.
   * - this variable is locked so isn't random
   * - can't accidentally rename the function because it's const
   * - callbacks with function are fucking stupid.
   */
  let Data = new ForeverScroll("/api/shopping/products");

  const cartItems = [];

  const update = () => {
    // product list
    // cart contents
    const cart = $id('cart');
    let total = cartItems.reduce((a, v) => a + v.Price, 0.0);

    if(cartItems.length > 0) {
      $style_del(cart, 'hidden');
      $render_data('cart-row', 'cart-items', cartItems);
    } else {
      $style_add(cart, 'hidden');
    }

    $text($id('cart-total'), `${total}`);
  }

  const remove = (item_number) => {
    cartItems.splice(item_number, 1);
    update();
  }

  const addToCart = (item_i) => {
    cartItems.push(Data.items[item_i]);
    update();
  }

  $boot(async () => {
    // kind of not good so revisit how Data works
    const items = await Data.init();
    const list = $id('product-list');
    const tmpl = $id('product-row');

    for(let i in items) {
      $append(list, $render(tmpl, {i, item: items[i]}));
    }
  });

</script>

<style>
.hidden {
  visibility: hidden;
}
</style>

<h1>Products</h1>

<div id="cart" class="hidden">
  <aside>
    <table id='cart-items'>
    </table>

    <template id="cart-row">
      <tr id='item-${i}'>
        <td>${item.Title}</td>
        <td>${item.Price}</td>
        <td>
          <button type="button" onclick='remove(${i})'>X</button>
        </td>
      </tr>
    </template>

    <p>Cart total is <span id='cart-total'></span></p>
    <a href="/shopping/checkout">
      <button type="button">Checkout</button>
    </a>
  </aside>
</div>

<block id='product-list'>
  <template id='product-row'>
    <bar class="bg-gray-800">
      <shape></shape>
      <div>
        <h4>${item.Title}</h4>
        <aside>${item.Description}</aside>

        <bar class="justify-between" style="padding:30px">
        <div class="text-2xl">Price: <span>${item.Price}</span></div>
          <button onclick="addToCart(${i})" id="cart-button" type="button">
            <span>
              Add to Cart
            </span>
          </button>
        </bar>
      </div>
    </bar>
  </template>
</block>

<div id='canary'></div>