'Product varient size validation on Add to card in laravel
I'm using Laravel and I'm struggling a little bit with Add to cart button validation.
The scenario is: if user want to Add to cart to cart is not added without select the product size varient, but right now there is not any such functionality on this. So how to put the validation on add to cart page for product varient, because user should not be move add to cart without select the product varient size.
productDetails.blade.php
{{-- Cart Form --}}
@if ($data->variable_product)
<form action="" id="cart-form">
<input type="hidden" value="{{ $data['id'] }}" id="product_id" name="product_id">
<input type="hidden" value="" id="sale_price_cart" name="sale_price">
<input type="hidden" value="" id="regular_price_cart" name="regular_price">
<input type="hidden" value="1" name="quantity" id="quantity">
<input type="hidden" value="" name="variant" id="variant_cart">
<input type="hidden" value="" name="discount" id="discount_cart">
<input type="hidden" value="{{ $data['category_id'] }}" name="category_id" id="category_id">
</form>
@else
<form action="" id="cart-form">
<input type="hidden" value="{{ $data['id'] }}" id="product_id" name="product_id">
<input type="hidden" value="{{ $data['simple_product']['sale_price'] }}" id="sale_price_cart" name="sale_price">
<input type="hidden" value="{{ $data['simple_product']['regular_price'] }}" id="regular_price_cart" name="regular_price">
<input type="hidden" value="1" name="quantity" id="quantity">
<input type="hidden" value="{{ $data['category_id'] }}" name="category_id" id="category_id">
<input type="hidden" value="{{ $data['simple_product']['discount'] }}" name="discount" id="discount_cart">
</form>
@endif
{{-- Cart Form --}}
<div class="py-4 col-md-12">
<a id="cart_button" class="me-3 btn btn-secondary @if ($data->variable_product) disabled @endif">
<i class="far fa-shopping-bag pe-2"></i>ADD TO CART</a>
<a id="buy_now_button" class="btn btn-secondary" href="{{ url('checkout') }}">BUY NOW</a>
</div>
<div class="row">
<div class="col-md-6">
<div class="d-flex flex-column flex-md-row mb-2">
<input type="email" class="form-control mb-2 mb-md-0" placeholder="Enter pincode">
<button class="btn btn-secondary btn-md" type="submit">CHECK</button>
</div>
</div>
<div class="pt-3 col-md-6 text-end">
<span class="pe-2">Share on: </span>
<span>
<i class="fab fa-whatsapp fs-4 pe-2"></i>
<i class="fab fa-facebook fs-4 pe-2"></i>
<i class="fab fa-instagram fs-4 pe-2"></i>
</span>
</div>
</div>
</div>
</div>
</section>
<div class="container"><hr></div>
<section class="section similar-products">
<div class="container">
<div class="m-0 p-0 row justify-content-left section-heading">
<div class="p-0 mb-4 col-lg-8 col-xl-7">
<h3 class="underline-after">Frequently Bought Together By {{ ucfirst($data->shop->name) }}</h3>
</div>
</div>
</div>
<div class="m-0 p-0 row">
<div class="col-md-12">
<div class="owl-carousel" id="similar-buy-products">
@foreach ($products as $product)
<div class="item">
<div class="card property-card">
<div class="property-image">
@if ($product->simple_product)
<a href="{{ url('product/details') . '/' . $product->id }}">
<img class="img-fluid" src="{{ asset('public/assets/images/product') . '/' . $product->simple_product->thumbnail }}" alt="">
</a>
@elseif($product->variable_product)
@if ($product->variable_product->image)
<?php $image = json_decode($product->variable_product->image); ?>
<a href="{{ url('product/details') . '/' . $product->id }}">
<img class="img-fluid"
src="{{ asset('public/assets/images/product') . '/' . $image[0] }}"
alt="">
</a>
@endif
@endif
@if ($product->reviews)
<div class="listing-rating">
<span>
@for ($i = 0; $i < intVal($product->avgreview); $i++)
<i class="fas fa-star text-warning" aria-hidden=""></i>
@endfor
</span>
</div>
@endif
</div>
<div class="card-body">
<h5 class="card-title">
@if ($product->simple_product)
{{ ucfirst($product->simple_product->name) }}
@endif
@if ($product->variable_product)
{{ ucfirst($product->variable_product->name) }}
@endif
</h5>
<div class="">
<span class="fs-6 float-start">
@if ($product->simple_product)
@if ($product->simple_product->sale_price)
₹{{ $product->simple_product->sale_price }}
@else
₹{{ $product->simple_product->regular_price }}
@endif
@else
@if ($product->variable_product)
@if ($product->variable_product->sale_price)
<?php $price = json_decode($product->variable_product->sale_price); ?>
₹{{ min($price) }}
@else
<?php $price = json_decode($product->variable_product->regular_price); ?>
₹{{ min($price) }}
@endif
@endif
@endif
<del class="fs-6 text-muted ps-2">
@if ($product->simple_product)
@if ($product->simple_product->sale_price)
₹{{ $product->simple_product->regular_price }}
@endif
@endif
@if ($product->variable_product)
@if ($product->variable_product->sale_price)
<?php $price = json_decode($product->variable_product->regular_price); ?>
₹{{ max($price) }}
@endif
@endif
</del>
</span>
<span class="fs-6 float-end text-info">
@if ($product->simple_product)
@if ($product->simple_product->discount)
{{ $product->simple_product->discount }} %OFF
@endif
@endif
@if ($product->variable_product)
@if ($product->variable_product->discount)
{{ $product->variable_product->discount }} %OFF
@endif
@endif
</span>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</section>
<section class="pt-0 section similar-products">
<div class="container">
<div class="m-0 p-0 row justify-content-left section-heading">
<div class="p-0 mb-4 col-lg-8 col-xl-7">
<h3 class="underline-after">Popular Stores
</h3>
</div>
</div>
<div class="m-0 p-0 row">
<div class="col-md-12">
<div class="owl-carousel" id="popular-stores">
@foreach ($shops as $shop)
<div class="item">
<a href="{{ url('product/list') . '/' . $shop->id }}" style="color: unset">
<div class="card popular-stores">
<div class="popular-stores-image">
<img class="img-fluid"
src="{{ asset('public/assets/images/shop') . '/' . $shop->image }}"
alt="">
<div class="store-content">
<h5 class="mb-0">{{ ucfirst($shop->name) }}</h5>
<p class="fs-6 mb-0">{{ ucfirst($shop['area']['name']) }}</p>
<div class="" style="overflow: hidden">
{{-- <span class="float-start pt-1"><i
class="text-warning fas fa-star"></i>
<i class="text-warning fas fa-star"></i>
<i class="text-warning fas fa-star"></i>
<i class="text-warning fas fa-star"></i>
<i class="text-warning fas fa-star"></i>
</span> --}}
<a href="{{ url('/product/list') . '/' . $shop->id }}"
class="float-end btn btn-sm btn-gray">Visit Store <i
class="ps-2 far fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
</section>
<script src="{{ asset('public/assets/js/jquery.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#submit-review').click(function() {
if ($("#user_rating").val() == '') {
alert('Please give rating..');
} else {
var rating = $('#user_rating').val();
var comment = $('#user_comment').val();
var product_id = $('#product_id').val();
$.ajax({
method: 'post',
url: '{{ url('submit/rating') }}',
data: {
_token: '{{ csrf_token() }}',
rating: rating,
comment: comment,
product_id: product_id
},
success: function() {
$('#successMsg').show();
$('#submit-review').addClass('disabled');
$("#successMsg").delay(3000).fadeOut(300);
}
})
}
})
var obj;
// $('#cart_button').addClass('disabled ');
$('.variant').change(function() {
var arr = [];
var product_id = $('#product_id').val();
$('input[type=radio]').each(function() {
if ($(this).prop('checked')) {
obj = $(this).val();
arr.push(obj)
}
});
$.ajax({
enctype: 'multipart/form-data',
// dataType: 'json',
url: "{{ url('get/product/variant') }}",
method: 'POST',
data: {
'_token': '{{ csrf_token() }}',
'variants': arr,
'product_id': product_id,
},
success: function(data) {
if (!jQuery.isEmptyObject(data)) {
console.log(data);
alert(data);
$('#sale_price').text('₹' + data.price);
$('#sale_price_cart').val(data.price);
$('#regular_price').text('₹' + data.regular_price);
$('#regular_price_cart').val(data.regular_price);
if (data.discount) {
$('#discount').text(data.discount + '%' + ' OFF');
$('#discount_cart').val(data.discount);
}
$('#pd_description').text(data.description);
$('#variant_cart').val(data.id);
$('#cart_button').removeClass('disabled ');
} else {
$('#cart_button').addClass('disabled ');
alert('The Variant you looked for is not Available now..!');
}
}
})
})
$('#cart_button').click(function() {
$('#cart_button').addClass('disabled ');
var form = $('#cart-form')[0];
var data = new FormData(form);
data.append('_token', '{{ csrf_token() }}');
$.ajax({
enctype: 'multipart/form-data',
method: 'POST',
url: "{{ url('insert/cart') }}",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 800000,
success: function(data) {
alert(data);
},
});
});
// $('#carousel-thumb').owlCarousel({
// loop: true,
// items: 1,
// nav: false,
// dots: true,
// margin: 5,
// })
$('#similar-buy-products').owlCarousel({
loop: true,
items: 7,
nav: false,
dots: true,
margin: 5,
responsive: {
0: {
items: 1
},
600: {
items: 4
},
1400: {
items: 7
}
},
})
$('#popular-stores').owlCarousel({
loop: true,
items: 3,
nav: false,
dots: true,
margin: 15,
autoplay: true,
autoplayTimeout: 5000,
smartSpeed: 800,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1400: {
items: 3
}
},
})
$('.add').click(function() {
if ($(this).prev().val()) {
$(this).prev().val(+$(this).prev().val() + 1);
$('#quantity').val($(this).prev().val());
// alert($(this).prev().val(+$(this).prev().val() + 1));
}
});
$('.sub').click(function() {
if ($(this).next().val() > 1) {
if ($(this).next().val() > 1) $(this).next().val(+$(this).next().val() - 1);
$('#quantity').val($(this).next().val());
}
});
$('.slider-content').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
fade: false,
infinite: false,
arrows: true,
speed: 1000,
asNavFor: '.slider-thumb',
prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});
$('.slider-thumb').slick({
slidesToShow: 4,
slidesToScroll: 4,
asNavFor: '.slider-content',
dots: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
centerMode: false,
focusOnSelect: true
});
// Rating stars
$('#stars li').on('mouseover', function() {
var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on
// Now highlight all the stars that's not after the current hovered star
$(this).parent().children('li.star').each(function(e) {
if (e < onStar) {
$(this).addClass('hover');
} else {
$(this).removeClass('hover');
}
});
}).on('mouseout', function() {
$(this).parent().children('li.star').each(function(e) {
$(this).removeClass('hover');
});
});
/* 2. Action to perform on click */
$('#stars li').on('click', function() {
var onStar = parseInt($(this).data('value'), 10); // The star currently selected
var stars = $(this).parent().children('li.star');
for (i = 0; i < stars.length; i++) {
$(stars[i]).removeClass('selected');
}
for (i = 0; i < onStar; i++) {
$(stars[i]).addClass('selected');
}
// JUST RESPONSE (Not needed)
var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
// alert(ratingValue);
$('#user_rating').val(ratingValue);
});
})
</script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|