<div class="add-to-cart js-add-to-cart">
<div class="add-to-cart__header">
<p class="text-inverted">Lisa toode rendikorvi</p>
</div>
<div class="add-to-cart__content">
<form action="/">
<div class="pickup-method js-pickup-method">
<div class="pickup-method__method-selection js-pickup-method-selection">
<fieldset class="choice-group
">
<legend class="choice-group__label h-visually-hidden"></legend>
<div class="choice-group__inner">
<div class="radio
radio--blue choice-group__item">
<input type="radio" id="self-pickup" name="radio" value="" class="radio__input">
<label for="self-pickup" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Tulen ise järele</span>
</label>
</div>
<div class="radio
radio--blue choice-group__item">
<input type="radio" id="require-transport" name="radio" value="" class="radio__input">
<label for="require-transport" class="radio__label">
<span class="radio__indicator"></span>
<span class="radio__text">Soovin transporti</span>
</label>
</div>
</div>
</fieldset>
</div>
<div class="js-pickup-method-fields">
<div class="pickup-method__select" data-radio1="true">
<div class="textfield select ">
<label class="textfield__label select__label " for="rental-point">
Rentimispunkt
</label>
<div class="textfield__inner">
<select name="rentalPoint" id="rental-point" class="textfield__input select__input">
<option value="placeholder" disabled selected>
Vali nimekirjast
</option>
<option value="1">
Tallinn, Laki
</option>
<option value="2">
Tallinn, Peterburi tee
</option>
<option value="3">
Tallinn, Peterburi tee
</option>
<option value="4">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
<option value="5">
Tallinn, Peterburi tee
</option>
</select>
<svg class="icon select__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#"></use>
</svg>
</div>
</div>
</div>
<div class="pickup-method__address js-pickup-method-address" data-radio2="true">
<div class="textfield textfield--icon-right">
<label class="textfield__label " for="address">
Sinu aadress
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="address" name="address" placeholder="Sisesta aadress">
<svg class="icon textfield__icon" focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#map"></use>
</svg>
</div>
</div>
</div>
<div class="pickup-method__product-amount" data-radio1="true" data-radio2="true">
<div class="number-input js-number-input">
<label class="number-input__label" for="product-amount">Renditava toote arv</label>
<button class="number-input__change number-input__change--disabled js-number-input-decrease" type="button" aria-label="Vähenda kogust">
<span class="number-input__sign number-input__sign--horizontal"></span>
</button>
<input id="product-amount" class="number-input__input js-number-input-field" type="number" value="1" max="99" min="1" step="1" inputmode="numeric">
<button class="number-input__change js-number-input-increase" type="button" aria-label="Suurenda kogust">
<span class="number-input__sign number-input__sign--vertical"></span>
<span class="number-input__sign number-input__sign--horizontal"></span>
</button>
</div>
</div>
<div class="pickup-method__rental-period" data-radio1="true" data-radio2="true">
<p class="pickup-method__label">
Rentimisperiood
</p>
<div class="pickup-method__input-wrap">
<div>
<div class="textfield js-rental-start">
<label class="textfield__label h-visually-hidden" for="rental-start">
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="rental-start" name="textfield" placeholder="Vali" readonly>
</div>
</div>
<div class="pickup-method__calendar-label">Algus</div>
</div>
<div>
<div class="textfield js-rental-end">
<label class="textfield__label h-visually-hidden" for="rental-end">
</label>
<div class="textfield__inner">
<input class="textfield__input" type="text" id="rental-end" name="textfield" placeholder="Vali" readonly>
</div>
</div>
<div class="pickup-method__calendar-label">Lõpp</div>
</div>
</div>
</div>
<div class="pickup-method__delivery-time js-pickup-method-delivery-time">
<div class="time-slot js-time-slot">
<fieldset>
<legend class="h-visually-hidden">Kohaletoimetamise aeg</legend>
<div class="time-slot__items">
<input type="radio" id="pickup-time--1" class="radio__input">
<label class="time-slot__label js-time-slot-label" for="pickup-time--1">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--2" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--active" for="pickup-time--2">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--3" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--disabled" for="pickup-time--3">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
<input type="radio" id="pickup-time--4" class="radio__input">
<label class="time-slot__label js-time-slot-label time-slot__label--disabled" for="pickup-time--4">
<span class="time-slot__icon">
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
</span>
<span>8:00</span> - <span>10:00</span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<button type="submit" class="button button--block js-add-to-cart-button" disabled>
<span class="button__inner">
<span class="button__text">Lisa rendikorvi</span>
</span>
</button>
</form>
</div>
</div>
<div class="add-to-cart js-add-to-cart">
<div class="add-to-cart__header">
<p class="text-inverted">Lisa toode rendikorvi</p>
</div>
<div class="add-to-cart__content">
<form action="{{ data.action|default('/') }}">
{% if data.pickupMethod %}
{% include '@pickup-method' with { data: data.pickupMethod } %}
{% endif %}
{% if data.button %}
{% include '@button' with { class: 'js-add-to-cart-button', modifier: 'button--block', data: data.button, type: 'submit' } %}
{% endif %}
</form>
</div>
</div>
{
"language": "en-US",
"data": {
"button": {
"text": "Lisa rendikorvi",
"attributes": "disabled"
},
"pickupMethod": {
"rentalStartInput": {
"id": "rental-start",
"name": "textfield",
"placeholder": "Vali",
"icon": null,
"iconPosition": "right",
"isLabelHidden": true,
"attributes": "readonly"
},
"rentalEndInput": {
"id": "rental-end",
"name": "textfield",
"placeholder": "Vali",
"icon": null,
"iconPosition": "right",
"isLabelHidden": true,
"attributes": "readonly"
},
"transportMethod": {
"type": "radio",
"isLabelHidden": true,
"choices": [
{
"id": "self-pickup",
"label": "Tulen ise järele",
"name": "radio",
"modifier": "radio--blue"
},
{
"id": "require-transport",
"label": "Soovin transporti",
"name": "radio",
"modifier": "radio--blue"
}
]
},
"select": {
"label": "Rentimispunkt",
"id": "rental-point",
"name": "rentalPoint",
"placeholder": "Vali nimekirjast",
"options": [
{
"name": "Tallinn, Laki",
"value": "1"
},
{
"name": "Tallinn, Peterburi tee",
"value": "2",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "3",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "4",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
},
{
"name": "Tallinn, Peterburi tee",
"value": "5",
"span": "(1.5km)"
}
]
},
"address": {
"label": "Sinu aadress",
"id": "address",
"name": "address",
"placeholder": "Sisesta aadress",
"icon": "map"
},
"timeSlots": [
{
"start": "8:00",
"end": "10:00"
},
{
"start": "8:00",
"end": "10:00",
"active": true
},
{
"start": "8:00",
"end": "10:00",
"disabled": true
},
{
"start": "8:00",
"end": "10:00",
"disabled": true
}
]
}
}
}
.add-to-cart {
border-radius: $border-radius-base;
background: $L-background-light;
margin-top: 24px;
}
.add-to-cart__header {
height: 48px;
background: $L-background-strong;
display: flex;
justify-content: center;
align-items: center;
border-radius: $border-radius-base $border-radius-base 0 0;
}
.add-to-cart__content {
padding: 16px;
box-shadow: $elevation-02;
border-radius: 0 0 $border-radius-base $border-radius-base;
display: flex;
flex-direction: column;
}
import './add-to-cart.scss';
import Component from '../component/component';
export default class AddToCart extends Component {
static initSelector: string = '.js-add-to-cart';
addToCartButton: HTMLButtonElement;
pickupMethod: HTMLElement;
constructor(target: HTMLElement) {
super(target);
this.addToCartButton = target.querySelector('.js-add-to-cart-button');
this.pickupMethod = target.querySelector('.js-pickup-method-selection');
if (this.addToCartButton && this.pickupMethod) {
this.init();
}
}
init(): void {
this.pickupMethod.querySelectorAll('.radio__input').forEach((el: HTMLInputElement) => {
el.addEventListener('change', () => {
if (el.checked) {
this.addToCartButton.removeAttribute('disabled');
}
});
});
}
}