I am following a tutorial about building an
ecommerce website with django and vue.js on YouTube
Django And Vue Ecommerce Website Tutorial - Part 1 - Setting up - YouTube[
^]
I am getting different result than what the guy on YouTube does, it's from part 6 in the tutorial
Product pictures - How to build an E-commerce website using Django 3 and Vue.js - Part 6 - YouTube[
^]
cart.html
{% extends 'app/base.html' %}
{% block title %}Cart{% endblock %}
{% block content %}
<div id="cartapp">
<h1 class="title">Cart</h1>
{% if cart %}
<div class="table">
<table class="table">
<thead>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
</thead>
<tbody>
<tr v-for="product in products">
<td>[[ product.title ]]</td>
<td><button @click="decrementQuantity(product.id, product.quantity, product.price)">-</button>[[ product.quantity ]]<button @click="incrementQuantity(product.id, product.quantity, product.price)">+</button></td>
<td>$[[ product.total_price ]]</td>
<td><button @click="removeFromCart(product.id)">Remove from cart</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Quantity</td>
<td>[[ numItems ]]</td>
<td>Total Price:</td>
<td>$[[ totalPrice ]]</td>
</tr>
</tfoot>
</table>
</div>
{% else %}
<p>Your cart is empty</p>
{% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
var productapp = new Vue({
el: '#cartapp',
delimiters: ['[[', ']]'],
store: store,
data () {
return {
products: [{{ productsstring|safe }}]
}
},
computed: {
numItems: function() {
return store.state.numItems
},
totalPrice: function() {
return parseFloat(store.state.totalPrice)
}
},
methods: {
incrementQuantity(product_id, quantity, price) {
console.log('Product_id:', product_id);
var data = {
'product_id': product_id,
'update': true,
'quantity': parseInt(quantity) + 1
};
console.log(price);
store.commit('increment', 1);
store.commit('changeTotalPrice', parseFloat(price));
fetch('/api/add_to_cart/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
credentials: 'same-origin',
body: JSON.stringify(data)
})
.then((response) => {
console.log(response)
for (var i = 0; i < this.products.length; i++) {
var product = this.products[i];
if (product.id === product_id) {
this.products[i].quantity = parseInt(this.products[i].quantity) + 1;
this.products[i].total_price = parseInt(this.products[i].quantity) * parseFloat(this.products[i].price)
}
}
})
.catch(function (error) {
console.log('Error 2');
console.log(error);
})
},
decrementQuantity(product_id, quantity, price) {
console.log('Product_id:', product_id);
var data = {
'product_id': product_id,
'update': true,
'quantity': parseInt(quantity) - 1
};
store.commit('increment', -1);
store.commit('changeTotalPrice', -parseFloat(price));
fetch('/api/add_to_cart/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
credentials: 'same-origin',
body: JSON.stringify(data)
})
.then((response) => {
console.log(response)
for (var i = 0; i < this.products.length; i++) {
var product = this.products[i];
if (product.id === product_id) {
this.products[i].quantity = parseInt(this.products[i].quantity) - 1;
this.products[i].total_price = parseInt(this.products[i].quantity) * parseFloat(this.products[i].price)
}
}
})
.catch(function (error) {
console.log('Error 2');
console.log(error);
})
},
removeFromCart(product_id) {
console.log('Product_id:', product_id);
var data = {
'product_id': product_id
};
fetch("/api/remove_from_cart/", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
credentials: 'same-origin',
body: JSON.stringify(data)
})
.then((response) => {
console.log(response)
this.products = this.products.filter(product => product.id !== product_id)
})
.catch(function (error) {
console.log('Error 2');
console.log(error);
})
}
}
});
</script>
{% endblock %}
What I have tried:
I have looked through his code and tried to spot differences.
I have some differences, but those are meant to be different.
for example I have a DecimalField instead of a float field in the models.py, in the apps,
store and
order
I also have changed cost to price, because I like to call it price more than cost.