variant-selection

Map product attribute selections to concrete variants for Add to Cart actions.

1.5k|875|Updated Aug 20, 2021
One-click install
npx skills add https://github.com/saleor/storefront --skill variant-selection
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: variant-selection
Source: https://github.com/saleor/storefront/tree/main/.claude/skills/variant-selection
Command: npx skills add https://github.com/saleor/storefront --skill variant-selection

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product teams and developers reason about how product attributes map to concrete variants, ensuring the correct variant is added to the cart and the UI accurately reflects availability and discounts.

Core Features & Use Cases

  • Understand and modify how variant selectors work on product pages, ensuring user selections resolve to valid variants.
  • Debug Add to Cart readiness by validating that all required attributes are selected and that the chosen variant exists.
  • Visualize discount opportunities at the option level and display them as badges on the variant options.

Quick Start

Identify the chosen color and size on a product page, then determine the matching variant to update the UI and Add to Cart state.

Frequently Asked Questions about variant-selection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map product attribute selections to a valid e-commerce variant?

Mapping product attribute selections to a concrete variant requires enforcing underlying variant-attribute logic to resolve combinations like color and size into a valid variant for cart actions. This ensures user selections resolve correctly.

Why does Add to Cart fail when required product attributes are not selected?

Add to Cart readiness fails when required product attributes are missing because the variant selector cannot resolve a concrete variant. Validating that all attributes are selected ensures the chosen variant exists and is ready for cart actions.

How do I update the product page UI based on variant availability?

Updating the product page UI based on variant availability involves checking the selected attributes against existing variants. This availability-driven UI update process handles dead-ends and prevents users from selecting unavailable combinations.

Can I display discount badges on individual product variant options?

Yes, you can display discount badges on variant options by visualizing discount opportunities at the option level. This maps attribute selections to concrete variants and reflects discount indicators directly on the product page UI.

How do you handle dead-ends in product variant selection logic?

Handling dead-ends in product variant selection logic requires enforcing how attributes determine compatibility across combinations like color and size. This prevents invalid selections and updates the UI to accurately reflect availability constraints.

What is the best way to debug an invalid product variant selection on a product page?

The best way to debug invalid product variant selection is to validate that all required attributes are selected and that the chosen variant exists. This checks the underlying variant-attribute logic to resolve dead-ends and ensure Add to Cart readiness.