Solved

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

balthashop
Shopify Partner
6 1 1

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.

Accepted Solution (1)
balthashop
Shopify Partner
6 1 1

This is an 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);
});

View solution in original post

Replies 4 (4)

Sweet_Savior_3
Shopify Partner
1187 96 115

Hello @balthashop 

 

Welcome to Shopify Community.

 

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

Sweet_Savior_3_0-1711785864324.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
balthashop
Shopify Partner
6 1 1

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
Shopify Partner
6 1 1

This is an 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
Shopify Partner
541 16 42

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 🤗.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support