Finishing Cart component - lhmisho/django-eCommerce GitHub Wiki

In this section i have finished the cart component

Activate cart remove button

**for this i added the update cart snippets to the cart home **

{% extends 'base.html'%}

{% block content%}
    <h2>Cart</h2>
    {% if cart.products.exists %}
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Product Name</th>
                <th scope="col">Product Price</th>
              </tr>
            </thead>
            {% for product in cart.products.all %}
            <tbody>
              <tr>
                <th scope="row">{{forloop.counter}}</th>
                <!-- included this portion for active remonve cart functionality-->
                <td>
                  <a href="{{product.get_absolute_url}}">{{product.title}}</a>
                  {% include 'products/snippets/update_cart.html' with product=product cart=cart in_cart=True %}
                </td>
                <td>{{product.price}}</td>
              </tr>
            {%endfor%}
              <tr>
                <td colspan="2"></td>
                <td><b>Subtotal </b>{{cart.subtotal}}</td>
              </tr>
              <tr>
                <td colspan="2"></td>
                <td><b>Total </b>{{cart.total}}</td>
              </tr>
            </tbody>
        </table>
    {%else%}
        <p class="lead">Cart empty</p>
    {%endif%}
{%endblock%}

Some modification at products/snippents/update_cart.html

<form method="POST" action="{%url "cart:update" %}" class="form">
    {% csrf_token %}
    <input type="hidden" name="product_id" value="{{product.id}}">
    {%if in_cart %}
        <button type="submit" class="btn btn-link" style="padding:0">remove?</button>
    {%else%}
        {%if product in cart.products.all  %}
            <button type="submit" class="btn btn-link" style="padding:0">remove?</button>
        {%else%}
            <button type="submit" class="btn btn-success">Add to cart</button>
        {%endif%}
    {%endif%}
</form>

Manage views for showing cart amount

def cart_update(request):
    print(request.POST)
    # getting the product_id which is sent from the update_cart.html
    product_id  = request.POST.get('product_id')

    # if the product_id is not none then we taking it to product_obj
    if product_id is not None:
        try:
            product_obj = Product.objects.get(id=product_id)
        except DoesNotExist:
            print("product not exists")
            return redirect("cart:home")   # if product is not exists simply just redirect to home
        cart_obj, new_obj = Cart.objects.new_or_get(request)    # we also added this line to products view on get_context_data so that we can add cart to specific product

        # if the product_obj is exists in cart than we can remove
        if product_obj in cart_obj.products.all():
            cart_obj.products.remove(product_obj)
        # if the product_obj is exists in cart than we can add it
        else:
            cart_obj.products.add(product_obj)
        #return redirect(product_obj.get_absolute_url())
############################################################################
        request.session['total_product'] = cart_obj.products.count()
    return redirect("cart:home")

In this portion i added this line to calculate the how many items are selected

 request.session['total_product'] = cart_obj.products.count()

example

Adding cart icon on navbar

products/base/navbar.html

<li class="nav-item {% if request.path == cart_url %} active {%endif%}">
            <a class="nav-link" href="{{ cart_url }}">{{request.session.total_product}} <i class="fa fa-shopping-cart"></i></a>
          </li>