Pickup Method

Preview
HTML
View
Context
Assets
Info


        
        
        <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>


        <div class="pickup-method js-pickup-method">
    <div class="pickup-method__method-selection js-pickup-method-selection">
        {% include '@choice-group' with { data: data.transportMethod } %}
    </div>

    <div class="js-pickup-method-fields">
        <div
            class="pickup-method__select"
            data-radio1="true"
        >
            {% include '@select' with { data: data.select } %}
        </div>

        <div
            class="pickup-method__address js-pickup-method-address"
            data-radio2="true"
        >
            {% include '@textfield' with { data: data.address } %}
        </div>

        <div
            class="pickup-method__product-amount"
            data-radio1="true"
            data-radio2="true"
        >
            {% include '@number-input' %}
        </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>
                    {% include '@textfield' with { data: data.rentalStartInput, modifier: '', class: 'js-rental-start' } %}
                    <div class="pickup-method__calendar-label">Algus</div>
                </div>
                <div>
                    {% include '@textfield' with { data: data.rentalEndInput, modifier: '', class: 'js-rental-end' } %}
                    <div class="pickup-method__calendar-label">Lõpp</div>
                </div>
            </div>
        </div>

        <div class="pickup-method__delivery-time js-pickup-method-delivery-time">
            {% include '@time-slot' with { data: data.timeSlots } %}
        </div>
    </div>
</div>


        {
  "language": "en-US",
  "data": {
    "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
      }
    ]
  }
}

File:

Content:


                                .pickup-method__method-selection {
    margin-bottom: 16px;
}

.pickup-method__select,
.pickup-method__address,
.pickup-method__product-amount,
.pickup-method__delivery-time {
    margin-bottom: 16px;
    display: none;

    &.st-show {
        display: block;
    }
}

.pickup-method__rental-period {
    display: none;
    margin-bottom: 16px;

    &.st-show {
        display: flex;
        flex-direction: column;
    }
}

.select__label {
    .pickup-method__select & {
        color: $L-text-black;
        font-size: $font-size-small;
        font-weight: $font-weight-regular;
        letter-spacing: $letter-spacing-50;
        margin-bottom: 8px;
        line-height: $line-height-base;
    }
}

.select__inner {
    .pickup-method__select & {
        padding: 0 40px 0 8px;
    }

    .pickup-method__select .select__container.is-open &,
    .pickup-method__select .select__container.is-focused & {
        border: 1px solid $L-border-medium;
    }
}

.select__icon {
    .pickup-method__select & {
        right: 8px;
    }

    .pickup-method__select .select__container.is-open + & {
        transform: translateY(-50%);
    }
}

.select__dropdown .select__list {
    .pickup-method__select-select-rental-point & {
        max-height: 187px;
    }
}

.pickup-method__select,
.pickup-method__product-amount {
    &.st-show {
        display: block;
    }
}

.textfield__icon {
    .pickup-method & {
        fill: $L-background-strong;
        right: 8px;
    }
}

.textfield__input {
    .pickup-method__address & {
        font-size: 14px;
        min-height: 32px;
    }
}

.pickup-method__delivery-time {
    gap: 6px 8px;
}

.pickup-method__label {
    width: 100%;
    font-size: $font-size-small;
    color: $L-text-black;
    letter-spacing: $letter-spacing-50;
    margin-bottom: 8px;
}

.pickup-method__input-wrap {
    display: flex;

    & div:first-child {
        margin-right: 12px;
    }
}

.pickup-method__calendar-label {
    font-size: $font-size-tiny;
    color: $L-text-hover;
    line-height: $line-height-small;
}

URL: /components/raw/pickup-method/pickup-method.scss
Filesystem Path: src/patterns/components/pickup-method/pickup-method.scss
Size: 2 KB

Content:


                                import './pickup-method.scss';
import datepickerFactory from 'jquery-datepicker';
import datepickerJAFactory from 'jquery-datepicker/i18n/jquery.ui.datepicker-et';

import Component from '../component/component';
import Icon from '../icon/icon';

interface IState {
    show: string;
}

export default class PickupMethod extends Component {
    static initSelector: string = '.js-pickup-method';

    radioInputs: NodeListOf<HTMLInputElement>;
    el: HTMLElement;

    state: IState;

    constructor(target: HTMLElement) {
        super(target);

        this.radioInputs = target.querySelectorAll('.js-pickup-method-selection .radio__input');
        this.el = target;

        this.state = {
            show: 'st-show',
        };

        // For Google Maps Places API
        // new google.maps.places.Autocomplete(this.el.querySelector('.js-pickup-method-address input'));

        if (this.radioInputs) {
            this.init();
        }
    }

    initDatePickers(): void {
        datepickerFactory($);
        datepickerJAFactory($);
        const $inputFrom: JQuery = $('.js-rental-start input');
        const $inputTo: JQuery = $('.js-rental-end input');

        if (!$inputFrom || !$inputTo) {
            return;
        }

        $inputFrom.datepicker({
            gotoCurrent: true,
            showOn: 'both',
            onSelect: () => {
                setTimeout(() => {
                    $inputTo.datepicker('show');
                }, 500);
                $inputTo.datepicker('option', 'showOn', 'both');
                $inputTo.datepicker('option', 'minDate', $inputFrom.val());
                $('.js-rental-end .ui-datepicker-trigger')
                    .addClass('button button--text')
                    .html(Icon.render('calendar', ''));
            },
        });

        $inputTo.datepicker({
            showOn: 'both',
            onSelect: () => {
                this.el.querySelector('.js-pickup-method-delivery-time').classList.add(this.state.show);
            },
        });

        // eslint-disable-next-line
        $.datepicker.regional['et'];

        $('.js-rental-start .ui-datepicker-trigger')
            .addClass('button button--text')
            .html(Icon.render('calendar', ''));

        $('.js-rental-end .ui-datepicker-trigger')
            .addClass('button button--text')
            .html(Icon.render('calendar', ''));
    }

    hideElements(): void {
        this.el.querySelectorAll('.js-pickup-method-fields > div')
            .forEach((child: HTMLElement) => {
                child.classList.remove(this.state.show);
            });
    }

    showElements(input: HTMLInputElement, index: number): void {
        if (input.checked) {
            this.el.querySelectorAll(`[data-radio${index+1}]`)
                .forEach((el: HTMLElement) => {
                    el.classList.add(this.state.show);
                });
        }
    }

    init(): void {

        this.initDatePickers();

        this.radioInputs.forEach((input: HTMLInputElement, index: number) => {
            input.addEventListener('change', () => {
                this.hideElements();
                this.showElements(input, index);
            });
        });
    }
}

URL: /components/raw/pickup-method/pickup-method.ts
Filesystem Path: src/patterns/components/pickup-method/pickup-method.ts
Size: 3.2 KB

Handle: @pickup-method--default
Filesystem Path: src/patterns/components/pickup-method/pickup-method.twig
References (5): @choice-group, @select, @textfield, @number-input, @time-slot
Referenced by (2): @add-to-cart, @modify-product-modal

Pickup Method

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Pickup Method