Hide elements

You can choose to hide the application's elements

a list of elements you can hide on demand.

📘

Hide elements

  • Header
  • Origin and destination information
  • Delivery Code Information
  • Chat Tab With Driver (Only when the Job is in "Going to Destination" Step")
  • Delete Product Button (Only in "received" and "picking" step)
  • Payment State
  • Order Map
  • Help Center
  • Decimals
  • Taxes
  • Order Help
  • Cancel Order

Specific configuration parameters

📘

Hide elements value

  • Beware that as for now, values are logically inverted.
  • in order to display the element you set the string 'true', in order to hide, you set the value string 'false'.
  • Notice also that values are a string, not a boolean
ParameterDescription
hideElements.headerallows you to choose not to render the order header element of the application

default: "true"
options: "false: || "true
hideElements.originDestinationAllows you to choose not to render the order origin-destination element of the application

default: "true"
options: "false: || "true"
hideElements.deliveryCodeAllows you to choose not to render the delivery Code element of the application

default: "true"
options: "false: || "true"
hideElements.chatWithDriverAllows you to choose not to render the Driver Tab Chat during the specific step "Going To Destination"

NOTE: This Param does not affect the visualization of the chat in any other steps.

default: "true"
options: "false: || "true"
hideElements.productDeleteAllows you to choose not to render the Delete Product Button in the product's list

default: "false"
options: "false: || "true"
hideElements.paymentStatusAllows you to render or hide the payment status.

default: "false"
options: "false: || "true"
hideElements.orderMapAllows you to show or hide the map component.

default: "false"
options: "false: || "true"
hideElements.helpCenterAllows you to show or hide the help center component.

default: "false"
options: "false: || "true"
hideElements.decimalsAllows you to show or hide the decimals in OrderDetails component.

default: "false"
options: "false: || "true"
hideElements.taxesAllows you to show or hide taxes in OrderDetails component.

default: "false"
options: "false: || "true"
hideElements.orderHelpAllows you to show or hide order Help section

default: "false"
options: "false: || "true"
hideElements.cancelOrderAllows you to show or hide the cancel order button in the CommentForm component

default: "false"
options: "false: || "true"

Usage Example

Consider the following examples:

Hiding Header

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            header: 'false', 
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content

Hiding Origin Destionation Information

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            originDestination: 'false', 
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

You will see the following content

Hiding Delivery Code Element

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            deliveryCode: 'false' 
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Driver Chat While in "Going To Destination" Step

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            chatWithDriver: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Allowing Delete Product Button

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            productDelete: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Payment Status

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            paymentStatus: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Map Component

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            orderMap: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Help Center Component

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            helpCenter: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Decimals in Order Details Component

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            decimals: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hiding Taxes in Order Details Component

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            taxes: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hide the section to understand the charges for the order

552
<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            orderHelp: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>

Hide cancel order button from CommentForm component

<!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/lsw.js"></script>
<script>
    const params = {
        job: "myJob",
        token: "myToken",
        container: "#instaleap-lsw-v3",       
        hideElements: {             
            cancelOrder: true
        },
    }
    window.instaleap.lsw.render(params)
</script>
</html>