VueJs Shopping Trolley (WIP)

index.html

<div class="container">
  <div class="shopping-trolley" id="shopping-trolley">
    <div class="col-md-2"></div>
    <div class="col-md-4">
      <h1>Goods List</h1>
      <ul class="list-group">
        <li v-repeat="good: goods"
            class="list-group-item"
            >
            {{ good.description }}
            <div class="AddToCart">
              <button v-on="click: addToCart(good)"><i class="fa fa-plus-square"></i></button>
              <span>Price: € {{ good.price }}</span>
            </div>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <h1>Shopping Cart ({{ cart.length }}) - Grand Total: € {{ cartTotal }}</h1>
      <ul class="list-group">
        <li v-repeat="item: cart" 
            class="list-group-item"
            >{{ item.description }} - Total: € {{ item.quantity * item.price }}
             <button v-on="click: removeItem(item)"><i class="fa fa-trash-o"></i></button>
             <button v-on="click: minusOne(item)"><i class="fa fa-caret-square-o-down"></i></button> 
             <button v-on="click: plusOne(item)"><i class="fa fa-caret-square-o-up"></i></button>
             <span class="badge">{{ item.quantity }}</span>
        </li>
      </ul>
    </div>
    <div class="col-md-2"></div>
    <hr />
    <!--<h3>Data Troubleshooter</h3>
    <pre>{{ $data | json }}</pre>-->
  </div>
 
</div>

script.js

new Vue({
  el: '#shopping-trolley',
  
  data: {
  	goods: [
  		{ id: 1, description: 'Razor Blade', price: 10 },
  		{ id: 2, description: 'Coffee Mug', price: 20 },
  		{ id: 3, description: 'USB Stick', price: 5 },
  		{ id: 4, description: 'Amazing Dildo', price: 35 },
  	],
    cart: [],
  },
  
  computed: {
    cartTotal: function() {     
      var total = 0;
      var item;
      
      for (item in this.cart) {
        total = total + (this.cart[item].quantity * this.cart[item].price);
      }
      
      return total;
    }
  },
 
  methods: {
    addToCart: function(good) {
      this.cart.push({
        id: good.id,
        description: good.description,
        price: good.price,
        quantity: 1
      });
      this.goods.$remove(good);
    },
    
    plusOne: function(item) {
      item.quantity = item.quantity + 1;
    },
    
    minusOne: function(item) {
      if (item.quantity == 1) {
        this.removeItem(item);
      } else {
        item.quantity = item.quantity - 1;
      }
    },
    
    removeItem: function(item) {
      this.goods.push({
          id: item.id,
          description: item.description,
          price: item.price
        });
      this.cart.$remove(item);   
    },    
  }
})

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>

style.scss

.shopping-trolley {
  margin: 0 auto; 
  
  button {
    background: none;
    border: 0;
    float: right;
    margin-left: 5px;
  }
  
  ul {
    li {
      .AddToCart {
        float: right;
      }
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

VueJs Shopping Trolley (WIP).markdown

VueJs Shopping Trolley (WIP)

Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).

Forked from Guido Bertolino's Pen VueJs Shopping Trolley (WIP).

A Pen by Yassine Ben Slimane on CodePen.

License.