Click here to Skip to main content
15,867,330 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Comments
Richard Deeming 5-Aug-21 4:39am    
You'd probably be better finding a different tutorial to follow. Most YouTube coding tutorials aren't worth the paper they're printed on.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900