Notes

{% extends "base.html" %}

{% block content %}
{% load static %}
{% block main-content %}

<style>

</style>


<div class="container my-5">
<div class="row">
<h1 class="text-center mb-5">Shopping Cart</h1>
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<h3>Cart</h3>
{%for cart in carts%}
<hr>
<div class="row">
<div class="col-sm-3 text-center align-self-center"><img src="{{cart.product.image_two.url}}" alt="" srcset="" class="img-fluid img-thumbnail shadow-sm" height="150" width="150"> </div>
<div class="col-sm-9">
<div>
<h5>{{cart.product.name}}</h5>
<p class="mb-2 text-muted small">Description: that is a product of our classyshop website you can purchase our product we provide good delivry service !</p>
<div class="my-3">
<label for="quantity">Quantity:</label>
<a class="minus-cart btn" pid="{{cart.product.id}}"><i class="btn btn-danger"></i></a>
<span id="quantity">{{cart.quantity}}</span>
<a class="plus-cart btn" pid="{{cart.product.id}}"><i class="btn btn-success"></i></a>
</div>
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-secondary mr-3 remove-cart" pid="{{cart.product.id}}">Remove item </a>
<p class="mb-0"><span><strong>RS.{{cart.product.discounted_price}}</strong></span></p>
</div>
</div>
</div>
</div>
{% endfor %}


<div class="row my-5">


</div>
</div>
</div>
</div>

<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h3>The Total Amount of</h3>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">Amount<span>Rs.<span id="amount">{{amount}}</span></span></li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">Shipping<span>Rs. 70.00</span></li>
<li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>Total</strong> <small>(including VAT)</small>
</div>
<span><strong>Rs. <strong id="totalamount">{{totalamount}}</strong></strong></span>
</li>
</ul>
<div class="d-grid"><a href="{% url 'profile'%}" class="btn btn-primary">Place Order</a></div>
</div>
</div>
</div>

</div>
</div>
<div class="container">
<div class="row">
</div>
</div>
</div>
{% endblock main-content %}

{% endblock content %}







$(document).ready(function(){
$('.plus-cart').click(function () {
var id = $(this).attr("pid").toString();
var eml = $(this).closest('.row').find('#quantity');

$.ajax({
type: "GET",
url: "/pluscart",
data: {
prod_id: id
},
success: function (data) {
eml.innerText = data.quantity
window.location.reload(true);
document.getElementById("amount").innerText = data.amount
document.getElementById("totalamount").innerText = data.totalamount

}
})
})
});



$('.minus-cart').click(function (){
var id =$(this).attr("pid").toString();
var eml = $(this).closest('.row').find('#quantity');

$.ajax({
type:"GET",
url:"/minuscart",
data: {
prod_id:id
},
success: function(data){
eml.innerText=data.quantity
window.location.reload(true);
document.getElementById('amount').innerText = data.amount
document.getElementById('totalamount').innerText = data.totalamount

}

})
})


$('.remove-cart').click(function (){
var id =$(this).attr("pid").toString();
var eml = this
$.ajax({
type:"GET",
url:"/removecart",
data:{
prod_id:id
},
success:function(data){
document.getElementById("amount").innerText=data.amount
document.getElementById("totalamount").innerText=data.totalamount
eml.parentNode.parentNode.parentNode.parentNode.remove()

}

})
})