I have several cards with items. I added a counter to each card and a button 'Add to cart'. I want to pass the count of item into django view using ajax. But I dont know how to pass variable from counter to ajax function, for each card. The current version doesn't work correctly, cuz every time count = 1.
var globalVariable;
var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this)
.parent(".col")
.find(".input-qty");
$n.val(Number($n.val()) + 1);
globalVariable = $(this).$n.val();
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this)
.parent(".col")
.find(".input-qty");
var amount = Number($n.val());
1
if (amount > 0) {
$n.val(amount - 1);
globalVariable = $(this).$n.val();
}
});
$(document).ready(function() {
$(".send-quantity").click(function() {
var quantity = globalVariable;
if (quantity === undefined) {
quantity = 1;
}
var id = $(this).data("id");
$.ajax({
url: "{% url 'stripe_order:cart_add' %}",
data: {
'id': id,
'quantity': quantity,
},
});
});
});
My HTML:
{% for item in items %}
<div class="col">
<div class="card mb-4 rounded-4 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">{{ item.name }}</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title ">${{ item.price }}</h4>
<ul class="list-unstyled mt-3 mb-4">
<li>{{ item.description }}</li>
</ul>
<div class="row">
<div class="col">
<div class="col input-group input-group-sm mb-3">
<button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
<input type="text" name="qty" value="1" class="input-qty form-control">
<button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col">
<a data-id="{{ item.id}}" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
THX!
To get the quantity you can simply use closest('.card-body').find(".input-qty").val() which will return the current count where Add to Cart is clicked. Also, you don't need globalVariable as count value will be dynamically fetched.
Demo Code :
var buttonPlus = $(".qty-btn-plus");
var buttonMinus = $(".qty-btn-minus");
buttonPlus.click(function() {
var $n = $(this)
.parent(".col")
.find(".input-qty");
$n.val(Number($n.val()) + 1);
});
buttonMinus.click(function() {
var $n = $(this)
.parent(".col")
.find(".input-qty");
var amount = Number($n.val());
1
if (amount > 0) {
$n.val(amount - 1);
}
});
$(document).ready(function() {
$(".send-quantity").click(function() {
var quantity = $(this).closest('.card-body').find(".input-qty").val(); //get quantity
if (quantity === undefined) {
quantity = 1;
}
var id = $(this).data("id");
console.log('id - ' + id + ' | count - ' + quantity);
//ajax call--
});
});.send-quantity {
color: green
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col">
<div class="card mb-4 rounded-4 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">XYZ</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title ">$20</h4>
<ul class="list-unstyled mt-3 mb-4">
<li>something something..</li>
</ul>
<div class="row">
<div class="col">
<div class="col input-group input-group-sm mb-3">
<button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
<input type="text" name="qty" value="1" class="input-qty form-control">
<button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col">
<a data-id="1" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-4 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">XYZ 2</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title ">$22</h4>
<ul class="list-unstyled mt-3 mb-4">
<li>something something..</li>
</ul>
<div class="row">
<div class="col">
<div class="col input-group input-group-sm mb-3">
<button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
<input type="text" name="qty" value="1" class="input-qty form-control">
<button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col">
<a data-id="2" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-4 shadow-sm">
<div class="card-header py-3">
<h3 class="my-0 fw-normal">XYZ 3</h3>
</div>
<div class="card-body">
<h4 class="card-title pricing-card-title ">$25</h4>
<ul class="list-unstyled mt-3 mb-4">
<li>something something..</li>
</ul>
<div class="row">
<div class="col">
<div class="col input-group input-group-sm mb-3">
<button class="qty-btn-minus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-minus"></i></button>
<input type="text" name="qty" value="1" class="input-qty form-control">
<button class="qty-btn-plus w-10 btn btn-outline-primary btn-sm" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col">
<a data-id="3" type="button" class="w-10 btn btn-outline-primary btn-sm send-quantity">Add to cart</a>
</div>
</div>
</div>
</div>
</div>