Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I added a product addon option below the product price with the help of a snippet code by showing a collection page in a snippet. the function is created but the addon product didn't add to the cart. whereas I added jQuery to the layout... below is the snippet code. I need to fix it.
<div class="bundle_products">
<ul>
{% for product in collections.bundle-products.products %}
<li class="bundle-item" data-id="{{product.first_available_variant.id}}">
<div class="img">
<img src="{{ product.featured_image | img_url: '100' | format: 'jpg' }}" alt="{{ block.settings.slide_heading }}">
</div>
<div class="product_content">
<h3>{{ product.title }}</h3>
<h4>{{ product.price | money | remove: '.00' }}</h4>
</div>
</li>
{% endfor %}
<li class="bundle-item active" style="display: none;" data-id="{{product.first_available_variant.id}}"></li>
</ul>
</div><!-- #bundle Products -->
<script>
$( document ).ready(function() {
///add active class to current select
$(".bundle_products .bundle-item").click(function() {
$(this).toggleClass('active');
});
//submit form button
$(".product-form__cart-submit").click(function(event) {
event.preventDefault();
var arr = [];
i = 0;
$('.bundle_products .bundle-item.active').each(function(){
arr[i++] = $(this).attr('data-id');
});
// console.log(arr);
var newstr = [arr.join(',')];
// console.log(newstr);
//alert(arr);
var newvalue = newstr;
Shopify.queue = [];
var quantity =1;
var newArray = newvalue.toString().split(',');
for (var i = 0; i < newArray.length; i++) {
product = newArray[i];
Shopify.queue.push({
variantId: product,
});
}
Shopify.moveAlong = function() {
// If we still have requests in the queue, let's process the next one.
if (Shopify.queue.length) {
var request = Shopify.queue.shift();
var data = 'id='+ request.variantId + '&quantity=1'
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: data,
success: function(res){
Shopify.moveAlong();
//submit form after sucess
setTimeout(function(){
// $('.product-form').submit();
window.location.href = "/cart";
}, 1500);
},
error: function(){
// if it's not last one Move Along else update the cart number with the current quantity
}
});
}
// If the queue is empty, we add 1 to cart
/*else {
quantity += 1;
addToCartOk(quantity);
} */
};
Shopify.moveAlong();
});
});
</script>
<style>
.bundle_products {
margin-top: 30px;
}
.bundle_products li.bundle-item {
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
padding-left: 30px;
position: relative;
cursor: pointer;
}
.bundle_products li.bundle-item:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #712a2a;
left: 0;
top: 2px;
border-radius: 3px;
}
.bundle_products li.bundle-item.active:before {
background-color: #712a2a;
}
.bundle_products li.bundle-item .img {
width: 100px;
}
.bundle_products li.bundle-item .product_content {
padding-left: 15px;
width: calc(100% - 100px);
}
.bundle_products li.bundle-item h3 {
font-size: 19px;
font-weight: 400;
margin-bottom: 10px;
}
.bundle_products li.bundle-item h4 {
font-weight: 400;
font-size: 15px;
}
</style>
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024