Modifier Validation

As a reminder, there are two types of modifiers, checkbox (CHOICE or GIFT_WRAP types) and text (TEXT or GIFT_MESSAGE types).

If an item has modifiers available, they will each be represented as a modifier list object on the item.modifier_lists array. Regardless of the type, there will be a min_selected_modifiers (min) and max_selected_modifiers (max) on each modifier list object.

For a checkbox, it will contain a modifiers array which represents the modifier choices available for that modifier list. The min/max can both be 0 meaning any combination of modifiers can be selected, or they can be set to any integer representing the min number of modifiers required, and max number of modifiers allowed (e.g. 1 for both min/max means a single modifier is always required).

For text, there will always be an integer larger than 0 for the max. This represents the max numbers of characters allowed. The min will either be 0 or 1, indicating whether the text input is required.

So from a UI perspective, regardless of type, if the min_selected_modifiers is larger than 0, then it’s a required modifier.

The SDK expects the selected modifiers to be an array of AddItemModifiers.

type AddItemModifier = ChoiceModifier | TextModifier | GiftWrapModifier | GiftMessageModifier;

interface ChoiceModifier extends BaseModifier {
	type: 'CHOICE';
	choiceSelections: Choice[];
}
interface TextModifier extends BaseModifier {
	type: 'TEXT';
	textEntry: string;
}
interface GiftWrapModifier extends BaseModifier {
	type: 'GIFT_WRAP';
	choiceSelections: Choice[];
}
interface GiftMessageModifier extends BaseModifier {
	type: 'GIFT_MESSAGE';
	textEntry: string;
}

type Choice = string | ChoiceSelection;

interface ChoiceSelection {
	id: string;
	quantity: number;
}

For checkbox modifiers, choiceSelections is an array of ids from the selected modifier objects on the modifiers array (on the modifier list object), or if using modifier quantities an array of ChoiceSelections. For text modifiers, textEntry is just a string filled in by the buyer.

An example:

const selectedModifiers = [
    {
        "id": "11ee26523c56faf08d928e0f9ddeceab",
        "type": "TEXT",
        "textEntry": "Text Modifier"
    },
    {
        "id": "4APD27UX4X74MBF5Y6THCI4J",
        "type": "CHOICE",
        "choiceSelections": [
            "ANB5VU4UW7IEC32BKOE5B2U3",
            "X5M7U2YWS226J66DUOVEMZEB",
            "H6ATNKZYNTH3NHBLKZMDUPR7"
        ]
    },
    {
        "id": "E3MWZ3PJ3VZDQWGW4G3KFZGW",
        "type": "CHOICE",
        "choiceSelections": [
            {
                id: "GKCUYTB7ARN25J7BTRTOSVHO",
                quantity: 2
            }
        ]
    }
]

Using the SDK you can evaluate each object on the item’s modifier_lists array to determine if it’s valid after any modifier change.

// Assuming you already have an array of selectedModifiers
item.modifier_lists.forEach(modifierList => {
    const isModifierListValid = sdk.helpers.item.isModifierListForSelectedModifiersValid(modifierList, selectedModifiers);
    // Update your UI to indicate whether your modifier list is valid based off of isModifierListValid
});