Issue
i have 2 types of a product, one with attributes and a product without attributes.i want to add product to cart in the listing page using jquery such that on click on the add to cart button the product is just added to cart table.for the product with attributes the user will have to select an attribute but for the product with attributes it will just add to cart.
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty" >
<input class="prod_id<?php echo $countp;?>" name="product_id" type="hidden" value="{{ $product->id }}">
@if ($product->is_attribute==0)
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
<!-- Product price-->
@if ($discountedprice>0)
<del><p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p></del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh {{ $discountedprice }}</p>
@else
<p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p>
@endif
</div>
</div>
@elseif ($product->is_attribute==1)
<select class="custom-select prodsize" productid="{{ $product->id }}" name="productattrsize">
<option value="">Select</option>
@foreach ($product->merchadiseattributes as $attribute )
<option value="{{ $attribute->productattr_size }}" required>{{ $attribute->productattr_size }}</option>
@endforeach
</select>
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
<!-- Product price-->
@if ($discountedprice>0)
<del>
<p class="lead text-muted text-decoration-line-through" id="showattrprice">sh {{$product->merch_price }}</p>
</del>
<p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh {{ $discountedprice }}</p>
@endif
</div>
</div>
@endif
<div class="d-flex ">
<a href="{{ url('merchadise/'.Str::slug($product->merch_name).'/'.$product->id) }}" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart<?php echo $countp;?>">Add to Cart</a>
<div id="successmsg<?php echo $countp;?>" class="alert alert-message bg-grey text-dark"></div>
</div>
</div>
the case here is for the product without attribute the size will be passed as small but for the dropdown the selected option will be selected.the issue am getting here is my jquery code is only selecting on the first attribute option that i have selected.also its not grabbing the size for the products without attributes,this one ..this is my jquery code.
$('.add-to-cart').click(function(e) { e.preventDefault();
var prod_id=$(this).closest('.ps-shop').find('.prod_id<?php echo $i;?>').val();
var prod_qty=$(this).closest('.ps-shop').find('.prod_qty').val();
var prod_size=$(this).closest('.ps-shop').find('.prodsize').val();
alert(prod_size)
if(prod_size==""){
alert("Please Select An Attribute");
return false;
}
$.ajax({
method:"post",
url:"add_to_cart",
data:{
'productattrsize':prod_size,
'product_id':prod_id<?php echo $i;?>,
'quantity':prod_qty,
},
success:function(response){
// console.log(response)
$('.add-to-cart<?php echo $i;?>').hide();
$('#successmsg<?php echo $i;?>').show();
$('#successmsg<?php echo $i;?>').append('product has been added to cart');
}
});
});
this is how the html code looks like in the browser
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
<div class="card-body">
<h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">cotton</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id0" name="product_id" type="hidden" value="5">
<select class="custom-select prodsize" productid="5" name="productattrsize">
<option value="">Select</option>
<option value="Green" required="">Green</option>
<option value="Black" required="">Black</option>
<option value="Blue" required="">Blue</option> </select>
<div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row"> <!-- Product price--> <del>
<p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
</del>
<p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
</div></div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
<div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
<div class="card-body">
<h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">leather</span>
<hr>
2.<span class="pt-1">casual</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id1" name="product_id" type="hidden" value="4">
<select class="custom-select prodsize" productid="4" name="productattrsize">
<option value="">Select</option> <option value="Small" required="">Small</option> <option value="Medium" required="">Medium</option> </select><div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
</del>
<p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p> </div></div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
<div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">woolen</span>
<hr>
2.<span class="pt-1">casual</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id2" name="product_id" type="hidden" value="3">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 301</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
<div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">woolen</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id3" name="product_id" type="hidden" value="2">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 200</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
<div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">cotton</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id4" name="product_id" type="hidden" value="1">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 1</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
<div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
how can i make it happen such that if the product selects an option the selected option is passed but if the product doesnt have attributes the value of small is passed to the function.
Solution
Below you will find a working snippet that handles all your div.card elements according to your demands:
// url for testing:
const url="https://jsonplaceholder.typicode.com/users/";
$(".row").on("click","a[class*=add-to-cart]",function(ev){
const card=$(this).closest(".card-body"),
sizeSel=$("select",card);
if(sizeSel.length>0&&sizeSel.val()=="") alert("Please specify your size/colour!")
else
$.ajax({method:"post",url:url,
data:{
productattrsize:sizeSel.length?sizeSel.val():"small",
product_id:$("[name=product_id]",card).val(),
quantity:$(".prod_qty",card).val ()},
success:response=>{
console.log(response)
$(this).hide();
$('.alert',card).show().append('product has been added to cart');
}
});
})<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
<div class="card-body">
<h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">cotton</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id0" name="product_id" type="hidden" value="5">
<select class="custom-select prodsize" productid="5" name="productattrsize">
<option value="">Select</option>
<option value="Green" required="">Green</option>
<option value="Black" required="">Black</option>
<option value="Blue" required="">Blue</option>
</select>
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
</del>
<p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
<div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
<div class="card-body">
<h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">leather</span>
<hr>
2.<span class="pt-1">casual</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id1" name="product_id" type="hidden" value="4">
<select class="custom-select prodsize" productid="4" name="productattrsize">
<option value="">Select</option>
<option value="Small" required="">Small</option>
<option value="Medium" required="">Medium</option>
</select>
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
</del>
<p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
<div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">woolen</span>
<hr>
2.<span class="pt-1">casual</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id2" name="product_id" type="hidden" value="3">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 301</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
<div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">woolen</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id3" name="product_id" type="hidden" value="2">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 200</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
<div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
<img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
<div class="card-body">
<h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
<div class="d-flex align-content-center justify-content-center">
<span class="pt-1">Tshirts</span>
</div>
1.<span class="pt-1">cotton</span>
<hr>
2.<span class="pt-1">wedding</span>
<div class="fs-sm mb-4">
<input name="quantity" type="number" value="1" class="prod_qty">
<input class="prod_id4" name="product_id" type="hidden" value="1">
<input class="prodsize" name="productattrsize" type="text" value="small">
<div class="d-flex align-items-center justify-content-between pt-3">
<div class="d-flex flex-row">
<!-- Product price-->
<del>
<p class="lead text-muted text-decoration-line-through">sh 1</p>
</del>
<p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
</div>
</div>
<div class="d-flex ">
<a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
<a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
<div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</div>You can make life even easier for yourself if you left out the numbered classes, as generated by your laravel template (like add-to-cart0, add-to-cart1 ...) and simply use a generic class name (like: add-to-class). These generic class names are easier to search for with a CSS selector (like .add-to-class instead of [class*=add-to-class].
Answered By - Carsten Massmann Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.