<div class="store-pickup ">
    <div class="store-pickup__tabs">
        <button class="store-pickup__tab" type="button">
            Shipping
        </button>
        <button class="store-pickup__tab store-pickup__tab--active" type="button">
            Pick in store
        </button>
    </div>
    <div>
        <span class="heading heading--second-level store-pickup__heading">
            Store
        </span>

        <div class="store-pickup__section">
            <div class="paragraph store-pickup__paragraph">
                <p>
                    We could not preselect pickup location based on available information, please select it manually.
                </p>
            </div>

        </div>
        <div class="store-pickup__actions">
            <button class="button modal-trigger" data-modal-trigger="store-pickup-modal" type="button" aria-expanded="false">
                Select store
            </button>

            <div role="dialog" aria-hidden="true" id="store-pickup-modal" data-modal="store-pickup-modal" class="modal " aria-labelledby="myTitle" aria-describedby="myDesc">
                <div role="document" class="modal__container " tabindex="0">
                    <div class="modal__content ">
                        <div class="modal__top ">
                            <h2 class="modal__heading heading--second-level" id="modal-info-1-title">
                                Select Store
                            </h2>

                        </div>

                        <div class="modal__middle ">

                            <div class="store-pickup-modal">
                                <div class="store-pickup-modal__search">
                                    <div class="input store-pickup-modal__search-field">
                                        <label class="
            label
            input__label
            
        " for="search">
                                            Search
                                        </label>
                                        <input class="input__field " id="search" name="search" type="text" placeholder="Search with postcode or city name...">
                                    </div>

                                    <button class="button store-pickup-modal__search-button" type="submit">
                                        Search
                                    </button>

                                </div>
                                <div class="paragraph store-pickup-modal__paragraph">
                                    <p>
                                        Please provide postcode or city name to find nearest pickup locations.
                                    </p>
                                </div>

                                <table class="table store-pickup-modal__table margin-0" tabindex="0" role="table">
                                    <caption class="table__caption">
                                        This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
                                    </caption>
                                    <thead>
                                        <tr role="row">
                                            <th class="" scope="col" role="columnheader">
                                                Location Details
                                            </th>
                                            <th class="" scope="col" role="columnheader">
                                                Action
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr role="row">
                                            <td class="" data-th="Location Details" role="gridcell">
                                                <div class="paragraph ">
                                                    <p>
                                                        Good Wood Store<br>119 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href="tel:970-355-8188">970-355-8188</a>
                                                    </p>
                                                </div>

                                            </td>
                                            <td class="" data-th="Action" role="gridcell">
                                                <button type="button" class="button">Ship Here</button>
                                            </td>
                                        </tr>
                                        <tr role="row">
                                            <td class="" data-th="Location Details" role="gridcell">
                                                <div class="paragraph ">
                                                    <p>
                                                        Good Wood Store 2<br>120 Timberbrook Lane<br>Denver, Colorado 80216<br>United States<br><a href="tel:970-355-8188">970-355-8188</a>
                                                    </p>
                                                </div>

                                            </td>
                                            <td class="" data-th="Action" role="gridcell">
                                                <button type="button" class="button">Ship Here</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>

                        </div>

                    </div>

                    <button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
                        <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                            <title>Close</title>
                            <use href="/images/icons-sprite.svg#close"></use>
                        </svg>

                    </button>

                </div>
            </div>
            <script type="text/javascript">
                new Modal(document.querySelector('[data-modal-trigger="store-pickup-modal"]'));
            </script>

            <button class="button " type="button" disabled>
                Next
            </button>

        </div>
    </div>
</div>
<div class="store-pickup {{ class }}">
    <div class="store-pickup__tabs">
        <button
            class="store-pickup__tab"
            type="button"
        >
            {{ tabShippingButtonText }}
        </button>
        <button
            class="store-pickup__tab store-pickup__tab--active"
            type="button"
        >
            {{ tabPickInStoreButtonText }}
        </button>
    </div>
    <div>
        {{ render '@heading' title }}
        {{#if noSelection }}
            <div class="store-pickup__section">
                {{ render '@paragraph' noSelection }}
            </div>
        {{/if }}
        {{#if selectedStore }}
            <div class="store-pickup__section">
                {{ render '@paragraph' selectedStore.name }}
                {{ render '@paragraph' selectedStore.address }}
                {{ render '@paragraph' selectedStore.description }}
            </div>
        {{/if }}
        <div class="store-pickup__actions">
            {{ render '@modal' selectStoreModal }}
            {{ render '@button' nextButton }}
        </div>
    </div>
</div>
{
  "tabShippingButtonText": "Shipping",
  "tabPickInStoreButtonText": "Pick in store",
  "title": {
    "tag": "span",
    "class": "heading heading--second-level store-pickup__heading",
    "text": "Store"
  },
  "selectedStore": false,
  "selectStoreModal": {
    "trigger": true,
    "modalTrigger": {
      "buttonModalTrigger": {
        "tag": "button",
        "class": "modal-trigger",
        "text": "Select store",
        "attributes": "data-modal-trigger=\"store-pickup-modal\" type=\"button\" aria-expanded=\"false\""
      }
    },
    "modal": {
      "class": "",
      "id": "store-pickup-modal",
      "attributes": "aria-labelledby=\"myTitle\" aria-describedby=\"myDesc\""
    },
    "buttonClose": {
      "tag": "button",
      "text": "",
      "class": "button--rotate-icon modal__close-button",
      "icon": {
        "id": "close",
        "class": "button__icon modal__close-button-icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"click to close the modal\""
    },
    "modalTop": true,
    "heading": {
      "tag": "h2",
      "class": "heading--second-level",
      "attributes": "id=\"modal-info-1-title\"",
      "text": "Select Store"
    },
    "modalMiddle": true,
    "modalComponent": {
      "content": "store-pickup-modal",
      "contentContext": ""
    }
  },
  "nextButton": {
    "tag": "button",
    "class": "",
    "text": "Next",
    "attributes": "type=\"button\" disabled"
  },
  "noSelection": {
    "tag": "p",
    "class": "store-pickup__paragraph",
    "text": "We could not preselect pickup location based on available information, please select it manually."
  }
}
  • Content:
    $store-pickup__tabs-margin-bottom        : $spacer--medium !default;
    $store-pickup__tab-max-width             : 100% !default;
    $store-pickup__heading-padding           : $spacer 0 !default;
    $store-pickup__section-margin-bottom     : $spacer--medium !default;
    $store-pickup__paragraph-margin-bottom   : $spacer !default;
    $store-pickup__actions-width             : 100% !default;
    $store-pickup__actions-justify-content   : space-between !default;
    $store-pickup__action-select-margin-right: $spacer !default;
    
  • URL: /components/raw/store-pickup/_store-pickup-variables.scss
  • Filesystem Path: build/components/Organisms/checkout/store-pickup/_store-pickup-variables.scss
  • Size: 506 Bytes
  • Content:
    @import 'store-pickup-variables';
    
    .store-pickup {
        ~ .checkout-shipping-address,
        ~ .checkout-shipping-method {
            @include visually-hidden;
        }
    
        &__tabs {
            display: flex;
            flex-wrap: nowrap;
            margin-bottom: $store-pickup__tabs-margin-bottom;
        }
    
        &__tab {
            @extend .tab__title;
            max-width: $store-pickup__tab-max-width;
    
            &--active {
                @extend .tab__title--active;
            }
        }
    
        &__heading {
            padding: $store-pickup__heading-padding;
        }
    
        &__section {
            margin-bottom: $store-pickup__section-margin-bottom;
        }
    
        &__paragraph {
            margin-bottom: $store-pickup__paragraph-margin-bottom;
        }
    
        &__actions {
            width: $store-pickup__actions-width;
            display: flex;
            justify-content: $store-pickup__actions-justify-content;
        }
    
        &__action-select {
            margin-right: $store-pickup__action-select-margin-right;
        }
    
        &__modal-content {
            display: none;
    
            .modal-content & {
                display: block;
            }
        }
    }
    
  • URL: /components/raw/store-pickup/_store-pickup.scss
  • Filesystem Path: build/components/Organisms/checkout/store-pickup/_store-pickup.scss
  • Size: 1.1 KB

No notes defined.