search

Shopify / dawn

Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
Other
2.36k stars 3.13k forks source link

[Variant Selector] Toggle automatic variant selection #3467

Open joshistoast opened 3 weeks ago

joshistoast commented 3 weeks ago

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

Demo links

Checklist

PaulNewton commented 3 weeks ago

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 'currentvariant' 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 i'm not sure if that would align, or conflict, towards any possible future naming choose-an-option features if ever._

* variant can be:

joshistoast commented 3 weeks ago

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 'currentvariant' 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 commented 4 days ago

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