Louwman Lease Tools

Louwman

Add these dependencies to the head of your page.

<head>
    ...
    <script src="https://leasetools.alcredis.nl/louwman/main.js" type="module"></script>
</head>

Then add a LeaseTool component <div> with some configuration as described below somewhere in your page.

Faceting overview

demo

The basic LeaseTool component renders a Faceting overview.

<div data-component="LeaseTool"></div>

Faceting for 1 brand

demo

To create a brand specific Lease Tool page, add 3 attributes.

One data-prop-brand for the brand slug;
One data-prop-overview-url link to the general overview;
One data-prop-brand-url link template to the other model specific urls. In this template the variable %brand% is replaced with the actual model slug;

<div data-component="LeaseTool"
    data-prop-brand="toyota"
    data-prop-overview-url="https://www.louwman.nl/private-lease/index.html"
    data-prop-brand-url="https://www.louwman.nl/private-lease/brand_%brand%.html"></div>

Faceting for 1 model

demo

To create a model specific Lease Tool page, add 3 attributes.

One data-prop-model for the model slug;
One data-prop-overview-url link to the general overview;
One data-prop-model-url link template to the other model specific urls. In this template the variable %model% is replaced with the actual model slug;

<div data-component="LeaseTool"
data-prop-model="yaris"
data-prop-overview-url="https://www.louwman.nl/private-lease/index.json"
data-prop-model-url="https://www.louwman.nl/private-lease/%model%.json"></div>