My quickview does not work anymore (worked in the past) on my website. I have check with many different bug testers where the issue is in the JS file but I do not manage to find it unfortunately.
Website: https://2b1f26-2.myshopify.com/collections/latina
The codes are:
//Quick View
$(document).ready(function () {
$.getScript("//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js").done(function() {
quickView();
});
});
function quickView() {
$(".quick-view").click(function () {
if ($('#quick-view').length == 0){$("body").append('<div id="quick-view"></div>');}
var product_handle = $(this).data('handle');
$('#quick-view').addClass(product_handle);
jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
var title = product.title;
var type = product.type;
var price = 0;
var original_price = 0;
var desc = product.description;
var images = product.images;
var variants = product.variants;
var options = product.options;
var url = '/products/' + product_handle;
$('.qv-product-title').text(title);
$('.qv-product-type').text(type);
$('.qv-product-description').html(desc);
$('.view-product').attr('href', url);
var imageCount = $(images).length;
$(images).each(function (i, image) {
if (i == imageCount - 1) {
var image_embed = '<div><img class="lazy2" src="' + image + '"></div>';
image_embed = image_embed.replace('.jpg', '_800x.jpg').replace('.png', '_800x.png');
$('.qv-product-images').append(image_embed);
$('.qv-product-images').slick({
'dots': false,
'arrows': false,
'respondTo': 'min',
'useTransform': false
}).css('opacity', '1');
} else {
image_embed = '<div><img class="lazy2" src="' + image + '"></div>';
image_embed = image_embed.replace('.jpg', '_800x.jpg').replace('.png', '_800x.png');
$('.qv-product-images').append(image_embed);
}
});
$(options).each(function (i, option) {
var opt = option.name;
var selectClass = '.option.' + opt.toLowerCase();
$('.qv-product-options').append('<div class="option-selection-' + opt.toLowerCase() + '"><span class="option">' + opt + '</span><select class="option-' + i + ' option ' + opt.toLowerCase() + '"></select></div>');
$(option.values).each(function (i, value) {
$('.option.' + opt.toLowerCase()).append('<option value="' + value + '">' + value + '</option>');
});
});
$(product.variants).each(function (i, v) {
if (v.inventory_quantity == 0) {
$('.qv-add-button').prop('disabled', true).val('Sold Out');
$('.qv-add-to-cart').hide();
$('.qv-product-price').text('Sold Out').show();
return true
} else {
price = parseFloat(v.price / 100).toFixed(2);
original_price = parseFloat(v.compare_at_price / 100).toFixed(2);
$('.qv-product-price').text('$' + price);
if (original_price > 0) {
$('.qv-product-original-price').text('$' + original_price).show();
} else {
$('.qv-product-original-price').hide();
}
$('select.option-0').val(v.option1);
$('select.option-1').val(v.option2);
$('select.option-2').val(v.option3);
return false
}
});
});
$(document).on("change", "#quick-view select", function () {
var selectedOptions = '';
$('#quick-view select').each(function (i) {
if (selectedOptions == '') {
selectedOptions = $(this).val();
} else {
selectedOptions = selectedOptions + ' / ' + $(this).val();
}
});
jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
$(product.variants).each(function (i, v) {
if (v.title == selectedOptions) {
var price = parseFloat(v.price / 100).toFixed(2);
var original_price = parseFloat(v.compare_at_price / 100).toFixed(2);
var v_qty = v.inventory_quantity;
var v_inv = v.inventory_management;
$('.qv-product-price').text('$' + price);
$('.qv-product-original-price').text('$' + original_price);
if (v_inv == null) {
$('.qv-add-button').prop('disabled', false).val('Add to Cart');
} else {
if (v.inventory_quantity < 1) {
$('.qv-add-button').prop('disabled', true).val('Sold Out');
} else {
$('.qv-add-button').prop('disabled', false).val('Add to Cart');
}
}
}
});
});
});
$.fancybox({
href: '#quick-view',
maxWidth: 1040,
maxHeight: 600,
fitToView: true,
width: '75%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
'beforeLoad': function () {
var product_handle = $('#quick-view').attr('class');
$(document).on("click", ".qv-add-button", function () {
var qty = $('.qv-quantity').val();
var selectedOptions = '';
var var_id = '';
$('#quick-view select').each(function (i) {
if (selectedOptions == '') {
selectedOptions = $(this).val();
} else {
selectedOptions = selectedOptions + ' / ' + $(this).val();
}
});
jQuery.getJSON('/products/' + product_handle + '.js', function (product) {
$(product.variants).each(function (i, v) {
if (v.title == selectedOptions) {
var_id = v.id;
processCart();
}
});
});
function processCart() {
jQuery.post('/cart/add.js', {
quantity: qty,
id: var_id
},
null,
"json"
).done(function () {
$('.qv-add-to-cart-response').addClass('success').html('<span>' + $('.qv-product-title').text() + ' has been added to your cart. <a href="/cart">Click here to view your cart.</a>');
})
.fail(function ($xhr) {
var data = $xhr.responseJSON;
$('.qv-add-to-cart-response').addClass('error').html('<span><b>ERROR: </b>' + data.description);
});
}
});
$('.fancybox-wrap').css('overflow', 'hidden !important');
},
'afterShow': function () {
$('#quick-view').hide().html(content).css('opacity', '1').fadeIn(function () {
$('.qv-product-images').addClass('loaded');
});
},
'afterClose': function () {
$('#quick-view').removeClass().empty();
}
});
});
};
$(window).resize(function () {
if ($('#quick-view').is(':visible')) {
$('.qv-product-images').slick('setPosition');
}
});#quick-view {
display: flex;
height: 100%;
justify-content: flex-end;
flex-wrap: wrap;
position: relative;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
#quick-view .qv-product-images {
width: 60%;
height: auto;
display: inline-block;
position: absolute;
margin: 0 auto;
left: 30px;
top: 0;
height: 100%;
}
#quick-view .slick-list,
#quick-view .slick-track {
height: calc(100% - 12px);
}
#quick-view .slick-initialized .slick-slide {
display: flex;
flex-direction: column;
justify-content: center;
}
#quick-view .slick-slide {
padding: 0 50px;
height: 100%;
position: relative;
}
#quick-view .slick-slide img {
margin: 0 auto;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#quick-view .slick-dots {
right: auto;
left: 50%;
bottom: 10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#quick-view .slick-dots li {
margin: 0 8px 0 0;
}
#quick-view .slick-dots li button {
background-color: #cacaca;
width: 12px;
height: 12px;
}
#quick-view .slick-dots li.slick-active button {
background-color: #f00;
}
#quick-view .qv-content {
width: 36%;
display: inline-flex;
float: right;
flex-direction: row;
justify-content: space-between;
height: calc(100% - 40px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
flex-wrap: wrap;
overflow: auto;
box-sizing: border-box;
}
#quick-view .qv-content > * {
width: calc(100% - 25px);
box-sizing: border-box;
}
#quick-view .qv-product-title {
padding-right: 20px;
text-transform: lowercase;
margin-bottom: 0;
color: #575757;
}
#quick-view .qv-product-type {
color: #a18466;
font-family: 'proxima-nova-semibold';
text-transform: lowercase;
}
#quick-view .qv-product-price,
#quick-view .qv-product-original-price {
display: inline-block;
color: #5a5a5a;
margin-bottom: 0;
}
#quick-view .qv-product-original-price {
margin-left: 8px;
text-decoration: line-through;
color: #000;
}
#quick-view .option-selection-title {
display: none;
}
#quick-view hr {
border-top: 1px solid #f5f5dc;
margin: 15px 0 20px;
}
#quick-view .quantity {
margin-bottom: 25px;
}
#quick-view .quantity span {
text-transform: lowercase;
display: inline-block;
min-width: 100px;
}
#quick-view .quantity input[type="number"] {
width: 60px;
text-align: center;
-moz-appearance: textfield;
margin-left: -4px;
padding: 4px;
border: 1px solid #d3d3d3;
}
#quick-view .quantity input[type="number"]:focus {
outline: none;
border: 1px solid #f00;
display: inline-block;
}
#quick-view .quantity input[type=number]::-webkit-inner-spin-button,
#quick-view .quantity input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#quick-view .qv-product-options > div {
margin-bottom: 8px;
}
#quick-view .qv-product-options span {
text-transform: lowercase;
display: inline-block;
min-width: 100px;
}
#quick-view .qv-add-button {
display: block;
background-color: #f00;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
padding: 10px 20px;
border: 0;
width: 100%;
color: #fff;
}
#quick-view .qv-add-button:hover {
background-color: #f00;
}
#quick-view .qv-add-button:focus {
background-color: #3a3a3a;
outline: none;
}
#quick-view .qv-add-button:disabled {
background-color: #ccc;
}
#quick-view .qv-add-to-cart-response {
margin-top: 20px;
display: none;
font-family: 'proxima-nova-semibold';
}
.qv-add-to-cart-response.success,
.qv-add-to-cart-response.error {
display: block;
padding: 8px;
border: 1px solid;
}
.qv-add-to-cart-response.success {
border-color: #008000;
color: #008000;
}
.qv-add-to-cart-response.success a {
color: #000;
text-decoration: underline;
}
#quick-view .qv-add-to-cart-response.error {
border-color: #f00;
color: #f00;
}
.qv-product-description {
padding: 20px 0 30px;
}
.view-product {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'proxima-nova-semibold';
}
.view-product span {
color: #5a5a5a;
border-bottom: 2px solid #5a5a5a;
}
.view-product:hover span {
color: #f00;
border-bottom: 2px solid #f00;
}
.quick-view-button,
.quick-view-button-collection{
text-align: center;
}
.quick-view-button a,
.quick-view-button-collection a{
position: absolute;
right: 20px;
bottom: 50px;
width: 40px;
background-color: #000;
height: 27px;
box-shadow: 0 15px 25px #00000014;
border-radius: 5px;
margin-right: 10px;
display: block;
margin-bottom: 0;
transition: .5s;
color: #fff;
opacity: 0;
position: relative;
overflow: visible;
top: auto;
z-index: 2;
text-decoration: none;
line-height: 32px;
}
.quick-view-button i{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
color: #fff;
padding: 6px 0px 0px 0px;
border: 1px solid transparent;
border-radius: var(--badge-corner-radius);
display: inline-block;
padding: .5rem 1.3rem .6rem;
text-align: center;
word-break: break-word;
}
.quick-view-button-collection a{
bottom: -40px;
margin-left: 10px;
}
.quick-view-button a{
bottom: -37px;
margin-left: 30px;
}
/*.card-wrapper {
pointer-events: none;
cursor: default;
} */
/*.grid.product-grid .grid__item:hover .quick-view-button a,
.grid.product-grid .grid__item:hover .quick-view-button-collection a{
opacity: 1;
z-index: 2;
} */
/* .grid.product-grid .grid__item:hover,
.grid.product-grid .grid__item:hover{
pointer-evenet: none;
} */
.grid.product-grid .grid__item,
.grid.product-grid .grid__item{
pointer-evenet: visible;
}
@media (max-width: 1200px) {
#quick-view .qv-product-images,
#quick-view .qv-content {
width: 50%;
}
#quick-view .qv-content {
padding-left: 60px;
}
.slick-slide {
padding: 0;
}
}
@media (max-width: 900px) {
#quick-view {
display: block;
height: calc(100% - 40px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
#quick-view .qv-product-images {
top: 0;
left: 0;
height: 50%;
max-height: 350px;
position: relative;
width: 100%;
}
#quick-view .slick-slide {
position: relative;
}
#quick-view .slick-slide img {
width: auto;
display: inline-block;
max-width: 300px;
}
#quick-view .slick-slide img {
max-height: 300px;
margin: 0 auto;
position: relative;
top: auto;
left: auto;
-webkit-transform: none;
transform: none;
height: 100%;
width: auto;
}
#quick-view .slick-dots {
bottom: 0;
}
#quick-view .qv-content {
width: 100%;
height: auto;
padding: 0 10px 10px 30px;
overflow: auto;
-webkit-transform: none;
transform: none;
}
#quick-view .slick-initialized .slick-slide {
display: block;
text-align: center;
}
}<div class="qv-product-images" style="opacity: 1"></div>
<div class="qv-content">
<div class="holder">
<h3 class="qv-product-title"></h3>
<h4 class="qv-product-type"></h4>
<h5 class="qv-product-price"></h5>
<h5 class="qv-product-original-price"></h5>
<hr />
<div class="qv-add-to-cart">
<div class="qv-product-options"></div>
<div class="quantity">
<span>Quantity</span>
<input type="number" class="qv-quantity" value="1" min="1">
</div>
<input type="submit" class="qv-add-button" value="Add to Cart">
<div class="qv-add-to-cart-response"></div>
</div>
<div class="qv-product-description"></div>
</div>
<a class="view-product" href=""><span>View Full Product Details</span></a>
</div> <div class="qv-product-images" style="opacity: 1"></div>
<div class="qv-content">
<div class="holder">
<h3 class="qv-product-title"></h3>
<h4 class="qv-product-type"></h4>
<h5 class="qv-product-price"></h5>
<h5 class="qv-product-original-price"></h5>
<hr />
<div class="qv-add-to-cart">
<div class="qv-product-options"></div>
<div class="quantity">
<span>Quantity</span>
<input type="number" class="qv-quantity" value="1" min="1">
</div>
<input type="submit" class="qv-add-button" value="Add to Cart">
<div class="qv-add-to-cart-response"></div>
</div>
<div class="qv-product-description"></div>
</div>
<a class="view-product" href=""><span>View Full Product Details</span></a>
</div> I have added the CSS & HTML too but those are not wrong. It should be an issue in the JS file.
Thank you very much for your help!!