[Product form] Fix Add to Cart error on page load/slower connections

[ludoboludo]

PR Summary:

The product-form.js can take a little too long to load and create issues, more noticeable on slower connections where adding to cart before the full page has finished loading will give you an error.
This aims to prevent that from happening.

Why are these changes introduced?

Prevents the add to cart from erroring before the product-form.js script has loaded.

What approach did you take?

Wrapped a condition around the disabled state of the hidden input similar to how the disabled attribute is setup on the submit button.

Other considerations

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

Testing steps/scenarios

• Go to the store preview,
• Open the inspect tool and go to the network tab, throttle the connection to a slow 3G one
• Reload the home page and try to click on Add to cart as soon as you see the button show up for the feat. collection section

You shouldn't get an error but redirected to the cart page with the product in it.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[andrewetchen]

This LGTM! I compared against main and also tested this in Firefox and everything works as expected when the network speed is throttled.

[naxorn]

@ludoboludo FYI: This fix is going to prevent changing the variant when javascript is disabled...

Issue

You can refer to the original issue that fixed. The gist is that on no js there will be TWO fields with name="id":

• noscript variant select
• hidden field in the buy buttons product form

The last field with name="id" will be chosen if not disabled. This will prevent the user changing the variant, only the first/selected variant will ever be added to the cart because the buy buttons hidden field is lower in the page.

Alternative Solution

On the product page only (quick add is only shown when js enabled), you might include something like this really early in the product page lifecycle, maybe with a script tag right the buy buttons (can check the template type):

document.querySelectorAll("product-form form [name=id]").forEach(input => input.disabled = false)

Aside

Do you have any idea if Shopify is going to allow checking out without javascript? There has been lots of changes in the past year to the checkout, but no js support is gone... You just get an infinite spinner now when you checkout with no js. In the past, this was never an issue.

[ludoboludo]

Hey @naxorn thanks for the heads up.
You're right, with the newer one page checkout, we're going towards something where you can't checkout with no JS.
Due to that I would not worry as much about that no-js issue 🤔

Do you find that you have to support many customers that navigate the web with no js ?

[naxorn]

Hard to say about no js users... All the logging I'm aware of requires javascript, so I cannot see a way to track no js usage. I guess it comes down to choice for the user. Dawn is built around supporting/testing no js options still and find it strange that Shopify (in the past year or so) forces the user to turn on javascript. FYI: PayPal supports no js checkout.

The worst thing for me is that the no js checkout still exists depending on the checkout link provided from Shopify... For example:

• /checkouts/cn/[some sort of key]
  • Requires js
• /[store identifier?]/checkouts/[some sort of key, but different than above]
  • This still allows checkout with no js

On duckduckgo they have something like this in the head that redirects to the no js version:

<noscript>
  <meta http-equiv="refresh" content="0; url=[link to page supporting no js version]"/>
  <style>body { display: none }</style>
</noscript>