How can I effectively set up a product customizer with variant conditions?

Technical Q&A
1

I’m building a product customizer in where selectiing buttons will be lead to the specific conditions for a product variant when adding to cart. I’ve set up vanillajs functions in the buttons to also render photos of the customizations I would like to have something in the add to cart button like:

if(first customization == true && second customization == true && third customization == true ) {

add variant to cart by posting id

}

but im having difficulty getting any success in the accomplishing this using the documentation, I also tried to get the variant id to post to the cart alone with the code below and got the error “response is not defined”

const addToCart = () => {
  
  let formData = {
    'items': [{
      'id': 40971056414858,
      'quantity': 1
    }]
  };
  
  fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
  .then(reponse => {
    return response.json();
  })
  .catch((error) => {
    console.error('Error:', error);
  });
  console.log(`${formData} was added`);
  
}

any help or different approach is appreciated.

2

Hi @airoman ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

The error “response is not defined” was actually a typo but now a new error 422 is shown and the

console.log(`${formData}`)

prints an empty object