Modify Product Modal

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="modal  modal--modify-product js-modal " aria-modal="true" role="dialog" id="modify-product-modal" aria-labelledby="modify-product-modal_label" data-close-label="Close">
    <h1 id="modify-product-modal_label" class="h3 modal__title ">
        Oksasaag akutoitel
    </h1>
    <div class="modal__content">
        <div class="modify-product-modal">
            <div class="modify-product-modal__product-info">
                <div class="modify-product-modal__image-container">
                    <figure class="image  modify-product-modal__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://www.ramirent.ee/wp-content/uploads/2022/06/STIHL20MS251_02-1-600x254.jpg" data-sizes="auto" alt="" class="image__img lazyload">

                    </figure>
                </div>
                <div class="modify-product-modal__product-meta">

                    <div class="product-meta js-product-meta">
                        <p class="product-meta__product-description">
                            Lorem ipsum dolor sit amet, consecteur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniamconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamconsectetur
                            adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                        </p>
                        <div class="product-meta__category-wrap">
                            <p>Kategooria: <span class="product-meta__category">Akukäärtõstukid</span></p>
                            <p>Tooterühm: <span class="bold">2633320</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modify-product-modal__pickup-method">
                <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>
            <div class="modify-product-modal__buttons">

                <button type="button" class="button button--text">
                    <span class="button__inner">
                        <span class="button__text">Tühista</span>
                    </span>
                </button>

                <button type="button" class="button">
                    <span class="button__inner">
                        <span class="button__text">Salvesta</span>
                    </span>
                </button>
            </div>
        </div>

    </div>
</div>


        {% set modalContent %}
    <div class="modify-product-modal">
        <div class="modify-product-modal__product-info">
            <div class="modify-product-modal__image-container">
                {% include '@image' with {
                    data: data.image|srcset('280x155'),
                    class: 'modify-product-modal__image',
                    modifier: ''
                } %}
            </div>
            <div class="modify-product-modal__product-meta">
                {% include '@product-meta' %}
            </div>
        </div>
        <div class="modify-product-modal__pickup-method">
            {% include '@pickup-method' with { data: data.pickupMethod } %}
        </div>
        <div class="modify-product-modal__buttons">
            {% include '@button' with {
                data: {
                    text: 'Tühista'
                },
                modifier: 'button--text'
            } %}
            {% include '@button' with {
                data: {
                    text: 'Salvesta'
                }
            } %}
        </div>
    </div>
{% endset %}
{% include '@modal' with {
    data: {
        title: {
            text: 'Oksasaag akutoitel'
        },
        closeLabel: 'Close',
        content: modalContent
    },
    id: 'modify-product-modal',
    focusableElementId: '',
    descriptionId: '',
    class: 'modal--modify-product js-modal',
    headingElement: 'h1'
} %}


        {
  "language": "en-US",
  "data": {
    "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
        }
      ]
    },
    "image": {
      "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/06/STIHL20MS251_02-1-600x254.jpg"
    }
  }
}

File:

Content:


                                .modify-product-modal {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;

    @include bp(lg-min) {
        flex-direction: row;
    }
}

.modify-product-modal__product-info {
    @include bp(lg-min) {
        width: 58%;
    }
}

.modify-product-modal__image-container {
    background: $L-background;
    padding: 16px;
    border-radius: $border-radius-base;
}

img {
    .modify-product-modal__image & {
        width: 100%;
        max-width: 100%;
    }
}

.modify-product-modal__pickup-method {
    @include bp(lg-min) {
        width: 36%;
    }
}

.modify-product-modal__buttons {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.product-meta__product-description {
    .modify-product-modal & {
        max-width: none;
    }
}

URL: /components/raw/modify-product-modal/modify-product-modal.scss
Filesystem Path: src/patterns/modules/modify-product-modal/modify-product-modal.scss
Size: 837 Bytes

Content:
import './modify-product-modal.scss';
URL: /components/raw/modify-product-modal/modify-product-modal.ts
Filesystem Path: src/patterns/modules/modify-product-modal/modify-product-modal.ts
Size: 38 Bytes

Handle: @modify-product-modal--default
Filesystem Path: src/patterns/modules/modify-product-modal/modify-product-modal.twig
References (5): @image, @product-meta, @pickup-method, @button, @modal

Modify Product Modal

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Modify Product Modal