CarBoost Calculator Widgets for Part Sections
Denne widge support i 2 modes - en i intro området og en i part området.
Intro
json
{
"car": {
"intro": {
"layout": {
"mode": "split",
"parts": [
{
"r": "$(pricing.financing)",
"w": "calculator2",
"l": "Beregn finansiering",
"cta": "Ansøgning om finansiering her"
}
]
}
}
}
}Part
Basic
Alle generelle indstillinger, som ikke er beregner
JSON
{
"t": "carboostCalculation",
"r" : "$(pricing.financing)",
"s": {
"l": "Finansier dit bilkøb hos xxx",
"form_layouts": {
...
},
"layouts": {
...
},
"infotext": {
...
}
}
}Udvidet
Alle generelle indstillinger, som ikke er beregner
JSON
{
"t": "carboostCalculation",
"r" : "$(pricing.financing)",
"s": {
"l": "Finansier dit bilkøb hos xxx",
"f": "$page.finance_text",
"ul": "$page.finance_ul",
"table": "$page.finance_ul",
"f2": "$page.finance2_text",
"cta": "$page.finance_cta",
"class": "car-some-class",
"fh_txt": "Tilpas din finansiering",
"afh_txt": "Udfyld og bliv kontaktet",
"cta1_txt": "Start ansøgning",
"cta2_txt": "Book rådgivning",
"cta3_txt": "Ja tak, kontakt mig gerne",
"form_layouts": {
...
},
"layouts": {
...
},
"infotext": {
...
}
}
}Santander eksempel
Med udbetaling og Uden udbetaling
JSON
{
"t": "carboostCalculation",
"r" : "$(pricing.financing)",
"s": {
"l": "Finansier dit bilkøb hos xxx",
"f": "$page.finance_text",
"ul": "$page.finance_ul",
"form_layouts": {
"first ID" : [
{"key":"name2", "label":"${this.field.label}", "value":"${this.data.name5.result}"},
{"key":"name17", "label":"${this.field.label}", "value":"${this.field.value} måneder"},
{"key":"name20", "label":"${this.data.name20.label}", "value":"${this.data.name20.result}"}
],
"second ID" : [
{"key":"name17", "label":"${this.field.label}", "value":"${this.field.value} måneder"},
{"key":"name20", "label":"${this.data.name20.label}", "value":"${this.data.name20.result}"}
]
},
"layouts": {
"first ID": [
{"key":"name2", "label":"${this.fields.name2.label}", "value":"${this.data.name5.result}."},
{"key":"name17", "label":"${this.fields.name17.label}", "value":"${this.fields.name17.value} måneder"},
{"key":"name20", "label":"${this.data.name20.label}", "value":"${this.data.name20.result}"}
],
"second ID": [
{"key":"name17", "label":"${this.fields.name17.label}", "value":"${this.fields.name17.value} måneder"},
{"key":"name20", "label":"${this.data.name20.label}", "value":"${this.data.name20.result}"}
]
},
"infotext": {
"first ID": "${this.data.name26.result}",
"second ID": "${this.data.name26.result}"
}
}
}Jyske Finans eksempel
JSON
{
"t": "carboostCalculation",
"r" : "$(pricing.financing)",
"s": {
"l": "Finansier dit bilkøb hos xxx",
"form_layouts": {
"first ID" : [
{"key": "downpayment_percent", "label": "Udbetaling", "value": "${this.callback.currency(((this.product.pricing.cash.price)*(this?.fields?.downpayment_percent?.value/100)), false, {decimals:0})}"},
{"key": "period", "label": "Antal måneder", "value": "${this.fields.period.value} måneder"},
{"key": "name20", "label": "Månedlig ydelse", "value": "${this.callback.currency(this.data.payment.result, false, {decimals:0})}"}
]
},
"layouts": {
"first ID": [
{"key": "downpaymentcash", "label": "Udbetaling", "value": "${this.callback.currency(((this.product.pricing.cash.price)*(this?.fields?.downpayment_percent?.value/100)), false, {decimals:0})}"},
{"key": "period", "label": "Antal måneder", "value": "${this.fields.period.value} måneder"},
{"key": "downpayment_percent", "label": "Månedlig ydelse", "value": "${this.callback.currency(this.data.payment.result, false, {decimals:0})}"}
]
},
"infotext": {
"first ID": "${this.data.payoff.result}"
}
}
}AL Finans eksempel
JSON
{
"t": "carboostCalculation",
"r" : "$(pricing.financing)",
"s": {
"l": "Finansier dit bilkøb hos xxx",
"form_layouts": {
"first ID" : [
{"key": "downpayment_percent", "label": "Udbetaling", "value": "${this.callback.currency(this.data.downpaymentcash.result, false, {decimals:0})}"},
{"key": "period", "label": "Antal måneder", "value": "${this.data.period.result} måneder"},
{"key": "name20", "label": "Månedlig ydelse", "value": "${this.callback.currency(this.data.payment.result, false, {decimals:0})}"}
]
},
"layouts": {
"first ID": [
{"key":"period", "label":"Periode", "value":"${this.data.period.result} måneder"},
{"key":"downpayment_percent", "label":"Udbetaling", "value":"${this.callback.currency(this.data.downpaymentcash.result, false, {decimals:0})}"},
{"key":"downpayment_md", "label":"Månedlig ydelse", "value":"${this.callback.currency(this.data.payment.result, false, {decimals:0})}"}
]
},
"infotext": {
"first ID": "${this.data.payoff.result}"
}
}
}Platform CarWeb Static Content Setup
Santander med bullets:
html
{
"finance_text": "<p>Et bilkøb er en stor og vigtig økonomisk beslutning, hvor de fleste har brug for en fornuftig finansieringsløsning. Derfor vælger størstedelen af vores kunder at få finansieret deres bilkøb igennem os, så de kan få glæde af vores attraktive fordele.</p><p>Vi har i en årrække samarbejdet med finansieringsselskabet Santander Consumer Bank, der er landets førende inden for finansiering af biler.</p><h5>Fordele ved at finansierer igennem Santander:</h5>",
"finance_ul": [
{
"text": "Mulighed for en fast lav rente eller en variabel rente."
},
{
"text": "Fornuftige etableringsomkostninger."
},
{
"text": "Ingen gebyr ved indfrielse af lån."
}
]
}Generisk med bullets:
html
{
"finance_text": "<p>Et bilkøb er en stor og vigtig økonomisk beslutning, hvor de fleste har brug for en fornuftig finansieringsløsning. Derfor vælger størstedelen af vores kunder at få finansieret deres bilkøb igennem os, så de kan få glæde af vores attraktive fordele.</p><p>Vi har i en årrække samarbejdet med finansieringsselskabet XXX, der er landets førende inden for finansiering af biler.</p><h5>Fordele ved at finansierer igennem XXX:</h5>",
"finance_ul": [
{
"text": "XXX"
},
{
"text": "XXX"
},
{
"text": "XXX"
}
]
}CSS
css
/* Rangeslider */
:root{
--ca-rangetrack-before: var(--ca-stone-5);
--ca-rangetrack-after: var(--ca-gray-3);
--ca-rangeslider-wrap-bg: var(--ca-gray-3);
--ca-rangeslider-bg: var(--ca-gray-2);
--ca-rangeslider-thumb-bg: var(--ca-stone-7);
}
/* CarBoost Finance */
:root{
--ca-carboostcalculator-area-bg: transparent;
--ca-carboostcalculator-area-color: var(--ca-stone-7);
--ca-carboostcalculator-content-bg: transparent;
--ca-carboostcalculator-content-color: var(--ca-carboostcalculator-area-color, var(--ca-stone-7));
--ca-carboostcalculator-form-bg: var(--ca-gray-1);
--ca-carboostcalculator-form-color: var(--ca-stone-7);
--ca-carboostcalculator-intro-widget-bg: var(--ca-gray-1);
--ca-carboostcalculator-intro-widget-color: var(--ca-stone-7);
--ca-carboostcalculator-form-box-bg: var(--ca-gray-3);
--ca-carboostcalculator-form-box-color: var(--ca-stone-7);
}