<section class="order-summary" aria-labelledby="summary">
<h2 class="order-summary__title" id="summary">
Summary
</h2>
<div class="order-summary__details">
<h3 class="order-summary__subtitle">
Esimate Shipping and Tax
</h3>
<ul class="order-summary__list">
<li class="order-summary__list-item">
<span class="order-summary__label">
Subtotal
</span>
<span class="order-summary__value">
$159.95
</span>
</li>
<li class="order-summary__list-item">
<span class="order-summary__label">
TAX
</span>
<span class="order-summary__value">
$159.95
</span>
</li>
<li>
<hr class="order-summary__divider">
</li>
<li class="order-summary__list-item order-summary__total">
<h3 class="order-summary__title-total">
Order Total
</h3>
<span class="order-summary__amount text-right">
$159.95
</span>
</li>
</ul>
</div>
<button class="button button--fluid margin-bottom-m" type="button" aria-label="Click to go to checkout">
Proceed to Checkout
</button>
<a class="button button--link order-summary__link" href="#" title="Check Out with Multiple Addresses">
Check Out with Multiple Addresses
</a>
</section>
<section class="order-summary" {{{ attributes }}}>
{{ render '@heading' heading }}
<div class="order-summary__details">
{{ render '@heading' estimate }}
<ul class="order-summary__list">
{{#each items }}
<li class="order-summary__list-item">
<span class="order-summary__label">
{{ label }}
</span>
<span class="order-summary__value">
{{ value }}
</span>
</li>
{{/each}}
<li>
<hr class="order-summary__divider">
</li>
<li class="order-summary__list-item order-summary__total">
{{ render '@heading' total }}
<span class="order-summary__amount text-right">
{{ amount }}
</span>
</li>
</ul>
</div>
{{#if tab }}
<div
class="order-summary__tab active"
data-collapsible="true"
role="tablist"
>
<div
class="order-summary__tab-title"
data-role="title"
role="tab"
aria-selected="true"
aria-expanded="true"
tabindex="0"
>
<span class="order-summary__tab-text">
{{ tab.label }}
</span>
{{ render '@icon' tab.icon }}
</div>
{{#if tab.products }}
<div
class="content order-summary__products"
data-role="content"
role="tabpanel"
aria-hidden="false"
style="display: block;"
>
{{#each tab.products }}
<div class="order-summary__product-item">
{{ render '@image' img}}
<div class="order-summary__product-info">
<div class="order-summary__product-details">
<div class="order-summary__product-name">
{{ label }}
</div>
<div class="order-summary__product-qty">
<span>{{ quantity.label }}</span>:
<span>{{ quantity.value }}</span>
</div>
</div>
<span class="price order-summary__product-price">
{{ price }}
</span>
</div>
</div>
{{/each}}
</div>
{{/if}}
</div>
{{/if }}
{{#if button }}
{{ render '@button' button }}
{{/if}}
{{#if link }}
{{ render '@button--link' link }}
{{/if }}
{{#if displayQuote }}
{{ render '@quote-form' }}
{{/if}}
</section>
{
"heading": {
"tag": "h2",
"attributes": "id=\"summary\"",
"text": "Summary",
"class": "order-summary__title"
},
"attributes": "aria-labelledby=\"summary\"",
"estimate": {
"tag": "h3",
"text": "Esimate Shipping and Tax",
"class": "order-summary__subtitle"
},
"items": [
{
"label": "Subtotal",
"value": "$159.95"
},
{
"label": "TAX",
"value": "$159.95"
}
],
"total": {
"tag": "h3",
"text": "Order Total",
"class": "order-summary__title-total"
},
"amount": "$159.95",
"button": {
"tag": "button",
"class": "button--fluid margin-bottom-m",
"attributes": "type=\"button\" aria-label=\"Click to go to checkout\"",
"text": "Proceed to Checkout"
},
"link": {
"tag": "a",
"class": "button--link order-summary__link",
"attributes": "href=\"#\" title=\"Check Out with Multiple Addresses\"",
"text": "Check Out with Multiple Addresses"
}
}
// Cart Summary
$order-summary__padding : $spacer--semi-medium !default;
$order-summary__background : $gray-lighter !default;
$order-summary__margin : 0 0 $spacer--extra-large !default;
// Title
$order-summary__title-margin : 0 0 $spacer--medium !default;
$order-summary__title-font-family : $font-family-base !default;
$order-summary__title-font-size : $font-size-large !default;
$order-summary__title-font-weight : $font-weight-bold !default;
$order-summary__title-text-transform : none !default;
$order-summary__title-total-margin : 0 !default;
$order-summary__title-total-font-family : $font-family-base !default;
$order-summary__title-total-font-size : $font-size-large !default;
$order-summary__title-total-font-weight : $font-weight-bold !default;
$order-summary__title-total-text-transform : none !default;
// Amount
$order-summary__amount-margin : 0 !default;
$order-summary__amount-font-family : $font-family-base !default;
$order-summary__amount-font-size : $font-size-large !default;
$order-summary__amount-font-weight : $font-weight-bold !default;
$order-summary__amount-text-transform : none !default;
// Subtitle
$order-summary__subtitle-margin : 0 0 $spacer--medium !default;
$order-summary__subtitle-font-family : $font-family-base !default;
$order-summary__subtitle-font-size : $font-size-large !default;
$order-summary__subtitle-font-weight : $font-weight-base !default;
$order-summary__subtitle-text-transform : none !default;
// List
$order-summary__list-margin : 0 !default;
$order-summary__list-padding : $spacer--medium 0 !default;
$order-summary__list-border : $border-base !default;
$order-summary__list-border-width : 0 0 0 0 !default;
$order-summary__list-style : none !default;
$order-summary__list-item-min-height : 48px !default;
$order-summary__label-font-size : $font-size-medium !default;
// Link
$order-summary__link-padding : 0 !default;
$order-summary__link-font-weight : $font-weight-base !default;
// Divider
$order-summary__divider-margin : $spacer--medium 0 !default;
$order-summary__divider-border : $border-base !default;
$order-summary__divider-border-width : 1px 0 0 !default;
// Tab
$order-summary__tab-title-padding : $spacer--small 0 !default;
$order-summary__tab-title-border-top : $border-base !default;
$order-summary__tab-title-border-bottom : $border-base !default;
$order-summary__tab-text-font-weight : $font-weight-medium !default;
$order-summary__tab-icon-width : 14px !default;
$order-summary__tab-icon-height : 14px !default;
$order-summary__tab-icon-trasition : $transition-base !default;
// Products
$order-summary__products-display : block !default;
$order-summary__product-item-padding : $spacer--semi-medium 0 !default;
$order-summary__product-item-border-bottom : $border-base !default;
$order-summary__product-image-height : auto !default;
$order-summary__product-image-width : 64px !default;
$order-summary__product-image-max-width : 64px !default;
$order-summary__product-image-margin-right : $spacer !default;
$order-summary__product-info-width : 100% !default;
$order-summary__product-details-padding-right: $spacer !default;
$order-summary__product-name-font-size : $font-size-base !default;
$order-summary__product-name-font-weight : $font-weight-base !default;
$order-summary__product-qty-color : $gray-dark !default;
$order-summary__product-price-font-size : $font-size-base !default;
$order-summary__product-wrapper-width : 100% !default;
@import 'order-summary-variables';
.order-summary {
padding: $order-summary__padding;
background-color: $order-summary__background;
margin: $order-summary__margin;
&__title {
margin: $order-summary__title-margin;
font-family: $order-summary__title-font-family;
font-size: $order-summary__title-font-size;
font-weight: $order-summary__title-font-weight;
text-transform: $order-summary__title-text-transform;
}
&__title-total {
margin: $order-summary__title-total-margin;
font-family: $order-summary__title-total-font-family;
font-size: $order-summary__title-total-font-size;
font-weight: $order-summary__title-total-font-weight;
text-transform: $order-summary__title-total-text-transform;
}
&__amount {
margin: $order-summary__amount-margin;
font-family: $order-summary__amount-font-family;
font-size: $order-summary__amount-font-size;
font-weight: $order-summary__amount-font-weight;
text-transform: $order-summary__amount-text-transform;
}
&__subtitle {
display: flex;
justify-content: space-between;
align-items: center;
margin: $order-summary__subtitle-margin;
font-family: $order-summary__subtitle-font-family;
font-size: $order-summary__subtitle-font-size;
font-weight: $order-summary__subtitle-font-weight;
text-transform: $order-summary__subtitle-text-transform;
cursor: pointer;
}
&__list {
margin: $order-summary__list-margin;
padding: $order-summary__list-padding;
border: $order-summary__list-border;
border-width: $order-summary__list-border-width;
list-style: $order-summary__list-style;
}
&__list-item {
display: flex;
justify-content: space-between;
align-items: center;
min-height: $order-summary__list-item-min-height;
&--secondary {
justify-content: flex-start;
}
}
&__label,
&__value {
font-size: $order-summary__label-font-size;
}
&__link {
padding: $order-summary__link-padding;
font-weight: $order-summary__link-font-weight;
}
&__divider {
margin: $order-summary__divider-margin;
border: $order-summary__divider-border;
border-width: $order-summary__divider-border-width;
}
&__list-column {
display: flex;
flex-direction: column;
}
.active {
.shipping-estimation__title-icon {
transform: rotate(180deg);
}
}
&__tab {
&.active {
.order-summary__tab-icon {
transform: rotate(180deg);
}
}
}
&__tab-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: $order-summary__tab-title-padding;
border-top: $order-summary__tab-title-border-top;
border-bottom: $order-summary__tab-title-border-bottom !important; // sass-lint:disable-line no-important
cursor: pointer;
}
&__tab-text {
font-weight: $order-summary__tab-text-font-weight;
}
&__tab-icon {
width: $order-summary__tab-icon-width;
height: $order-summary__tab-icon-height;
transition: $order-summary__tab-icon-trasition;
}
&__products {
display: $order-summary__products-display;
.minicart-items {
padding: 0;
}
}
&__product-item {
display: flex;
padding: $order-summary__product-item-padding;
border-bottom: $order-summary__product-item-border-bottom;
}
&__product-image {
height: $order-summary__product-image-height;
width: $order-summary__product-image-width;
max-width: $order-summary__product-image-max-width;
margin-right: $order-summary__product-image-margin-right;
}
&__product-info {
display: flex;
justify-content: space-between;
width: $order-summary__product-info-width;
}
&__product-wrapper {
width: $order-summary__product-wrapper-width;
}
&__product-details {
padding-right: $order-summary__product-details-padding-right;
}
&__product-name {
font-size: $order-summary__product-name-font-size;
font-weight: $order-summary__product-name-font-weight;
}
&__product-qty {
color: $order-summary__product-qty-color;
}
&__product-price {
font-size: $order-summary__product-price-font-size;
}
}
There are no notes for this item.