Why aren't product properties being submitted in my cart form?

[balthashop]

Hello!

I have added this input element to the product form template:

<input class="color" required="true" type="text" name="properties[Color]">

Following the same format I have also added fields for Bust, Waist and Hip (for measurements).

They seem to appear correctly in the product form (where it says Color and also in the Special Sizing accordion box). Here's a link to my development store:

https://heir-brand.myshopify.com/products/convallis-mauris

The current password is: lainga

However these properties are not being submitted when clicking add to cart. Any ideas why?

I can see in dev tools that properties is empty in the data that is posted. But this should be the correct method and I have successfully done the same thing on a different store.

[Sweet_Savior_3]

Hello @balthashop 

Welcome to Shopify Community.

Can you please add the properties input inside the <form> tag and then try to submit the data.

Thanks

[balthashop]

Hi there! Thanks so much for your observation about the fields being outside the form. If I manually move the colour field to the form using the browser dev tools it seems to submit ok.  It looks like the Shopify template Craft is built in a slightly strange way where only the submit button is inside the <form> tag. Anything added from the theme editor ends up outside the form.

I think I'll have to either find a way to move the opening <form> tag so that it sits earlier in the product template, or I will have to add a form submit handler which manually copies the extra fields into the form just before submitting. Any other ideas very much appreciated!

[balthashop · Accepted solution]

Here is the solution I found for my case. It works based on having custom wrappers around the fields I am interested in, so may not work for any scenario involving the Craft theme, but it gives you a general idea.

// Add any of our custom fields to the form before submitting
function addCustomFieldsToForm($form) {
  // Select all input fields within .btz-product-fields and .btz-special-sizing
  var $productFields = $('.btz-product-fields input');
  var $specialSizingFields = $('.btz-special-sizing input');

  // Update or append hidden input fields with the same name and value to the form
  $productFields.each(function() {
    var $input = $(this);
    var name = $input.attr('name');
    var value = $input.val();
    var $existingInput = $form.find('input[name="' + name + '"]');
    if ($existingInput.length) {
      // Update the value of the existing input
      $existingInput.val(value);
    } else {
      // Append hidden input to the form
      $form.append('<input type="hidden" name="' + name + '" value="' + value + '">');
    }
  });

  $specialSizingFields.each(function() {
    var $input = $(this);
    var name = $input.attr('name');
    var value = $input.val();
    var $existingInput = $form.find('input[name="' + name + '"]');
    if ($existingInput.length) {
      // Update the value of the existing input
      $existingInput.val(value);
    } else {
      // Append hidden input to the form
      $form.append('<input type="hidden" name="' + name + '" value="' + value + '">');
    }
  });
}

$('input').on('change', function(event) {
  const theForm = $('form[data-type="add-to-cart-form"]');
  addCustomFieldsToForm(theForm);
});

[EasifyApps]

Hi @balthashop,

You should onsider giving the Easify Product Options app a try (free plan available). It's designed to help streamline your workflow by effortlessly incorporating custom fields onto your product pages.

For instance, when dealing with color options, you can utilize Color Swatch, Color Picker, or Text Box option types.

When it comes to measurements, you can opt for Number box or the Dimension option type, allowing you to display fields for customers to fill in.

Hope that you can give the app a try 🤗.