<section class="cart-list-item " aria-label="product in your shopping cart">
<div class="cart-list-item__left">
<picture class="image cart-list-item__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-64x96.jpg" media="(max-width: 480px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-80x120.jpg" media="(max-width: 768px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-128x192.jpg" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/cart-view/product-64x96.jpg" alt="Image of product Bluzka 'ONLSANSA SINGLET WVN'"
/>
</picture>
<div class="cart-list-item__content">
<h4 class="cart-list-item__name">
Bluzka 'ONLSANSA SINGLET WVN'
</h4>
<div class="cart-list-item__attributes margin-bottom-xs">
<span class="cart-list-item__attribute">
Size: XXL
</span>
<span class="cart-list-item__attribute">
Color: Red
</span>
</div>
</div>
</div>
<div class="cart-list-item__right">
<div class="cart-list-item__details">
<div class="cart-list-item__wrapper">
<span class="cart-list-item__label margin-right-xs">
Price:
</span>
<span class="cart-list-item__price">
$159.95
</span>
</div>
<div class="input input--inline cart-list-item__qty">
<label class="
label
input__label
cart-list-item__label
" for="qty3">
Qty
</label>
<input class="input__field cart-list-item__input text-center" id="qty3" name="qty" type="number" placeholder="" value="1">
</div>
<div class="cart-list-item__wrapper">
<span class="cart-list-item__label margin-right-xs">
Subtotal:
</span>
<span class="cart-list-item__total">
$159.95
</span>
</div>
</div>
<div class="cart-list-item__actions">
<button class="button button--icon button button--icon cart-list-item__action" type="button" aria-label="Clickt to edit this product">
<svg
class="icon button__icon cart-list-item__action-icon"
role="presentation"
focusable="false"
>
<title>Edit product</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</button>
<button class="button button--icon button button--icon cart-list-item__action" type="button" aria-label="Click to remove this product">
<svg
class="icon button__icon cart-list-item__action-icon"
role="presentation"
focusable="false"
>
<title>Remove product</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
<div id="gift-options-dropdown" class="dropdown-list dropdown-list--detailed-content cart-list-item__gift-dropdown">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " type="button" aria-expanded="false" aria-controls="dropdown-detailed-content-1">
Gift options
<svg
class="icon dropdown-list__icon"
aria-hidden="true"
role="img"
>
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-detailed-content-1" class="dropdown-list__content " aria-hidden="true">
<div class="paragraph ">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</p>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('gift-options-dropdown'));
</script>
</div>
</div>
</section>
<section class="cart-list-item {{ class }}" {{{ attributes }}}>
<div class="cart-list-item__left">
{{ render '@image--picture' image }}
<div class="cart-list-item__content">
{{ render '@heading' productName }}
<div class="cart-list-item__attributes {{ productAttributes.class }}">
{{#each productAttributes.items }}
<span class="cart-list-item__attribute">
{{ this }}
</span>
{{/each}}
</div>
</div>
</div>
<div class="cart-list-item__right">
<div class="cart-list-item__details">
<div class="cart-list-item__wrapper">
<span class="cart-list-item__label {{ price.labelClass }}">
{{ price.label }}
</span>
<span class="cart-list-item__price">
{{ price.amount }}
</span>
</div>
{{ render '@input' qty }}
<div class="cart-list-item__wrapper">
<span class="cart-list-item__label {{ total.labelClass }}">
{{ total.label }}
</span>
<span class="cart-list-item__total">
{{ total.amount }}
</span>
</div>
</div>
<div class="cart-list-item__actions">
{{ render '@button--icon' edit }}
{{ render '@button--icon' delete }}
{{ render '@dropdown-list' giftOptionsDropwdown }}
</div>
</div>
</section>
{
"attributes": "aria-label=\"product in your shopping cart\"",
"image": {
"class": "cart-list-item__image",
"defaultSrc": "/images/cart-view/product-64x96.jpg",
"sources": [
{
"src": "/images/cart-view/product-64x96.jpg",
"mediaQuery": "(max-width: 480px)"
},
{
"src": "/images/cart-view/product-80x120.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/cart-view/product-128x192.jpg",
"mediaQuery": ""
}
],
"alt": "Image of product Bluzka 'ONLSANSA SINGLET WVN'"
},
"productName": {
"tag": "h4",
"text": "Bluzka 'ONLSANSA SINGLET WVN'",
"class": "cart-list-item__name"
},
"productAttributes": {
"class": "margin-bottom-xs",
"items": [
"Size: XXL",
"Color: Red"
]
},
"price": {
"labelClass": "margin-right-xs",
"label": "Price:",
"amount": "$159.95"
},
"qty": {
"class": "input--inline cart-list-item__qty",
"label": {
"class": "cart-list-item__label",
"attributes": "",
"text": "Qty",
"hidden": false
},
"field": {
"class": "cart-list-item__input text-center",
"id": "qty",
"name": "qty",
"type": "number",
"attributes": "value=\"1\""
}
},
"total": {
"labelClass": "margin-right-xs",
"label": "Subtotal:",
"amount": "$159.95"
},
"edit": {
"tag": "button",
"class": "button button--icon cart-list-item__action",
"icon": {
"id": "edit",
"title": "Edit product",
"class": "button__icon cart-list-item__action-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Clickt to edit this product\""
},
"delete": {
"tag": "button",
"class": "button button--icon cart-list-item__action",
"icon": {
"id": "remove",
"title": "Remove product",
"class": "button__icon cart-list-item__action-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Click to remove this product\""
},
"giftOptionsDropwdown": {
"id": "gift-options-dropdown",
"class": "dropdown-list--detailed-content cart-list-item__gift-dropdown",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "type=\"button\" aria-expanded=\"false\"",
"title": "Gift options",
"id": "dropdown-detailed-content-1",
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "paragraph"
}
]
}
}
$cart-list-item__padding : $spacer--semi-medium 0 !default;
$cart-list-item__border-bottom : $border-base !default;
$cart-list-item__right-margin : 0 0 0 64px !default;
$cart-list-item__right-padding : 0 0 0 $spacer--medium !default;
$cart-list-item__right-margin\@medium : 0 !default;
$cart-list-item__right-padding\@medium : 0 !default;
$cart-list-item__image-width : 64px !default;
$cart-list-item__image-width\@medium : 80px !default;
$cart-list-item__image-width\@x-large : 128px !default;
$cart-list-item__content-padding : 0 0 0 $spacer--medium !default;
$cart-list-item__content-padding\@x-large : 0 0 0 $spacer--large !default;
$cart-list-item__content-flex-basis : calc(100% - 64px) !default;
$cart-list-item__content-flex-basis\@medium : calc(100% - 80px) !default;
$cart-list-item__content-flex-basis\@x-large : calc(100% - 128px) !default;
$cart-list-item__name-font-family : $font-family-base !default;
$cart-list-item__name-font-size : $font-size-medium !default;
$cart-list-item__name-font-weight : $font-weight-base !default;
$cart-list-item__name-line-height : 24px !default;
$cart-list-item__name-text-transform : none !default;
$cart-list-item__attribute-color : $color-secondary !default;
$cart-list-item__label-color : $font-color-base !default;
$cart-list-item__label-line-height : 48px !default;
$cart-list-item__price-font-size\@medium : $font-size-medium !default;
$cart-list-item__qty-margin : 0 !default;
$cart-list-item__qty-padding\@x-large : 0 $spacer--medium 0 0 !default;
$cart-list-item__input-width : 90px !default;
$cart-list-item__input-height : 48px !default;
$cart-list-item__input-margin : 0 $spacer 0 0 !default;
$cart-list-item__total-font-size : $font-size-medium !default;
$cart-list-item__total-line-height : 48px !default;
$cart-list-item__total-font-weight : $font-weight-medium !default;
$cart-list-item__action-background-color : transparent !default;
$cart-list-item__action-margin-right : 8px !default;
$cart-list-item__actions-display : flex !default;
$cart-list-item__actions-display\@medium : flex !default;
$cart-list-item__gift-dropdown-label-margin\@medium: 0 0 0 auto !default;
@import "cart-list-item-variables";
.cart-list-item {
padding: $cart-list-item__padding;
border-bottom: $cart-list-item__border-bottom;
@include mq($screen-m) {
display: flex;
flex-flow: row wrap;
}
&__left {
display: flex;
@include mq($screen-m) {
flex-basis: 50%;
}
@include mq($screen-xl) {
flex-basis: 60%;
}
}
&__right {
margin: $cart-list-item__right-margin;
padding: $cart-list-item__right-padding;
@include mq($screen-m) {
display: flex;
flex-basis: 50%;
flex-wrap: wrap;
align-content: space-between;
margin: $cart-list-item__right-margin\@medium;
padding: $cart-list-item__right-padding\@medium;
}
@include mq($screen-xl) {
flex-basis: 40%;
}
}
&__image {
width: $cart-list-item__image-width;
@include mq($screen-m) {
width: $cart-list-item__image-width\@medium;
}
@include mq($screen-xl) {
width: $cart-list-item__image-width\@x-large;
}
}
&__content {
flex-basis: $cart-list-item__content-flex-basis;
padding: $cart-list-item__content-padding;
@include mq($screen-m) {
flex-basis: $cart-list-item__content-flex-basis\@medium;
}
@include mq($screen-xl) {
flex-basis: $cart-list-item__content-flex-basis\@x-large;
padding: $cart-list-item__content-padding\@x-large;
}
}
&__name {
display: block;
font-family: $cart-list-item__name-font-family;
font-size: $cart-list-item__name-font-size;
font-weight: $cart-list-item__name-font-weight;
line-height: $cart-list-item__name-line-height;
text-transform: $cart-list-item__name-text-transform;
}
&__attribute {
display: block;
width: 100%;
color: $cart-list-item__attribute-color;
}
&__label,
&__price {
color: $cart-list-item__label-color;
line-height: $cart-list-item__label-line-height;
}
&__price {
@include mq($screen-m) {
font-size: $cart-list-item__price-font-size\@medium;
}
}
&__label {
@include mq($screen-m) {
@include visually-hidden();
}
}
&__details {
@include mq($screen-m) {
display: flex;
flex-basis: 100%;
align-items: flex-start;
}
}
&__wrapper {
@include mq($screen-m) {
flex-basis: 40%;
}
@include mq($screen-xl) {
flex-basis: 35%;
}
}
&__qty {
margin: $cart-list-item__qty-margin;
@include mq($screen-m) {
flex-basis: 20%;
}
@include mq($screen-xl) {
flex-basis: 30%;
padding: $cart-list-item__qty-padding\@x-large;
}
}
&__input {
width: $cart-list-item__input-width;
height: $cart-list-item__input-height;
margin: $cart-list-item__input-margin;
appearance: textfield;
@include mq($screen-xl) {
width: 100%;
}
&::-webkit-inner-spin-button, // sass-lint:disable-line no-vendor-prefixes
&::-webkit-outer-spin-button { // sass-lint:disable-line no-vendor-prefixes
appearance: none;
margin: 0;
}
}
&__total {
font-size: $cart-list-item__total-font-size;
line-height: $cart-list-item__total-line-height;
font-weight: $cart-list-item__total-font-weight;
}
&__actions {
display: $cart-list-item__actions-display;
flex-flow: row wrap;
@include mq($screen-m) {
display: $cart-list-item__actions-display\@medium;
flex-basis: 100%;
justify-content: flex-end;
}
}
&__action {
margin-right: $cart-list-item__action-margin-right;
&:last-child {
margin-right: 0;
}
}
&__attributes-list {
@extend .minicart-product__attributes-list;
}
&__gift-dropdown {
width: 100%;
@include mq($screen-m) {
text-align: right;
}
.dropdown-list {
&__content {
display: none;
&._active {
display: block;
}
}
&__label {
@include mq($screen-m) {
margin: $cart-list-item__gift-dropdown-label-margin\@medium;
}
&._active {
.dropdown-list__icon {
transform: rotate(180deg);
}
}
}
}
}
}
There are no notes for this item.