<aside role="dialog" class="
modal-custom
opc-sidebar
opc-summary-wrapper
custom-slide
sidebar-checkout
" aria-describedby="modal-content-" data-role="modal" data-type="custom" tabindex="0">
<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>
<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">
1 Item in Cart
</span>
<svg class="icon order-summary__tab-icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</div>
<div class="content order-summary__products" data-role="content" role="tabpanel" aria-hidden="false" style="display: block;">
<div class="order-summary__product-item">
<div class="lazyload-wrapper order-summary__product-image">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width="78" height="78">
</div>
<div class="order-summary__product-info">
<div class="order-summary__product-details">
<div class="order-summary__product-name">
Simple product oh this is such a loooong name 1
</div>
<div class="order-summary__product-qty">
<span>Quantity</span>:
<span>1</span>
</div>
</div>
<span class="price order-summary__product-price">
$100
</span>
</div>
</div>
<div class="order-summary__product-item">
<div class="lazyload-wrapper order-summary__product-image">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1" width="78" height="78">
</div>
<div class="order-summary__product-info">
<div class="order-summary__product-details">
<div class="order-summary__product-name">
Simple product oh this is such a loooong name 1
</div>
<div class="order-summary__product-qty">
<span>Quantity</span>:
<span>3</span>
</div>
</div>
<span class="price order-summary__product-price">
$100000
</span>
</div>
</div>
</div>
</div>
</section>
<div class="shipping-information">
<div class="ship-to">
<div class="shipping-information__title">
<span class="shipping-information__title-text">
Ship To:
</span>
<button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
<svg class="icon button__icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</button>
</div>
<div class="shipping-information__content">
John Doe<br>
ul. Mostowa 11<br>
Poznań, <span>Armed Forces Africa</span> 60-688<br>
United States<br>
<a href="tel:887887887">887887887</a><br>
</div>
</div>
<div>
<div class="shipping-information__title">
<span class="shipping-information__title-text">
Shipping Method:
</span>
<button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
<svg class="icon button__icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</button>
</div>
<div class="shipping-information__content">
<span class="value">
Free Shipping - Free
</span>
</div>
</div>
</div>
</aside>
<aside
role="dialog"
class="
modal-custom
opc-sidebar
opc-summary-wrapper
custom-slide
sidebar-checkout
"
aria-describedby="modal-content-"
data-role="modal"
data-type="custom"
tabindex="0"
>
{{ render '@order-summary--checkout' }}
{{ render '@shipping-information' }}
</aside>
/* No context defined for this component. */
$sidebar-checkout__modal-content-padding : 0 !default;
$sidebar-checkout__modal-content-padding\@small: $spacer--medium !default;
$sidebar-checkout__modal-content-padding\@large: $spacer--extra-large !default;
$order-summary__background : $white !default;
.sidebar-checkout {
display: block;
position: static;
.modal-content {
padding: 0;
}
}
body._has-modal-custom {
.sidebar-checkout .modal-content {
padding: $sidebar-checkout__modal-content-padding;
@include mq($screen-s) {
padding: $sidebar-checkout__modal-content-padding\@small;
}
@include mq($screen-l) {
padding: $sidebar-checkout__modal-content-padding\@large;
}
}
.order-summary {
background: $order-summary__background;
}
}
There are no notes for this item.