@shopify/theme-product-form

[t-kelly]

Fixes #44
Contributes towards Shopify/starter-theme#140

This package is made to replace @shopify/theme-variants. It's purpose is to help developers create product forms. More details to come.

TODO:

• README
• Tests
• An option to rewrite browser history on variant change
• Handle all types of option inputs, including radio and checkboxs

@chrisberthe @martinamarien @tauthomas01 I have requested your review as this will package is destined for your project and I would love to get as many 👀 on it as possible. Feel free to focus more on the overall architecture described in the README if time is limited for reviewing. Also use Shopify/starter-theme#142 as example of how the package will be used.

[jonathanmoore]

So far this looks great! Thanks for getting started on it. Having a standardized (or close to it) way of handling product forms will help tremendously with all the Shopify Apps that like to hijack or take a ride on the variant, product and cart events.

Especially when handling the radio inputs, it would be helpful to have functionality that could filter down other valid variant combination based on availability or in-stock. Very frequently with our support we run into scenarios where a product uses options that create gaps in the valid combination of variants. Products that have three colors across five sizes variants are pretty straight forward. Here are two example scenarios we see very often:

Print on Demand Clothing

• Each Type (Option0) only has certain valid Colors (Option1)
• Each Color (Option1) only has certain valid Sizes (Option2)
• Out of all the valid combinations some are In Stock and others are Out of Stock
• Total of 15 valid variants that are either in stock or out of stock

Phone Cases

• The store is selling phone cases
• An individual product has three Sizes (Option0) iPhone Xr, iPhone Xs, iPhone Xs Max
• All sizes come in three Colors (Option1) black, red and grey. However, the iPhone Xs Max comes in an exclusive gold color.
• Total of 10 valid variants that are either in stock or out of stock

Right now most variant code, including Slate, has always assumed that every possible combination is a valid variant—3 types * 2 colors * 4 sizes = 24 total. In reality, many shops and products present gaps in the valid option combinations.

The thought process is that the selection of variants should do two things... 1) Update the availability (in stock / out of stock) of the other variants in the other options. 2) Hide/show other valid variant combinations in the other options. For all the stores that use options like this, it causes quite a lot of confusion for their customers if a product is simply out of stock or if it's a combination that has never existed.

At the very least, it would be helpful to update data attributes on the radio items that are selected, valid and available. Then it could be up to the theme's design and interpretation to decide how data-availability="false" or data-valid="false" should be visually presented.

<input type="radio" 
  checked="checked"
  data-option-index="option1" 
  data-option-name="Color" 
  data-valid="true"
  data-availability="true">

[t-kelly]

@jonathanmoore thanks for this. This package is the perfect place to land on a standard approach for these situations. Starting to dive into your scenarios now.

[t-kelly]

I'm now wondering if this package is the best place to handle these scenarios...

Product option selection ends in three results: Available, Sold Out, and Invalid Combination. This library currently handles all three of those results.

One of the biggest differences between @shopify/theme-product-form and @shopify/theme-variants is that the former does not make any assumptions on how the form is rendered and thus remains decoupled from any rendering logic. This choice was made because a theme can be rendered many different ways (e.g. Liquid, vanilla JS, jQuery, React, etc), and we don't want limit the potential of @shopify/theme-product-form to a single rendering engine.

If the theme developer does not wish the user to select Sold Out or Invalid combinations, it's the rendering logic of the page that should prevent those options from being selected.

That being said, you present a very real problem that theme developers encounter when rendering a product form. I think @shopify/theme-product would be a suitable place for us to help theme developers with the confusing logic behind enabling/disabling and hiding/showing option selections based on variant availability, i.e. this sounds like more of a problem with navigating and computing the Product object.

I'm feeling comfortable that we can tackle this problem in a separate scope from this PR. Could you please make a new issue with the problem you just discussed? I'd still like to tackle it and get something in Shopify Starter Theme as soon as possible.

[tauthomas01]

The documentation looks really good and the explanation as well 👍

I only read the tests and documentation. I will check the script later on.

[chrisberthe]

I'm really liking the implementation of this so far. I still need to look through the tests and actually test the library, but wanted to post some preliminary feedback.

[chrisberthe]

🐴https://www.youtube.com/watch?v=LJSFlMCTXE8 🐴

[chrisberthe]

🎉