Variation Choices

Your product page will need to show the variations that can be selected for an item.

The first check using the SDK is straightforward. You need to determine if all variations for the item resource are sold out (i.e. in your dashboard is marked as sold out, or with inventory tracking enabled has an inventory of 0).

You can do so via:

const soldOut = sdk.helpers.item.isItemSoldOut(item);

If soldOut is true, you should disable your add to cart button and/or buy now button, as well any variation/option selectors and add some indicator to mark the item as sold out.

If the item is not sold out, the next steps will be determined by whether your item is a flat variation or one with multiple options.

Items with flat variations

If your item is a flat variation (i.e. the item has no item_options), it will just have the array of variations available on the item.

If you want to select the first variation that’s in stock for a default selection:

const variations = item.variations;
const defaultSelectedVariation = variations.find(v => !sdk.helpers.item.isVariationSoldOut(v));
// Set your default selector to the defaultSelectedVariation

If you want to disable your variation choices that are sold out, you can determine which should be disabled:

const variations = item.variations;
const variationsDisabled = variations.filter(v => sdk.helpers.item.isVariationSoldOut(v));
// Disable the selectors for all the variationsDisabled

Items with multiple options

If your item has multiple options (i.e. the item has item_options), and you choose to display each option set’s choices, you will need to use the selected options to determine the variation.

The SDK uses the following format for your selected options:

interface OptionSelection {
    itemOptionId: string;
    choice: string;
}

itemOptionId is the id on an object in item_options, and choice is one of the strings in the choices array on the same object.

If you want to select the first variation that’s in stock for a default selection:

const selectedOptions = [];

item.item_options.forEach(itemOption => {
    // Determines the disabled options for each item option based off the selected options. Note that this
    // function automatically excludes the same item option from selected options.
    // e.g. You have 3 options, color, size, and variant. You have a selected option for each. When you
    // check the color option, the selected color option will not be used in determining which color option(s)
    // is/are disabled as it would always disable all the other color choices.
    const disabledChoices = sdk.helpers.item.getDisabledOptionChoicesForSelectedOptions(item, itemOption, selectedOptions);
    selectedOptions.push({ itemOptionId: itemOption.id, choice: itemOption.choices.find(c => disabledChoices.indexOf(c) === -1) });
});
// Set your default option selectors to match the selectedOptions

If you want to disable your variation choices that are sold out, you can do so after any item option is selected:

// Assuming you have a global "selectedOptions" (with defaults selected) and "item" variables

function itemOptionSelected(itemOptionId, itemOptionChoice) {
    selectedOptions.find(selectedOption => selectedOption.itemOptionId === itemOptionId).choice = itemOptionChoice;

    item.item_options.forEach(itemOption => {
        const disabledChoices = sdk.helpers.item.getDisabledOptionChoicesForSelectedOptions(item, itemOption, selectedOptions);
        // Set your option choice selectors to their disabled state based on disabledChoices
    });
}

For the scenario above, imagine you have the following option sets configured:

• Size: S/L
• Color: Red/Blue

They will give you the following variations:

• S/Red
• S/Blue
• L/Red
• L/Blue

If L/Blue is sold out, when L is selected as an option choice for Size, then Blue would be disabled as an option choice for Color.

Items with 3+ options

If your item has 3+ option sets, we recommend no longer disabling the option choice selectors, but giving them a visual disabled state and still allowing them to be selectable.

Imagine you have the following option sets configured:

• Size: S/L
• Color: Red/Blue
• Variant: Home/Away

They will give you the following variations:

• S/Red/Home
• S/Red/Away
• S/Blue/Home
• S/Blue/Away
• L/Red/Home
• L/Red/Away
• L/Blue/Home
• L/Blue/Away

If everything is sold out except S/Red/Home and L/Blue/Away and you by default select the first available variation (in this case S/Red/Home), then the only option choices that would be enabled would be S (because Red/Home only have S available), Red (because S/Home only have Red available), and Home (because S/Red only have Home available). A buyer would not be able to select the L/Blue/Away variation if you disabled the other option choice selectors, thus why we recommend a visual disabled state, while still allowing them to be selected.

Alternate solutions are not selecting a default variation on load so that all available choices are initially made clear or listing the individual variation combinations that are available when there’s only x variations left.