<div class="page-title page-title--full-width">
<div class="h-container">
<h1 class="page-title__text">Tellimuse vormistamine</h1>
</div>
</div>
<div class="h-container">
<div class="grid">
<div class="grid__col grid__col--lg-6">
<section class="section section--checkout-form ">
<div class="checkout-form">
<h2 class="checkout-form__title h3">Kontaktinfo</h2>
<div class="checkout-form__fields grid">
<div class="grid__col grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="first-name">
Eesnimi
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="first-name" name="" required>
</div>
</div>
</div>
<div class="grid__col grid__col--lg-6">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="last-name">
Perenimi
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="last-name" name="" required>
</div>
</div>
<div class="checkout-form__error-message">
Error sõnumi näide.
</div>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="personal-id">
Isikukood
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="personal-id" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield select ">
<label class="textfield__label select__label textfield__label--required " for="construction-object">
Ehitusobjekt
</label>
<div class="textfield__inner">
<select name="" id="construction-object" class="textfield__input select__input" required>
<option value="placeholder" disabled selected>
Aadress
</option>
<option value="aadress-1">
Aadress 1
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
</div>
</div>
</div>
<div class="checkout-form__add-new-object grid__col">
<p class="text-black">Ei leidnud sobivat?</p>
<a href="#" class="checkout-form__add-new-object-link">Lisa uus objekt</a>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="phone">
Telefoninumber
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="phone" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield">
<label class="textfield__label textfield__label--required " for="email">
E-mail
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="email" name="" required>
</div>
</div>
</div>
<div class="grid__col">
<div class="textfield textarea">
<label class="textfield__label " for="additional-info">
Lisainfo (optional)
</label>
<div class="textfield__inner">
<textarea class="textfield__input textarea__input" id="additional-info" name=""></textarea>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="grid__col grid__col--lg-6 grid__col--last-xs">
<section class="section section--faq ">
<h2 class="h3">KKK</h2>
<div class="accordion js-accordion-group ">
<div class="accordion__item js-accordion" id="accordion-item-1">
<a href="#accordion-item-1" class="accordion__header js-accordion-control">
<svg class="icon accordion__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<div class="accordion__title">Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion__item js-accordion" id="accordion-item-2">
<a href="#accordion-item-2" class="accordion__header js-accordion-control">
<svg class="icon accordion__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<div class="accordion__title">Kuidas toimub kauba tagastamine? </div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion__item js-accordion" id="accordion-item-3">
<a href="#accordion-item-3" class="accordion__header js-accordion-control">
<svg class="icon accordion__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<div class="accordion__title">Kus ma näen transpordikulu?</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion__item js-accordion" id="accordion-item-4">
<a href="#accordion-item-4" class="accordion__header js-accordion-control">
<svg class="icon accordion__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<div class="accordion__title">Kuidas saan katkestada või muuta tellimust?</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</section>
</div>
<div class="grid__col grid__col--xl-10">
<section class="section section--order-summary ">
<div class="order-summary">
<div class="order-summary__header">
<h2>Tellimuse kokkuvõte</h2>
</div>
<div class="order-summary__content">
<table class="order-summary__table tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead class="order-summary__head">
<tr class="order-summary__row">
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Toode</span>
</th>
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Toote hind</span>
</th>
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Kogus</span>
</th>
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Rendiperiood</span>
</th>
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Transport</span>
</th>
<th class="order-summary__table-header h-text-left text-medium" scope="col">
<span class="">Rendipunkt/aadress</span>
</th>
</tr>
</thead>
<tbody class="order-summary__body">
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
<tr class="order-summary__row">
<td class="order-summary__table-cell h-text-left">
<span class="">Akukäärtõstuk 2.5M manuaalne</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">16€/päev</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">100 tk</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">01.08 2022 - 22.02.2023</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Ei</span>
</td>
<td class="order-summary__table-cell h-text-left">
<span class="">Uus-Paldiski mnt 3, Keila</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</div>
<section class="section section--checkout-buttons ">
<div class="grid grid--middle-xs grid--column grid--row-lg grid--reverse-lg grid--between-lg">
<div class="grid__col grid__col--min">
<a href="#" class="button">
<span class="button__inner">
<span class="button__text">Esita tellimus kinnitamisele</span>
</span>
</a>
</div>
<div class="grid__col grid__col--min">
<a href="#" class="button button--text">
<span class="button__inner">
<span class="button__text">Tagasi rendikorvi</span>
</span>
</a>
</div>
</div>
</section>
</div>
{% include '@page-title' with { data: { title: 'Tellimuse vormistamine' }, isFullWidth: true } %}
<div class="h-container">
<div class="grid">
<div class="grid__col grid__col--lg-6">
{% include '@checkout-form' with {
data: data.checkoutForm
} %}
</div>
<div class="grid__col grid__col--lg-6 grid__col--last-xs">
{% set sectionContent %}
<h2 class="h3">KKK</h2>
{% include '@accordion' with {
data: data.accordion,
modifier: '',
class: ''
} %}
{% endset %}
{% include '@section' with { class: '', modifier: 'section--faq' } %}
</div>
<div class="grid__col grid__col--xl-10">
{% set sectionContent %}
{% include '@order-summary' with {
data: data.orderSummary
} %}
{% endset %}
{% include '@section' with { class: '', modifier: 'section--order-summary' } %}
</div>
</div>
{% set sectionContent %}
<div class="grid grid--middle-xs grid--column grid--row-lg grid--reverse-lg grid--between-lg">
<div class="grid__col grid__col--min">
{% include '@button' with {
data: {
link: '#',
text: 'Esita tellimus kinnitamisele'
},
modifier: '',
class: ''
} %}
</div>
<div class="grid__col grid__col--min">
{% include '@button' with {
data: {
link: "#",
text: 'Tagasi rendikorvi'
},
modifier: 'button--text',
class: ''
} %}
</div>
</div>
{% endset %}
{% include '@section' with { class: '', modifier: 'section--checkout-buttons' } %}
</div>
{
"language": "en-US",
"data": {
"accordion": {
"items": [
{
"id": "accordion-item-1",
"title": "Mis juhtub siis, kui ma ei saa kaupa valitud ajaks tagastatud?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "accordion-item-2",
"title": "Kuidas toimub kauba tagastamine? ",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "accordion-item-3",
"title": "Kus ma näen transpordikulu?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "accordion-item-4",
"title": "Kuidas saan katkestada või muuta tellimust?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
},
"checkoutForm": {
"title": "Kontaktinfo",
"firstName": {
"label": "Eesnimi",
"attributes": "required",
"id": "first-name"
},
"lastName": {
"label": "Perenimi",
"attributes": "required",
"id": "last-name"
},
"personalId": {
"label": "Isikukood",
"attributes": "required",
"id": "personal-id"
},
"constructionObject": {
"label": "Ehitusobjekt",
"attributes": "required",
"id": "construction-object",
"iconName": "chevron-bottom",
"placeholder": "Aadress",
"options": [
{
"name": "Aadress 1",
"value": "aadress-1"
}
]
},
"phone": {
"label": "Telefoninumber",
"attributes": "required",
"id": "phone"
},
"email": {
"label": "E-mail",
"attributes": "required",
"id": "email"
},
"additionalInfo": {
"label": "Lisainfo (optional)",
"id": "additional-info"
}
},
"orderSummary": {
"header": {
"text": "Tellimuse kokkuvõte"
},
"headers": [
{
"title": "Toode"
},
{
"title": "Toote hind"
},
{
"title": "Kogus"
},
{
"title": "Rendiperiood"
},
{
"title": "Transport"
},
{
"title": "Rendipunkt/aadress"
}
],
"rows": [
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
},
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
},
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
},
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
},
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
},
{
"cells": [
{
"content": "Akukäärtõstuk 2.5M manuaalne"
},
{
"content": "16€/päev"
},
{
"content": "100 tk"
},
{
"content": "01.08 2022 - 22.02.2023"
},
{
"content": "Ei"
},
{
"content": "Uus-Paldiski mnt 3, Keila"
}
]
}
]
}
}
}