Custom Product builder -> Cannot find variant with Ajax

[LukeWalker]

I'm designing a custom product builder and am having trouble adding the items to the cart.

The code looks for a "Clicked" Item's product.id and then pushes it to my payload/form object. When I run a console.log I see all of the ids, but the fetch doesn't recognize them so I get the error:

{status: 404, message: "Cart Error", description: "Cannot find variant"}
description: "Cannot find variant"
message: "Cart Error"
status: 404

Here is the add-to-cart function

document.getElementById('add-to-cart-button').addEventListener('click', async function(event) {
    event.preventDefault();
    console.log("Add-to-cart button clicked.");
       
    let form = {
        items: []
    };

    let selectedOption = necklaceVariantDropdown.options[necklaceVariantDropdown.selectedIndex];
    let selectedNecklaceVariantId = parseInt(selectedOption.getAttribute('data-id'), 10);
  if (!selectedNecklaceVariantId) {
        console.warn("No necklace variant selected.");
        return;
    }

    form.items.push({
        id: selectedNecklaceVariantId,
        quantity: 1
    });

    console.log("Necklace variant added to cart items:", selectedNecklaceVariantId);

    let selectedCharms = necklacePreview.querySelectorAll('.charm-item.cloned');
    console.log(`Found ${selectedCharms.length} selected charms.`);

    //Add each selected charm to the cart items array
    selectedCharms.forEach(charm => {
    let charmId = parseInt(charm.getAttribute('data-id'), 10);
      if (!charmId) {
            console.warn("Charm with no data-id found:", charm);
            return;
        }
        form.items.push({
            id: charmId,
            quantity: 1
        });

        console.log(`Charm with ID ${charmId} added to cart items.`);
    });

    if (form.items.length === 0) {
        console.warn("No items to add to the cart.");
        return;
    }

    console.log("All cart items ready to be added:", form.items); 

    // Sending all items together
    await fetch(window.Shopify.routes.root + 'cart/add.js', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(form)
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`Server responded with status: ${response.statusText}`);
    }
    return response.json();
    })
    .catch((error) => {
        console.error('Error:', error);
    });
});

Here is my console:

Necklace variant added to cart items: 45484000182550
scripts.js?567:100 Found 3 selected charms.
scripts.js?567:114 Charm with ID 8768164200726 added to cart items.
scripts.js?567:114 Charm with ID 8483792650518 added to cart items.
scripts.js?567:114 Charm with ID 8523530764566 added to cart items.
scripts.js?567:122 All cart items ready to be added: (4) [{…}, {…}, {…}, {…}]

Here is the request payload

[
    {
        "id": 45484000182550,
        "quantity": 1
    },
    {
        "id": 8768164200726,
        "quantity": 1
    },
    {
        "id": 8483792650518,
        "quantity": 1
    },
    {
        "id": 8523530764566,
        "quantity": 1
    }
]

 Thanks, I would appreciate any suggestions. 

[kyleHana]

Were you able to resolve this issue? We're facing the same