Guides
Guides

Steps Pick and Collect

Suggest Edits

📘

Params Encoding

In library mode, the configuration is set in the "steps ” attribute.

In web mode, you can change the default “Title” used in the order steps by configuring them through the URL parameter in each step

Remember that we require to comply with (UTF-8) encoding when sending query params. so that if your custom name string has whitespace, you should replace it with the symbol "%20".

ie: "stepConfirmed=Custom title to confirmed step" => stepConfirmed=Custom%20title%20to%20confirmed%20step"

Specific configuration parameters Pick and Collect

Parameter LibParameter WebDescription
steps.confirmed.titlestepConfirmedString which will be used as display name during the Confirmed order step
steps.confirmed.iconstepConfirmedIconParameter used to change the icon of the Confirmed step
steps.picking.titlestepPickingString which will be used as display name during the Picking order step
steps.picking.iconstepPickingIconParameter used to change the icon of the Picking step
steps.readyToPickup.titlestepReadyToPickupString which will be used as display name during the Ready To Pickup order step
steps.readytopickup.iconstepReadyToPickupIconParameter used to change the icon of the Ready to Pickup step
steps.pickedUp.titlestepPickedUpString which will be used as display name during the Picked Up order step
steps.pickedUp.iconstepPickedUpIconParameter used to change the icon of the Picked up step

Usage Example

You will see the following content

<!DOCTYPE html>
<head>
    <title>LSW v3 Embed</title>
</head>
<body>
    <div id="instaleap-lsw-v3"></div>
</body>

<script src="https://xandar-lsw-v3.instaleap.io/lib/step.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",
        steps: {
          confirmed: {
            title: 'Text',
            icon: 'Icon url'
          },
          picking: {
            title: 'Text',
            icon: 'Icon url'
          },
          readytoPickup: {
            title: 'Text',
            icon: 'Icon url'
          },
          pickedUp: {
            title: 'Text',
            icon: 'Icon url'
          }
        },
    }
    window.instaleap.steps.render(params)
</script>
</html>

https://xandar-lsw-v3.instaleap.io/steps?job=myJoB&token=myToken&stepConfirmed=text&stepConfirmedIcon=iconUrl&stepPicking=text&stepPickingIcon=iconUrl&stepReadyToPickup=Text&stepReadyToPickupIcon=iconUrl&stepPickedUp=text&stepPickedUpIcon=iconUrl

You will see the following content:

Updated about 1 month ago