<div class="sidebar-block">
<div class="sidebar-block__heading">
<h2 class="heading--first-level sidebar-block__title">
Recently Ordered
</h2>
</div>
<div class="divider sidebar-block__divider"></div>
<ol class="list sidebar-block__list">
<li>
<div class="sidebar-block__item">
<a class="link sidebar-block__link" href="#">
Chaz Kangeroo Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-1" name="order-items" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="reorder-item-1" class="checkbox__label ">
Add to Cart
</label>
</div>
</li>
<li>
<div class="sidebar-block__item">
<a class="link sidebar-block__link" href="#">
Bruno Compete Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-2" name="order-items" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="reorder-item-2" class="checkbox__label ">
Add to Cart
</label>
</div>
</li>
<li>
<div class="sidebar-block__item">
<a class="link sidebar-block__link" href="#">
Hero Hoodie
</a>
</div>
<div class="checkbox sidebar-block__checkbox">
<input type="checkbox" id="reorder-item-3" name="order-items" class="checkbox__field ">
<svg class="checkbox__icon ">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<label for="reorder-item-3" class="checkbox__label ">
Add to Cart
</label>
</div>
</li>
</ol>
<div>
<button class="button sidebar-block__action" type="button">
Add to Cart
</button>
<a class="button button--link sidebar-block__action" href="#">
View All
</a>
</div>
</div>
<div class="sidebar-block">
<div class="sidebar-block__heading">
{{ render '@heading' title }}
</div>
{{ render '@divider' divider }}
<ol class="list sidebar-block__list">
{{#each product}}
<li>
<div class="sidebar-block__item">
<a class="link sidebar-block__link" href="#">
{{ name }}
</a>
</div>
{{ render '@checkbox' checkbox }}
</li>
{{/each}}
</ol>
<div>
{{ render '@button' addToCart }}
{{ render '@button--link' viewAll }}
</div>
</div>
{
"title": {
"tag": "h2",
"class": "heading--first-level sidebar-block__title",
"text": "Recently Ordered"
},
"qty": "3 items",
"divider": {
"class": "sidebar-block__divider"
},
"product": [
{
"name": "Chaz Kangeroo Hoodie",
"checkbox": {
"id": "reorder-item-1",
"class": "sidebar-block__checkbox",
"name": "order-items",
"label": {
"text": "Add to Cart"
}
}
},
{
"name": "Bruno Compete Hoodie",
"checkbox": {
"id": "reorder-item-2",
"class": "sidebar-block__checkbox",
"name": "order-items",
"label": {
"text": "Add to Cart"
}
}
},
{
"name": "Hero Hoodie",
"checkbox": {
"id": "reorder-item-3",
"class": "sidebar-block__checkbox",
"name": "order-items",
"label": {
"text": "Add to Cart"
}
}
}
],
"compareLink": false,
"clearLink": false,
"addToCart": {
"tag": "button",
"class": "sidebar-block__action",
"attributes": "type=\"button\"",
"text": "Add to Cart"
},
"viewAll": {
"tag": "a",
"class": "button--link sidebar-block__action",
"attributes": "href=\"#\"",
"text": "View All"
}
}
$sidebar-block__padding : 0 0 $spacer--large !default;
$sidebar-block__min-height : 150px !default;
$sidebar-block__min-height--loaded : auto !default;
$sidebar-block__heading-margin-bottom : $spacer--medium !default;
$sidebar-block__title-font-weight : $font-weight-normal !default;
$sidebar-block__title-margin-bottom : 0 !default;
$sidebar-block__divider-margin-bottom : $spacer--medium !default;
$sidebar-block__list-margin-bottom : $spacer !default;
$sidebar-block__item-margin-bottom : $spacer !default;
$sidebar-block__index-margin : 0 $spacer !default;
$sidebar-block__index-font-weight : $font-weight-bold !default;
$sidebar-block__index-min-width : $spacer--medium !default;
$sidebar-block__remove-padding : $spacer--medium !default;
$sidebar-block__remove-margin-right : $spacer !default;
$sidebar-block__remove-background : transparent !default;
$sidebar-block__remove-icon-padding : 0 !default;
$sidebar-block__remove-icon-transition : $transition-base !default;
$sidebar-block__icon-fill : $red !default;
$sidebar-block__icon-fill--active : $green !default;
$sidebar-block__icon-size : 16px !default;
$sidebar-block__action-margin-left : $spacer !default;
$sidebar-block__wishlist-item-margin-bottom: $spacer--large !default;
$sidebar-block__product-image-max-width : 72px !default;
$sidebar-block__product-info-margin-left : $spacer--medium !default;
$sidebar-block__checkbox-margin : $spacer $spacer $spacer--medium !default;
$sidebar-block__price-margin : 0 !default;
$sidebar-block__price-font-weight : $font-weight-bold !default;
$sidebar-block__message-margin : 0 !default;
.sidebar-block {
position: relative;
padding: $sidebar-block__padding;
min-height: $sidebar-block__min-height;
&--hidden {
display: none;
}
&--loaded {
min-height: $sidebar-block__min-height--loaded;
}
&__heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $sidebar-block__heading-margin-bottom;
}
&__title {
font-weight: $sidebar-block__title-font-weight;
margin-bottom: $sidebar-block__title-margin-bottom;
}
&__divider {
margin-bottom: $sidebar-block__divider-margin-bottom;
}
&__list {
margin-bottom: $sidebar-block__list-margin-bottom;
counter-reset: sidebarIndex;
&--hidden {
display: none;
}
}
&__item {
display: flex;
align-items: center;
&:before {
content: counter(sidebarIndex) ".";
counter-increment: sidebarIndex;
margin: $sidebar-block__index-margin;
min-width: $sidebar-block__index-min-width;
font-weight: $sidebar-block__index-font-weight;
}
&--wishlist {
margin-bottom: $sidebar-block__item-margin-bottom;
}
}
&__remove {
padding: $sidebar-block__remove-padding;
margin-right: $sidebar-block__remove-margin-right;
background-color: $sidebar-block__remove-background;
&:hover,
&:focus {
background-color: $sidebar-block__remove-background;
.sidebar-block__remove-icon {
fill: $sidebar-block__icon-fill--active;
}
}
}
&__remove-icon {
padding: $sidebar-block__remove-icon-padding;
width: $sidebar-block__icon-size;
height: $sidebar-block__icon-size;
transition: $sidebar-block__remove-icon-transition;
fill: $sidebar-block__icon-fill;
}
&__action {
&:not(:first-child) {
margin-left: $sidebar-block__action-margin-left;
}
}
&__wishlist-item {
margin-bottom: $sidebar-block__wishlist-item-margin-bottom;
}
&__product-image {
width: $sidebar-block__product-image-max-width;
}
&__product-info {
margin-left: $sidebar-block__product-info-margin-left;
}
&__checkbox {
margin: $sidebar-block__checkbox-margin;
}
&__hidden {
display: none;
}
&__message {
margin: $sidebar-block__message-margin;
}
.price-as-configured {
margin: $sidebar-block__price-margin;
font-weight: $sidebar-block__price-font-weight;
}
}
There are no notes for this item.