<ul id="variants"></ul> <style> .product-form__input {display:none !important} </style> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script> let variants; let variants2; let merge; $.getJSON(window.Shopify.routes.root + 'products/kontesut.js', function(product) { variants2 = product.variants; } ); $.getJSON(window.Shopify.routes.root + 'products/ojpjedpfaijr.js', function(product) { variants = product.variants; //merge merge = $.merge(variants, variants2); merge.sort(sortFunc); console.log(merge); $.each(merge, function(index, value){ let arr = Object.values(value); $("#variants").append("<li data-id='"+arr[0]+"'>"+arr[1]+"</li>"); }) } ); //sort function sortFunc(a, b) { a = a.title.toLowerCase(); b = b.title.toLowerCase(); return a.localeCompare(b); } //add cart let items = {}; items["items"] = []; items["items"].push({"id": 41281037238455, "quantity": 1}); items["items"].push({"id": 41280119079095, "quantity": 1}); $("#variants").on("click", function() { console.log(33); fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(items) }) .then(response => { return response.json(); }) .catch((error) => { console.error('Error:', error); }); }); </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter