{% comment %} We make sure we only load a slider if the product got the metafield set up. {% endcomment %} {% if product.metafields.tonybundles.upsells.value %} <div class="w-full"> <h2 class="text-center font-black">Bundle with</h2> <div class="tony-bundles-wrapper"> {% comment %} Replace tonybundles.upsells for the id of the metafield you created in a previous step of this guide. {% endcomment %} {% for producti in product.metafields.tonybundles.upsells.value %} {% if product.available %} <div data-bundle-form="{{ forloop.index }}"> <div class="flex items-center justify-around"> <div> <span class="font-black"> {{ producti.title }} </span> <div class="italic"> {% if producti.first_available_variant.compare_at_price > producti.first_available_variant.price %} <s class=”bundle-compare-price”>{{ producti.first_available_variant.compare_at_price | money }}</s> {% endif %} <span class=”bundle-final-price”>{{ producti.first_available_variant.price | money }}</span> </div> </div> {% if producti.first_available_variant.featured_image.src %} <img class=’bundle-image’ loading="lazy" src="{{ producti.first_available_variant.featured_image | img_url }}"> {% else %} <img class=’bundle-image’ loading="lazy" src="{{ producti.featured_image | img_url }}"> {% endif %} </div> {% if producti.variants.size > 1 %} <div> <select name="bundle_id" class="mt-4" data-reference="{{ forloop.index }}"> {% for varianti in producti.variants %} <option data-qty="{{ varianti.inventory_quantity }}" data-compare="{{ varianti.compare_at_price }}" data-price="{{ varianti.price | money}}" data-img="{% if varianti.featured_image.src %}{{ varianti.featured_image | img_url }}{% else %}no_img{% endif %}" {% if varianti.id == producti.first_available_variant.id %} selected {% endif %} value="{{ varianti.id }}" {% unless varianti.available %} disabled {% endunless %} > {{ varianti.title }} </option> {% endfor %} </select> </div> {% else %} <input type="hidden" name="bundle_id" value="{{ producti.first_available_variant.id }}"> {% endif %} <div class="flex fle-col items-start lg:flex-row lg:items-center"> <label class="font-black">Quantity</label> <input class='m-0 lg:ml-4 w-1/12' type="number" max="{{ producti.first_available_variant.inventory_quantity }}" min="1" value="1" name="bundle_quantity" > </div> <div class="flex flex-col"> <span class='mb-4 text-rose-900 hidden'> There was an error adding this item to your cart. Please try again. </span> <span class='mb-4 text-rose-900 hidden'> Added to bundle. </span> <button type="button" class="btn mt-4" name="submit_bundle" data-reference="{{ forloop.index }}">Add To Bundle</button> </div> </div> {% endif %} {% endfor %} </div> </div> <script> $(document).ready(function(){ $('.tony-bundles-wrapper').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear', arrows: true }); $(“select[name=’bundle_id’]”).on(‘change’, function(){ const form = $(this).parents(“[data-bundle-form]”); const src = $(this).children(‘option:selected’).attr(“data-img”); const price = $(this).children(‘option:selected’).attr(“data-price”); const compare = $(this).children(‘option:selected’).attr(“data-compare”); if(src != “no_img”) form.find(“.bundle-image”).attr(“src”, src); form.find(‘.bundle-final-price’).text(price); compare < price ? form.find(”bundle-compare-price”).text(compare) : form.find(”bundle-compare-price”).text(“”) }) $("[name=submit_bundle]").on('click', function(){ /* This is a way to select the form that is associated with the upsell added to the cart. Get its variant id and qty */ const form = $(this).parents(“[data-bundle-form]”); const id = form.find("[name=bundle_id]").val(); const qty = form.find("input[name=bundle_quantity]").val(); /* This is checking if the form has a select element. If it does, it is getting the quantity of the selected option and then subtracting 1 from it. If the quantity is 0, it is disabling the option. */ if(form.find('[name="bundle_id"]').is("select")){ var prevQty = form.find('[name="bundle_id"]').children("option:selected").attr("data-qty"); form.find('[name="bundle_id"]').children("option:selected").attr("data-qty", prevQty-1); if(prevQty-1 <= 0) form.find('[name="bundle_id"]').children("option:selected").prop("disabled", true); } /* This is setting the max attribute of the qty selector element to the previous quantity minus 1. */ form.find("input[name=bundle_quantity]").attr("max", prevQty-1); /* This is checking if the quantity of the selected option is less than or equal to 0. If it is, it is disabling the qty selector element element. */ if(prevQty-1 <= 0) form.find("input[name=bundle_quantity]").children("input").prop("disabled", true); /* This is the code that is used to add the bundle to the cart. */ jQuery.ajax({ type: 'POST', url: '/cart/add.js', data: { quantity: qty, id: id }, dataType: 'json', success: function() { $(".bundle_success").show; $(".bundle_error").hide(); /* Optional * window.location.href = ‘/cart’; //Uncomment this to redirect to the cart after adding to the bundle. * or…. //Add here the code to trigger the cart drawer * */ }, error: () => { $(".bundle_success").hide(); $(".bundle_error").show(); } }); }) }) </script> {% endif %}