-
Products go here.
+
Loading...
+
+ Found {{ results.length }} results for search term {{ lastSearch }}.
+
+
+
+
+
![]()
+
+
+
+
{{ item.title }}
+
Price: {{ price | currency }}
+
+
+
+
Shopping Cart
-
+
+
+ {{ item.title }}
+
+
+ {{ item.price | currency }} x {{ item.qty }}
+
+
+
+
+
+
+
+
+
Total: {{ total | currency }}
+
+
No items in the cart.
@@ -33,7 +72,10 @@
Shopping Cart
-
+
+
+
+
diff --git a/public/script.js b/public/script.js
index a96bcad1..ff98de97 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1 +1,102 @@
-console.log('It works.');
+var PRICE = 9.99;
+var LOAD_NUM = 10;
+
+new Vue({
+ el: '#app',
+ data: {
+ total: 0,
+ items: [],
+ results: [],
+ cart: [],
+ newSearch: 'anime',
+ lastSearch: '',
+ loading: false,
+ price: PRICE
+ },
+ mounted: function() {
+ this.onSubmit();
+ var elem = document.getElementById('product-list-bottom');
+ var watcher = scrollMonitor.create(elem);
+ var vue = this;
+ watcher.enterViewport(function() {
+ vue.appendItems();
+ });
+ },
+ filters: {
+ currency: function(price) {
+ return '$'.concat(price.toFixed(2));
+ }
+ },
+ computed: {
+ noMoreItems: function() {
+ return this.results.length === this.items.length && this.results.length > 0;
+ }
+ },
+ watch: {
+ cart: {
+ handler: function() {
+ console.log('cart changed');
+ },
+ deep: true
+ }
+ },
+ methods: {
+ appendItems: function() {
+ if (this.items.length < this.results.length) {
+ var append = this.results.slice(this.items.length, this.items.length + LOAD_NUM);
+ this.items = this.items.concat(append);
+ }
+ },
+ onSubmit: function() {
+ if (this.newSearch.length) {
+ this.lastSearch = this.newSearch;
+ this.loading = true;
+ this.items = [];
+ this.results = [];
+ this.$http
+ .get('/search/'.concat(this.newSearch))
+ .then(function(res) {
+ this.loading = false;
+ this.results = res.data;
+ this.appendItems();
+ })
+ ;
+ }
+ },
+ addItem: function(index) {
+ var item = this.items[index];
+ var found = false;
+ for (var i = 0; i < this.cart.length; i++) {
+ if (this.cart[i].id === item.id) {
+ this.cart[i].qty++;
+ found = true;
+ }
+ }
+ if (!found) {
+ this.cart = this.cart.concat({
+ id: item.id,
+ title: item.title,
+ qty: 1,
+ price: PRICE
+ });
+ }
+ this.total += PRICE;
+ },
+ inc: function(item) {
+ item.qty++;
+ this.total += PRICE;
+ },
+ dec: function(item) {
+ item.qty--;
+ this.total -= PRICE;
+ if (item.qty <= 0) {
+ for (var i = 0; i < this.cart.length; i++) {
+ if (this.cart[i].id === item.id) {
+ this.cart.splice(i, 1);
+ break;
+ }
+ }
+ }
+ }
+ }
+});