Ajax post different products on Add To Cart

Technical Q&A
1

Hello everyone!

I have a little problem on a website I am working on.

The goal is to let the customers select which variant they want in a “box” product.

What I have done is that on add to cart, my ajax function add the selected products.

Here is the function I am running when the add to card button is clicked:

function addItemToCart() {
        var shampoing = parseInt($('#parfum-du-shampoing-25gr').val());
        var apresShampoing = parseInt($('#parfum-de-lapres-shampoing-25gr').val());
        var savon = parseInt($('#parfum-du-savon-doux-25gr').val());
        var quantity = parseInt($('#quantity').val());

        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          data: {
          items: [
            {
            quantity: quantity,
            id: 39916000510116 
            },
            {
            quantity: quantity,
            id: shampoing
            },
            {
            quantity: quantity,
            id: apresShampoing
            },
            {
            quantity: quantity,
            id: savon
            }
          ]
          },
          dataType: 'json'
        });
      }

The problem is that sometimes it is working and some other time it is not.

sometimes it adds the products with the SKU as line_proprieties but apparently it is not ok for our logistic center and some other times it adds them as needed as different products.

Do you have any idea on where I am making a mistake? Maybe I should add something else?

By the way, here is the product page: https://www.lespanacees.com/products/mon-coffret-personnalise

Thank you a lot for your help!!