Error on product _validateSerializedArray with a single variant product

[garrettboatman]

Error on a fresh yarn create slate-theme product page, adding a single variant product to the cart.

Perhaps related to #85 ?

Console output:

Error: is empty.
    at _validateSerializedArray (webpack-internal:///../node_modules/@shopify/theme-product/theme-product.js:109:11)
    at _createOptionArrayFromOptionCollection (webpack-internal:///../node_modules/@shopify/theme-product/theme-product.js:67:3)
    at getVariantFromSerializedArray (webpack-internal:///../node_modules/@shopify/theme-product/theme-product.js:35:21)
    at ProductForm.variant (webpack-internal:///../node_modules/@shopify/theme-product-form/theme-product-form.js:105:102)
    at ProductForm._getProductFormEventData (webpack-internal:///../node_modules/@shopify/theme-product-form/theme-product-form.js:186:19)
    at ProductForm._onSubmit (webpack-internal:///../node_modules/@shopify/theme-product-form/theme-product-form.js:150:24)

[Noostop]

I have encountered this problem now, although the error is added when adding the product, but can be added to gouwuche.

[tms320c]

The JS code expects a non-empty array with options. The array is collected from the form elements with names like "name=options[OptionName]".

The recommended liquid snippet contains logic like: {% unless product.has_only_default_variant %} some elements with the required names created {% endunless %}

Thus, no options elements for the single variant products.

Meanwhile, until it has been fixed in JS, I use slightly different logic: {% if product.has_only_default_variant != true %} as it were {% else %} <input type="hidden" id="defaultOption" name="options[Title]" value="Default title"> {% endif %}

So, a fake option created. Of course, it may confuse the further processors: ProductForm.options() will return non-empty list for the single variant product. At least, it does not throw error.

[brantward]

Tiny note to add, the fake option above will only work if there's an existing product with an option value of 'Title'. However, using <input type="hidden" id="defaultOption" name="options[]" value="Default title"> should fix any additional errors such as Uncaught TypeError: Cannot read property 'id' of null

[cfxd]

I also ran into this issue. I believe a more thorough, readable solution is:

{% if product.has_only_default_variant %}
  {% assign option = product.options_with_values[0] %}
  {% assign value = option.values[0] %}
  <input type="hidden" id="Option{{ option.position }}-{{ value }}" name="options[{{ option.name }}]" value="{{ value }}">
{% else %}
  (current unless block)
{% endif %}

[donnyburnside]

I also ran into this issue. I believe a more thorough, readable solution is:

{% if product.has_only_default_variant %}
  {% assign option = product.options_with_values[0] %}
  {% assign value = option.values[0] %}
  <input type="hidden" id="Option{{ option.position }}-{{ value }}" name="options[{{ option.name }}]" value="{{ value }}"{% if option.selected_value == value %} checked{% endif %}>
{% else %}
  (current unless block)
{% endif %}

The "checked" attribute does not exist on a hidden input field and should only be used with Checkbox or Radio inputs only. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

[jpjmortimer]

I changed name="id" to name="options[default]" in the hidden input field, for single variation products. It worked but in all honestly I don't know why.

<input type="hidden" name="options[default]" value="{{ product.selected_or_first_available_variant.id }}" data-productid="{{ product.id }}">

[cfxd]

The "checked" attribute does not exist on a hidden input field and should only be used with Checkbox or Radio inputs only. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

Right you are. Fixed and rebased!