Adding a second POST to 'cart/add.js' to our Add To Cart returns inconsistent results

[LorenzoA]

Hi, we're trying to sell an engraving service as an addon to the keychains we sell. We charge an extra amount for this so we want to we're trying to hook into the add to cart function to add it as a `Product` but so far it's not working. We've tried the following

1) Adding functionality to the Add To Cart button

document.getElementById("AddToCart").onclick = function(event) {  
fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        'id': {{ variant_id }},
        'quantity': 1,
        'properties': {
          'engraving': {{ engraving }}
        }
      })
    }).then(response => {
      return response.json();
    }).catch((error) => {
      console.error('Error', error);
    })
}

2) Hooking into the theme's Add To Cart function in theme.js.liquid

ShopifyAPI.addItemFromForm = function(form, callback, errorCallback) {
  var formData = new FormData(form);

  // Add to Cart call for the engraving
  addEngravingToCart();
  
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(line_item) {
      if (typeof callback === 'function') {
        callback(line_item, form);
      } else {
        ShopifyAPI.onItemAdded(line_item, form);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      if (typeof errorCallback === 'function') {
        errorCallback(XMLHttpRequest, textStatus);
      } else {
        ShopifyAPI.onError(XMLHttpRequest, textStatus);
      }
    }
  };
  jQuery.ajax(params);
};

In both cases, we get inconsistent results and only 1 of the 3 following  scenarios happen everytime we click the Add To Cart button

A) Only the Engraving Product gets added to cart

B) Only the Keychain Product get added to the cart

C) Both the Engraving Product and the Keychain Product gets added to the cart

Is there a way that we can get C to work consistently? If it helps, our theme's Add to Cart function is below

ShopifyAPI.addItemFromForm = function(form, callback, errorCallback) {
  var formData = new FormData(form);
  var params = {
    type: 'POST',
    url: '/cart/add.js',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(line_item) {
      if (typeof callback === 'function') {
        callback(line_item, form);
      } else {
        ShopifyAPI.onItemAdded(line_item, form);
      }
    },
    error: function(XMLHttpRequest, textStatus) {
      if (typeof errorCallback === 'function') {
        errorCallback(XMLHttpRequest, textStatus);
      } else {
        ShopifyAPI.onError(XMLHttpRequest, textStatus);
      }
    }
  };
  jQuery.ajax(params);
};

[garyrgilbert]

Hi There,

I think the issue is that the standard code is generally only designed to add a single item to the cart at a time.

What you could do is instead of adding your call to the themes add to cart function and hitting the cart api twice is modify the function.

They are passing the product form, and generally they pass the variant id in a hidden "id" field. You will need to create an array of items from the form and when the customer has selected the engraving option for the particular product, you will add that product variant to the items array, and then submit the array of products.

items: [
  {
   id: 36110175633573,
   quantity: 1
  },
{
   id: 36110198766789, //engraving product
   quantity: 1
  }
]

Cheers,

Gary

[EasifyApps-Zoe]

Hi @LorenzoA,

I understand that you're seeking a hassle-free solution to implement an engraving service with an additional fee for customers purchasing your Keychain product. I'm here to provide a straightforward approach using the Easify Product Options app, avoiding the need for coding and potential complications. Here's a step-by-step guide to help you set up engraving options with extra fees using the app 🤗:

1. Create a new option set and add Engraving Option:

• Add a Checkbox for customers to opt for the engraving service. Include the associated fee for this option. If the customer selects this checkbox, the extra fee will be added to the total cost.

2. Add Engraving Text Entry:

• Include another option that allows customers to input their desired engraving text. Use the Text Box option type for this purpose. This option becomes active only if the customer selects engraving (using the conditional logic feature).

3. Integrate Font Selection:

• Enhance the experience further by adding a Font Picker option. This lets customers choose their preferred engraving font and preview the engraved text using the selected font.

4. Associate Options with Products:

• Finally, associate the created custom engraving options with the relevant product(s) to seamlessly offer them to your customers.

By following these steps, you can effortlessly provide a tailored engraving service with associated fees, enhancing customer satisfaction and boosting your product offerings 🙌.