Steps

This non-visual widget is used to control what steps are available for the user. By default, a user can jump to any step, but you can limit them only by the next and previous or all visited steps. It is also possible to add some rules for the availability of a particular step.

General info

• type: steps

Params

• availabilityMode - the possible values are visited and previous. For visited, the user can visit the next step and all previously visited steps. For previous, the user can visit only the next step and all previous steps. If omitted, all steps are available.

  To understand the difference, consider the following situation. There is a 4-step config. A user starts from Step 1, then goes to Step 2, and then goes back to Step 1.

  • For visited, Step 1, 2, and 3 are available. Step 4 is not available (unless the user goes to Step 3).
  • For previous, only Step 1 and 2 are available. Step 3 and 4 are locked.

• steps - a dictionary of steps and their condition, where the key is a step title or zero-based index and the value is an object like {enabled: true|false}. This dictionary allows you to override the availability mode of a particular step with the following conditions:

  • "enabled": true - enables the corresponding step tab.
  • "hidden": true - removes the step tab.

For more details about configuration parameters, refer to the IWidgetStepsConfig interface.

Examples

Visited mode

{
    "name": "steps",
    "type": "steps",
    "params": {
        "availabilityMode": "visited"
    }
}

Previous-only mode

{
    "name": "steps",
    "type": "steps",
    "params": {
        "availabilityMode": "previous"
    }
}

Overriding availability

Let's assume than on the Step 2 we have a checkbox. We don't want to proceed to the Step 3 unless the user sets this checkbox.

{
    "widgets": [
        {
            "name": "steps",
            "type": "steps",
            "params": {
                "availabilityMode": "visited",
                "steps": {
                    "Step 3": {
                        "enabled": "{{$['confirmation-checkbox']._}}"
                    }
                }
            }
        },
        {
            "name": "confirmation-checkbox",
            "type": "checkbox",
            "params": {
                "value": false,
                "prompt": "I confirm that I am ready for Step 3."
            }
        }
    ],
    "steps": [{
        "title": "Step 1",
        ...
    },{
        "title": "Step 2",
        ...
    },{
        "title": "Step 3",
        ...
    }]
}

Finish button

The Finish button appears on the final step of personalization, where customers approve their personalization result.

You can define the Finish button in this widget by using the finishButton property. This property replaces the deprecated widget finish-button.

When the user approves the personalization result by using the confirmation checkbox, the Finish button is enabled.

{
    "widgets": [
        {
            "name": "steps",
            "type": "steps",
            "params": {
                "availabilityMode": "visited",
                "backToProductButton": {
                    "title": "Back to products",
                    "visible": "true"
                }, 
                "finishButton": {
                    "visible": "true",
                    "enabled": "{{$['agree-checkbox']._}}",
                    "onClick": [...]
                }
            }
        },
        {
            "name": "agree-checkbox",
            "type": "checkbox",
            "params": {
                "prompt": "I approve the design.",
                "value": false
            }
        }
    ],
    "steps": [
        {
            "name": "Approval",
            "mainPanel": {
                "name": "preview-slider"
            },
            "bottomPanel": {
                "name": "agree-checkbox"
            },
            "onActivate": [
                "{{ #function $['agree-checkbox'].value = false }}"
            ]
        }
    ]
}