<div class="page-title page-title--full-width">
<div class="h-container">
<h1 class="page-title__text">Rendikorv</h1>
</div>
</div>
<div class="h-container">
<section class="section section--cart-table ">
<div class="cart-table cart-table--has-items">
<div class="cart-table__header">
<h2 class="cart-table__heading">
Tulen ise järele
<span class="cart-table__heading-product-amount">
(3 toodet)
</span>
</h2>
<p class="cart-table__sub-heading">
Järgnevatele toodetele oled valinud ise järele tuleku
</p>
</div>
<div class="cart-table__content">
<div class="cart-table__table-header">
<div class="cart-table__header-row--img"></div>
<div class="cart-table__header-row cart-table__header-row--title">
Toode
</div>
<div class="cart-table__header-row cart-table__header-row--price">
Toote hind
</div>
<div class="cart-table__header-row cart-table__header-row--qty">
Kogus
</div>
<div class="cart-table__header-row cart-table__header-row--date">
Rendi algus
</div>
<div class="cart-table__header-row cart-table__header-row--date">
Rendi lõpp
</div>
<div class="cart-table__header-row cart-table__header-row--pickup-point">
Vastuvõtupunkt
</div>
</div>
<div class="cart-table__product-container">
<a href="#" class="cart-table__product-img">
<figure class="image ">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X350" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<span>Tootepilt</span>
</a>
<div class="cart-table__data-row cart-table__data-row--title">
<div class="cart-table__data-label">
Toode
</div>
<a href="#" class="cart-table__data-value cart-table__data-value--title">
Akukäärtõstuk 2.5M MANUAALNE
</a>
</div>
<div class="cart-table__data-row cart-table__data-row--price">
<div class="cart-table__data-label">
Toote hind
</div>
<div class="cart-table__data-value">
16€/päev
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--qty">
<div class="cart-table__data-label">
Kogus
</div>
<div class="cart-table__data-value">
2tk
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendialgus
</div>
<div class="cart-table__data-value">
01.08 2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendilõpp
</div>
<div class="cart-table__data-value">
22.08.2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--last">
<div class="cart-table__data-label">
Vastuvõtupunkt
</div>
<div class="cart-table__data-value">
Laki 12B, Tartu
</div>
</div>
<div class="cart-table__modify-buttons">
<a href="#" class="cart-table__change-button">Muuda</a>
<a href="#" class="cart-table__delete-button">
<span class="cart-table__delete-text">
Eemalda
</span>
<span class="cart-table__delete-icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="cart-table__product-container">
<a href="#" class="cart-table__product-img">
<figure class="image ">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X300" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<span>Tootepilt</span>
</a>
<div class="cart-table__data-row cart-table__data-row--title">
<div class="cart-table__data-label">
Toode
</div>
<a href="#" class="cart-table__data-value cart-table__data-value--title">
Akukäärtõstuk 2.5M MANUAALNE
</a>
</div>
<div class="cart-table__data-row cart-table__data-row--price">
<div class="cart-table__data-label">
Toote hind
</div>
<div class="cart-table__data-value">
16€/päev
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--qty">
<div class="cart-table__data-label">
Kogus
</div>
<div class="cart-table__data-value">
2tk
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendialgus
</div>
<div class="cart-table__data-value">
01.08 2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendilõpp
</div>
<div class="cart-table__data-value">
22.08.2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--last">
<div class="cart-table__data-label">
Vastuvõtupunkt
</div>
<div class="cart-table__data-value">
Laki 12B, Tartu
</div>
</div>
<div class="cart-table__modify-buttons">
<a href="#" class="cart-table__change-button">Muuda</a>
<a href="#" class="cart-table__delete-button">
<span class="cart-table__delete-text">
Eemalda
</span>
<span class="cart-table__delete-icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
</span>
</a>
</div>
</div>
<div class="cart-table__optimize-buttons">
<button type="button" class="button">
<span class="button__inner">
<span class="button__text">Optimeeri rendipunkti</span>
</span>
</button>
<button type="button" class="button">
<span class="button__inner">
<span class="button__text">Optimeeri rendiperioodi</span>
</span>
</button>
</div>
</div>
</div>
</section>
<section class="section section--cart-table ">
<div class="cart-table cart-table--has-items">
<div class="cart-table__header">
<h2 class="cart-table__heading">
Kohaletoimetamisega
<span class="cart-table__heading-product-amount">
(3 toodet)
</span>
</h2>
<p class="cart-table__sub-heading">
Järgnevatele toodetele oled valinud Ramirendi kohaletoimetuse
</p>
</div>
<div class="cart-table__content">
<div class="cart-table__table-header">
<div class="cart-table__header-row--img"></div>
<div class="cart-table__header-row cart-table__header-row--title">
Toode
</div>
<div class="cart-table__header-row cart-table__header-row--price">
Toote hind
</div>
<div class="cart-table__header-row cart-table__header-row--qty">
Kogus
</div>
<div class="cart-table__header-row cart-table__header-row--date">
Rendi algus
</div>
<div class="cart-table__header-row cart-table__header-row--date">
Rendi lõpp
</div>
<div class="cart-table__header-row cart-table__header-row--pickup-point">
Vastuvõtupunkt
</div>
</div>
<div class="cart-table__product-container">
<a href="#" class="cart-table__product-img">
<figure class="image ">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://via.placeholder.com/300X350" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<span>Tootepilt</span>
</a>
<div class="cart-table__data-row cart-table__data-row--title">
<div class="cart-table__data-label">
Toode
</div>
<a href="#" class="cart-table__data-value cart-table__data-value--title">
Akukäärtõstuk 2.5M MANUAALNE
</a>
</div>
<div class="cart-table__data-row cart-table__data-row--price">
<div class="cart-table__data-label">
Toote hind
</div>
<div class="cart-table__data-value">
16€/päev
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--qty">
<div class="cart-table__data-label">
Kogus
</div>
<div class="cart-table__data-value">
2tk
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendialgus
</div>
<div class="cart-table__data-value">
01.08 2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--date">
<div class="cart-table__data-label">
Rendilõpp
</div>
<div class="cart-table__data-value">
22.08.2022
</div>
</div>
<div class="cart-table__data-row cart-table__data-row--last">
<div class="cart-table__data-label">
Vastuvõtupunkt
</div>
<div class="cart-table__data-value">
Laki 12B, Tartu
</div>
</div>
<div class="cart-table__modify-buttons">
<a href="#" class="cart-table__change-button">Muuda</a>
<a href="#" class="cart-table__delete-button">
<span class="cart-table__delete-text">
Eemalda
</span>
<span class="cart-table__delete-icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
</span>
</a>
</div>
</div>
<p class="cart-table__transport-cost-info h-text-right">
Transpordi kulu arvutatakse hiljem
</p>
</div>
</div>
</section>
<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">Tellimust vormistama</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 ostlema</span>
</span>
</a>
</div>
</div>
</section>
</div>
{% include '@page-title' with { data: { title: 'Rendikorv' }, isFullWidth: true } %}
<div class="h-container">
{% set sectionContent %}
{% include '@cart-table' with {
data: data.cartTableSelfPickup
} %}
{% endset %}
{% include '@section' with { class: '', modifier: 'section--cart-table' } %}
{% set sectionContent %}
{% include '@cart-table' with {
data: data.cartTableWithTransport
} %}
{% endset %}
{% include '@section' with { class: '', modifier: 'section--cart-table' } %}
{% 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: 'Tellimust vormistama'
},
modifier: '',
class: ''
} %}
</div>
<div class="grid__col grid__col--min">
{% include '@button' with {
data: {
link: "#",
text: 'Tagasi ostlema'
},
modifier: 'button--text',
class: ''
} %}
</div>
</div>
{% endset %}
{% include '@section' with { class: '', modifier: 'section--checkout-buttons' } %}
</div>
{
"language": "en-US",
"data": {
"cartTableSelfPickup": {
"displayModifyButtons": true,
"heading": "Tulen ise järele",
"subHeading": "Järgnevatele toodetele oled valinud ise järele tuleku",
"products": [
{
"image": {
"srcset": "https://via.placeholder.com/300X350",
"sources": null
},
"title": "Akukäärtõstuk 2.5M MANUAALNE",
"price": "16€/päev",
"amount": "2tk",
"rentalStart": "01.08 2022",
"rentalEnd": "22.08.2022",
"pickupPoint": "Laki 12B, Tartu"
},
{
"image": {
"srcset": "https://via.placeholder.com/300X300",
"sources": null
},
"title": "Akukäärtõstuk 2.5M MANUAALNE",
"price": "16€/päev",
"amount": "2tk",
"rentalStart": "01.08 2022",
"rentalEnd": "22.08.2022",
"pickupPoint": "Laki 12B, Tartu"
}
]
},
"cartTableWithTransport": {
"displayModifyButtons": false,
"heading": "Kohaletoimetamisega",
"subHeading": "Järgnevatele toodetele oled valinud Ramirendi kohaletoimetuse",
"products": [
{
"image": {
"srcset": "https://via.placeholder.com/300X350",
"sources": null
},
"title": "Akukäärtõstuk 2.5M MANUAALNE",
"price": "16€/päev",
"amount": "2tk",
"rentalStart": "01.08 2022",
"rentalEnd": "22.08.2022",
"pickupPoint": "Laki 12B, Tartu"
}
]
}
}
}