<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>