Skip to content
This repository has been archived by the owner on Oct 20, 2023. It is now read-only.

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

Open
n-dawson opened this issue Jan 19, 2021 · 1 comment

Comments

@n-dawson
Copy link

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
Copy link

@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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants