Error on product _validateSerializedArray with a single variant product

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)

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

[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 %}