<div class="product-options js-product-options">
<div class="product-options-inner">
<div class="option-toggles">
<button class="toggle js-toggle active ">
<div class="toggle-inner">
<h5 class="heading heading--context item-heading">Clever Unlimited*</h5>
<span class="item-subheading">Med ladeboks</span>
</div>
</button>
<button class="toggle js-toggle ">
<div class="toggle-inner">
<h5 class="heading heading--context item-heading">Clever Unlimited Network</h5>
<span class="item-subheading">Uden ladeboks</span>
</div>
</button>
</div>
<div class="option-content">
<div class="option-content-inner js-option-container">
<div class="item js-item active ">
<div class="item-details">
<div class="item-header">
<h5 class="heading heading--context item-heading">Clever Unlimited*</h5>
<span class="item-subheading">Med ladeboks</span>
</div>
<span class="item-body js-body-container">
<span class="body js-body">
<p>Tilvælger du installation af Clevers ladeboks hjemme med Clever Unlimited, kan du vågne hver dag til et fuldt batteri og ny energi. Så kan du nemlig køre og lade alt det du vil. Både på ladeboksen hjemme og ude på ladenetværket.</p>
</span>
</span>
<div class="checklist">
<h3 class="heading checklist-heading heading--context ">Clever Unlimited <br>indeholder:</h3>
<ul class="checklist-list">
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Installation af ladeboks hjemme</span>
</li>
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ubegrænset opladning hjemme</span>
</li>
</ul>
</div>
</div>
<div class="item-specifications">
<span class="item-price">749</span><span class="suffix">kr/md</span>
<div class="item-price-specification">
<span>Installation af ladeboks</span>
<br><strong>7500kr.</strong>
</div>
<div class="item-price-specification">
<span>Mindstepris i 6 md. bindningsperiode</span>
<br><strong>11994kr.</strong>
</div>
<div class="item-disclaimer">
<span class="small-text"></span>
</div>
</div>
</div>
<div class="item js-item ">
<div class="item-details">
<div class="item-header">
<h5 class="heading heading--context item-heading">Clever Unlimited Network</h5>
<span class="item-subheading">Uden ladeboks</span>
</div>
<span class="item-body js-body-container">
<span class="body js-body">
<p>Når du køber bilen fra ny, får du ubegrænset opladning og fuld power på køreglæden fra allerførste kilomtere. Med Clever Unlimited Network får du:</p>
</span>
</span>
<div class="checklist">
<h3 class="heading checklist-heading heading--context ">Clever Unlimited Network <br>indeholder:</h3>
<ul class="checklist-list">
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ubegrænset opladning på hele Clevers ladenetværk</span>
</li>
<li class="checklist-item">
<span class="icon icon-checkmark">
<span class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.15 24.18">
<path d="M11.09 24.18L0 13.1l2.12-2.13 8.91 8.92L29.97 0l2.18 2.07-21.06 22.11z" />
</svg>
</span>
</span>
<span class="text">Ladebrik</span>
</li>
</ul>
</div>
</div>
<div class="item-specifications">
<span class="item-price">625</span><span class="suffix">kr/md</span>
<div class="item-price-specification">
</div>
<div class="item-price-specification">
<span>Mindstepris i 6 md. bindningsperiode</span>
<br><strong>3750kr.</strong>
</div>
<div class="item-disclaimer">
<span class="small-text"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-options js-product-options">
<div class="product-options-inner">
<div class="option-toggles">
{% for item in productOptions %}
<button class="toggle js-toggle {% if loop.index == 1 %} active {% endif %}">
<div class="toggle-inner">
<{{ subHeadingLevel|default('h5') }} class="heading heading--context item-heading">{{ item.productOptionHeading }}</{{ subHeadingLevel|default('h5') }}>
<span class="item-subheading">{{ item.productOptionSubHeading }}</span>
</div>
</button>
{% endfor %}
</div>
<div class="option-content">
<div class="option-content-inner js-option-container">
{% for item in productOptions %}
<div class="item js-item {% if loop.index == 1 %} active {% endif %}">
<div class="item-details">
<div class="item-header">
<{{ subHeadingLevel|default('h5') }} class="heading heading--context item-heading">{{ item.productOptionHeading }}</{{ subHeadingLevel|default('h5') }}>
<span class="item-subheading">{{ item.productOptionSubHeading }}</span>
</div>
<span class="item-body js-body-container">
<span class="body js-body">{{ item.productOptionBody }}</span>
</span>
{% if item.productOptionPerks|length %}
{% include '@checklist' with { headingSmall: true, heading: item.productOptionPerksHeading, items: item.productOptionPerks } %}
{% endif %}
</div>
<div class="item-specifications">
<span class="item-price">{{ item.subscriptionPrice }}</span><span class="suffix">kr/md</span>
<div class="item-price-specification">
{% if item.installationPrice or item.installationPrice is not same as(0) %}
<span>{{ item.installationHeading }}</span>
<br><strong>{{ item.installationPrice }}kr.</strong>
{% endif %}
</div>
<div class="item-price-specification">
<span>Mindstepris i 6 md. bindningsperiode</span>
<br><strong>{{ item.installationPrice + (item.subscriptionPrice * 6) }}kr.</strong>
</div>
<div class="item-disclaimer">
<span class="small-text">{{ item.disclaimer}}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{
"productOptions": [
{
"productOptionHeading": "Clever Unlimited*",
"productOptionSubHeading": "Med ladeboks",
"productOptionBody": "<p>Tilvælger du installation af Clevers ladeboks hjemme med Clever Unlimited, kan du vågne hver dag til et fuldt batteri og ny energi. Så kan du nemlig køre og lade alt det du vil. Både på ladeboksen hjemme og ude på ladenetværket.</p>",
"productOptionPerksHeading": "Clever Unlimited <br>indeholder:",
"productOptionPerks": [
"Installation af ladeboks hjemme",
"Ubegrænset opladning hjemme"
],
"subscriptionPrice": 749,
"installationHeading": "Installation af ladeboks",
"installationPrice": 7500
},
{
"productOptionHeading": "Clever Unlimited Network",
"productOptionSubHeading": "Uden ladeboks",
"productOptionBody": "<p>Når du køber bilen fra ny, får du ubegrænset opladning og fuld power på køreglæden fra allerførste kilomtere. Med Clever Unlimited Network får du:</p>",
"productOptionPerksHeading": "Clever Unlimited Network <br>indeholder:",
"productOptionPerks": [
"Ubegrænset opladning på hele Clevers ladenetværk",
"Ladebrik"
],
"subscriptionPrice": 625,
"installationHeading": "",
"installationPrice": 0
}
]
}
Purpose: Used to outline prices for different product options.
Purpose: Used to add different options
Required: Yes
Purpose: Used to indicate the name of the product
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Acts as a supporting headline above
Required: Yes
Recommendations: Keep max to about 70-80 characters (including spaces)
Purpose: Used to extend the above headings
Required: No
Purpose: Used to describe list content
Required: No
Purpose: Used to list product perks
Required: No
Purpose: A number used to indicate the subscription price
Required: Yes
Purpose: Used to indicate the price of the installation
Required: No
Purpose: A number used to indicate the installation price
Required: No
Purpose: Used for product specific disclaimer - only shown on mobile
Required: No