theme-product-form onSubmit option ID setting conflicts with buy now button

[n-dawson]

The way the product form handles changing options doesn't work with the "Buy It Now" button on product pages.

When you have a set of options, ProductForm will update the value of the "id" field to use the chosen variant. This happens through a submit listener on the product form.

ProductForm.prototype._onSubmit = function(options, event) {
  event.dataset = this._getProductFormEventData();

  this._setIdInputValue(event.dataset.variant.id);

  if (options.onFormSubmit) {
    options.onFormSubmit(event);
  }
};

When you press add to cart, the ID gets updated, and the correct variant is added to the user's cart. When you click the Buy It Now button however, that submit handler doesn't fire and the default variant shows in the checkout instead.

The simplest solution would likely be to move the point at which the id value is updated from submit to an option being changed.

[savchukoleksii]

@t-kelly @n-dawson Many apps add additinal event listeners to id input to include own logic, so it is better to require id input to be present during init. Also it is good approach for cases when some js error happen - user be able to submit form using native browser form without shopify id not specified error. https://github.com/savchukoleksii/theme-scripts/blob/theme-product-form/selectors-option/packages/theme-product-form/theme-product-form.js#L59 Also as many apps add "change" listener to this id input it is preferable to handle change not in _onSubmit method. Preferable way to handle this logic during options change (like old one theme.Variants work), so new extra method _onOptionChange required: https://github.com/savchukoleksii/theme-scripts/blob/theme-product-form/selectors-option/packages/theme-product-form/theme-product-form.js#L169 and _setIdInputValue logic must be replaced from _onSubmit.

You can review solution here: https://github.com/savchukoleksii/theme-scripts/blob/theme-product-form/selectors-option/packages/theme-product-form/theme-product-form.js

P.S. Unfortunately I can't create a pull request because yarn bootstrap doesn't work on Windows. This is because mkdir works differently on non-unix platforms (@shopify/theme-currency). I will open an issue a little later, expanding the issue in more detail. https://github.com/Shopify/theme-scripts/blob/master/packages/theme-currency/package.json#L27