Custom field not adding anything to cart

[Vyk]

Hello, I used to use a custom field in the debut theme; for some reason, on the Dawn theme, this code doesn't add anything to the cart.

I have other custom fields that work perfectly. What might be the reason for that?

If you have any idea how to fix it, I would be grateful 🙂

<p class="line-item-property__field" style="margin-left: 5px; !important;">
   <label>Do you want customization?</label>
   <select id="custom" name="properties[Do you want customization?]">
       <option value="No">No</option>
       <option value="Yes">Yes</option>
   </select>
</p>
<p class="line-item-property__field" id="customName" style="margin-left: 5px !important;">
   <label for="NAME">Names:</label>
   <input class="required" id="Customization" type="text" name="properties[Customization]">
</p>
<script>
  const customField = document.querySelector('#custom');
  const customName = document.querySelector('#customName');
  const personalizacijaInput = document.querySelector('#Customization');

  customName.style.display = "none";
  personalizacijaInput.required = false;

  customField.addEventListener('change', function() {
    if (this.value == "Yes") {
      customName.style.display = "block";
      personalizacijaInput.required = true;
    } else {
      customName.style.display = "none";
      personalizacijaInput.required = false;
      personalizacijaInput.value = ''; // Clear the input value when not required
    }
  });
</script>

[ebrinker]

Several stores are watching a similar issue that could be a problem on the Shopify side and not necessarily your custom theme. The problem over on this other post started Saturday morning: https://community.shopify.com/c/technical-q-a/post-locale-cart-add-required-parameter-missing-or-inv...

Give it a like and response (it might help escalate the issue)

[Vyk · Accepted solution]

Hello, I have found the code that works. Needs just some CSS on it and we good. 🙂

<p class="line-item-property__field" style="margin-left: 5px; !important;">
   <label>Do you want to personalize?</label>
   <select id="custom" name="properties[Do you want to personalize?]">
       <option value="No">No</option>
       <option value="Yes">Yes</option>
   </select>
</p>
<p class="line-item-property__field" form="{{ 'product-form-' | append: section.id }}" id="customName" style="margin-left: 5px !important;">
   <label for="NAME">Names:</label>
   <input class="required" form="{{ 'product-form-' | append: section.id }}" id="Personalizacija" type="text" name="properties[Personalization]">
</p>
<script>
  const customField = document.querySelector('#custom');
  const customName = document.querySelector('#customName');
  const personalizacijaInput = document.querySelector('#Personalizacija');

  customName.style.display = "none";
  personalizacijaInput.required = false;

  customField.addEventListener('change', function() {
    if (this.value == "Yes") {
      customName.style.display = "block";
      personalizacijaInput.required = true;
    } else {
      customName.style.display = "none";
      personalizacijaInput.required = false;
      personalizacijaInput.value = ''; // Clear the input value when not required
    }
  });
</script>

[Easify-Mark]

Hi @Vyk,

For future reference, you might find the Easify Product Options app (free plan available) really helpful for creating custom fields without any coding. Here’s a quick example of how you can set it up:

• Product page:

• Simple settings:

If you want to give it a try, just let me know!