<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>
Good Wood Store
</p>
</div>
<div class="paragraph store-pickup__paragraph">
<p>
119 Timberbrook Lane <br> Denver, Colorado 80216 <br> United States <br> 970-355-8188
</p>
</div>
<div class="paragraph store-pickup__paragraph">
<p>
The store is located next to the church.
</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">
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": {
"name": {
"tag": "p",
"class": "store-pickup__paragraph",
"text": "Good Wood Store"
},
"address": {
"tag": "p",
"class": "store-pickup__paragraph",
"text": "119 Timberbrook Lane <br> Denver, Colorado 80216 <br> United States <br> 970-355-8188"
},
"description": {
"tag": "p",
"class": "store-pickup__paragraph",
"text": "The store is located next to the church."
}
},
"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\""
}
}
$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;
@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;
}
}
}
No notes defined.