Help

1 min read

Get Started

Last Updated - Platform 22.0 - SDK 17.0

The Variant Selector can use the Products API to download missing Product data. It will present a loading spinner within the sheet whilst this happens.

Products can contain one or more Variants and any number of forms (color, size, width...) for the user to select. If there is only one Variant remaining then the selector will complete immediately returning that Variant.

Set up the Variant Selector

There is no set up for this feature but it can be used by customisations to select variants. For an example of this check out this Wishlist Button customisation guide.

Use the Variant Selector

To present the Variant Selector use the Coordinator. It has a simplified presentVariantSelector function that can return Forms as they are selected as well as the final selected Variant.

Container.shared.coordinators.variantSelector().presentVariantSelector(
    // Try to pass a previously loaded ProductState as it saves an API call.
    state: productState ?? .init(id: productIdentifier),
    formSelection: { formId, variationId in
        // This is optional but can be used to update this feature's state to match the forms that the user selects.
        // See the Wishlist Button customisation example linked in the previous section.
    },
    completion: { variant in
        // Run your custom code to do something with the selected variant.
    }
)

Use the Variant Selector (Advanced)

If you only have a Product Identifier, and want to rely on the Variant Selector to load the Product, you can present the sheet with more advanced delegation to observe and react to the redux actions and state.

Container.shared.coordinators.variantSelector().presentVariantSelector(
    state: .init(id: productIdentifier),
    delegate: { state, action in
        // Add your custom code here, here's some common actions.
        switch action {
        case ServiceAction.Product.fetched:
            // Here you can get the product after it is retrieved from the API and run your custom code.
            let product = state?.product
            
        case VariantSelectorAction.selectForm(let formId, let variationId):
            // Respond to form selections within the sheet (this can include deselections when the user navigates back).
            
        case VariantSelectorAction.Delegate.selected(let variantId):
            // Respond to the variant selected action and get the variant.
            let variant = state?.selection?.selected
            
        case VariantSelectorAction.Delegate.cancelled:
            // Respond to the user cancelling variant selection.
            
        default:
            break
        }
    }
)

Next steps