[Variant Selector] Toggle automatic variant selection

[joshistoast]

PR Summary:

This PR introduces a long-asked for feature in the Dawn theme- the ability to toggle on/off the automatic variant selection behavior.

Also implemented a correction on an unrelated typo I found, more specifically the function setQuantityBoundries(), which is now setQuantityBoundaries().

Why would offer to disable this behavior?

Because some shoppers lack eyeballs, and will add a product to cart without first looking at what options are selected. At my company, this has resulted in customer service complaints from customers ordering the wrong size of clothing by accident.

What if I want the old behavior?

It's simply a behavior that can be toggled on/off. The old behavior with automatically selected variants remains the default, so no action is needed.

What if I want to disable this behavior on some products over others?

This toggle is directly implemented on the product section, as opposed to being controlled globally. This granularity allows for maximum control over desired behaviors across your product library.

Why are these changes introduced?

Fixes #2254

Most name brand apparel brands don't select a default variant for this reason. It's also worth noting the sheer volume of forums and posts there are asking about this, and outdated tutorials on how to do this to old dawn versions.

What approach did you take?

Most areas of the product page and similar areas refer directly to selected_or_first_available_variant. So I instead pointed those elements at a new variable assignment called selected_variant.

{% liquid
assign selected_variant = product.selected_variant
if section.settings.auto_select_variant or product.variants.size == 1
  assign selected_variant = product.selected_or_first_available_variant
endif
%}

Using the selected variant as a top-level variant improves code quality, and allows us to better control it's behavior.

If Auto-select first available variant? is off (default is on), then unless there's more than one variant and a selected variant provided via url or otherwise, it will be empty by default. Thus prompting shoppers to first make a selection before a variant can be added to the cart.

Other considerations

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

This will not impact existing themes, the current behavior will remain the default.

Testing steps/scenarios

• Featured product section respects toggle behavior and adds to cart
• Product page information section respects toggle behavior and adds to cart
• Product quick add modal respects toggle behavior and adds to cart

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

[PaulNewton]

verbiage, setting auto_select_variant should be auto_select_first_available_variant.
the selected_variant and first_available are separate concepts with three usages* that if used together in some combination should be reflected in the variable name.
so using 'select' also is a bit ambiguous 🤷

Alternatives auto_choose_variant, auto_set_variant etc; not sure of precedent for wording inside dawn really 🤷
https://github.com/Shopify/dawn/pull/3467/files#diff-8634bdb8283e62e6df834e80736461b1c05b2d6d669fde29e2fe1b9b7e86ed87R2418

for liquid vars could just be variant or if it's not in a variant based array/loop/snippet.
A selected_variant means a specific property on the product, selected_variant is doing double duty but the variable name hides the fact of a 2nd state.
Alternatively 'active_variant', 'chosen_variant', or 'set_variant' (slight indication of a setting being involved and matches auto_set_variant).
Maybe avoid 'current_variant' as that's more common to indicate being inside an array/loop/snippet 🤔.

Niceties, sometimes it's convenient if a setting compliments the used variable, example combos:

• auto_choose_variant & chosen_variant
• auto_set_variant & set_variant (cleanest to find everything with text search, but reads weird to me)
• etc

auto_choose_variant i'm not sure if that would align, or conflict, towards any possible future naming choose-an-option features if ever.

* variant can be:

• variant = product.selected_variant
• variant = product.selected_or_first_available_variant
• variant = product.first_available_variant

[joshistoast]

verbiage, setting auto_select_variant should be auto_select_first_available_variant. the selected_variant and first_available are separate concepts with three usages* that if used together in some combination should be reflected in the variable name. so using 'select' also is a bit ambiguous 🤷

Alternatives auto_choose_variant, auto_set_variant etc; not sure of precedent for wording inside dawn really 🤷 https://github.com/Shopify/dawn/pull/3467/files#diff-8634bdb8283e62e6df834e80736461b1c05b2d6d669fde29e2fe1b9b7e86ed87R2418

for liquid vars could just be variant or if it's not in a variant based array/loop/snippet. A selected_variant means a specific property on the product, selected_variant is doing double duty but the variable name hides the fact of a 2nd state. Alternatively 'active_variant', 'chosen_variant', or 'set_variant' (slight indication of a setting being involved and matches auto_set_variant). Maybe avoid 'current_variant' as that's more common to indicate being inside an array/loop/snippet 🤔.

Niceties, sometimes it's convenient if a setting compliments the used variable, example combos:

• auto_choose_variant & chosen_variant
• auto_set_variant & set_variant (cleanest to find everything with text search, but reads weird to me)
• etc

auto_choose_variant i'm not sure if that would align, or conflict, towards any possible future naming choose-an-option features if ever.

• variant can be:

• variant = product.selected_variant

• variant = product.selected_or_first_available_variant

• variant = product.first_available_variant

I like auto_set_variant, auto_select_first_available_variant is a bit of a mouthful

[joshistoast]

Will need to revisit this PR with the new option select behavior.
Largely the same implementation tho

[joshistoast]

Implementation will need to be re-thought, since dom updates query using option params instead of variant in the url resulting in product.selected_variant being null regardless of selected options

[PaulNewton]

I'm out of sync with dawn atm but if I get time I'll experiment to see how I'd solve it.
Which file was changed , and/or was this a result of pull #3246 (Support Combined Listings and 2k Variants) ,or other.

[joshistoast]

Looking into implementation now