Add and remove items to cart, and view its content.

Introducing the shopping cart

No real e-store without a shopping cart, so let’s implement one. First we get the shopping cart status and content to display them on the header of each page.

camerastore/shop.py


cart = ShoppingCart.get()

Then display the status and content of the shopping cart in the header of the main layout template layout.html

camerastore/templates/default.html


<<div class="cart box_1">
    <h3> $<span id="cart_total" class="simpleCart_total"> {{ cart.total }} </span>
    (<span id="cart_items_count" class="simpleCart_quantity"> {{ cart.count }} Items</span>)
    <img src="/static/images/bag.png" alt="" /></h3>

    <p><a href="/cart" class="simpleCart_empty">Your cart</a></p>
    <div class="clearfix"> </div>
</div>

Add items the shopping cart

We use AJAX to make a HTTP POST to our backend call with information about the item to add to the shopping cart, view js/cart.js file which contains the javascript AJAX code.

This is how to add the item to the cart, it is as simple as a single method call.

camerastore/cart.py


@app.route("/cart/add", methods=['POST'])
def add_to_cart():
    cart = ShoppingCart.add(product=request.form['product'], quantity=int(request.form['quantity']))
    return jsonify(cart)

View the shopping cart

camerastore/cart.py


@app.route("/cart")
def view_cart():
    cart = ShoppingCart.get()
    return render_template("cart.html", cart=cart)

In a previous step (Introducing the shopping cart), we learned how to get the shopping cart, and displayed its status, Now all what we need is to write the view template to display full content of the shopping cart.

camerastore/templates/cart.html


<h2>MY SHOPPING CART </h2>
{% if cart.count <= 0 %}
<h1>No Items in your cart yet</h1>
{% else %}
<div class="cart-gd">
    {% for item in cart.items %}
    <div class="cart-header" id="{{item.id}}" >

        <a href="#" class="close1 deleteItem" data-item-id="{{item.id}}"> </a>
        <div class="cart-sec simpleCart_shelfItem">
            <div class="cart-item cyc">
                <img src="{{item.product.mainPhoto.url}}" class="img-responsive" alt="" />
            </div>
            <div class="cart-item-info">
                <h3><a href="#"> {{ item.product.title }} </a></h3>
                <div class="delivery">
                    <p><span>Unit price : $</span> <span >{{ item.product.price }}</span></p>
                    <div class="clearfix"></div>
                    <p><span>Quantity : </span> <span >{{ item.quantity }}</span></p>
                    <div class="clearfix"></div>
                    <p><span>Total price : $</span> <span >{{ item.total }}</span></p>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="clearfix"></div>

        </div>
    </div>
    {% endfor %}
    <div style="margin-top: 50px; text-align: right;">
        <a href="/checkout" class="big_button">Checkout</a>
    </div>
</div>
{% endif %}

Delete items from the cart

Like the ‘add item’ operation, removing item is dome with AJAX call to the remove_from_cart method:

camerastore/cart.py


@app.route("/cart/remove/<item_id>", methods=['POST'])
def remove_from_cart(item_id):
    cart = ShoppingCart.remove(item_id)
    return jsonify(cart)