<div class="cart-list-item">
<div class="cart-list-item__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="product name goes here">
</div>
</div>
<div class="cart-list-item__info">
<div class="cart-list-item__data">
<a href="#" class="link link--invert cart-list-item__name">
Some product long name
</a>
<div class="cart-list-item__details">
<div class="cart-list-item__qty">
<div class="input cart-list-item__qty-wrapper">
<span class="form-check" aria-label="form-check-">
<svg class="icon " role="img">
<title>Angle down icon</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</span>
<label class="
label
label--hidden
" for="">
Qty:
</label>
<input class="input__field cart-list-item__qty-input" id="" name="" type="" placeholder="Qty">
</div>
</div>
<div class="cart-list-item__price">
$85.00
</div>
</div>
<dl class="list list--description cart-list-item__attributes">
<dt class="list__label">Size</dt>
<dd class="list__value">XXL</dd>
<dt class="list__label">Color</dt>
<dd class="list__value">Red</dd>
</dl>
</div>
<div class="cart-list-item__actions">
<a class="button button--icon cart-list-item__actions-item" href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="img">
<title>Edit pencil</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<button class="button button--icon cart-list-item__actions-item" href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="cart-list-item">
<div class="cart-list-item__image">
{{ render '@image' productImage }}
</div>
<div class="cart-list-item__info">
<div class="cart-list-item__data">
<a href="#" class="link link--invert cart-list-item__name">
{{ productName }}
</a>
<div class="cart-list-item__details">
<div class="cart-list-item__qty">
{{ render '@input' qtyInput }}
</div>
<div class="cart-list-item__price">
{{ productPrice }}
</div>
</div>
{{ render '@list--description' attributes }}
</div>
<div class="cart-list-item__actions">
{{ render '@button--icon' editIcon }}
{{ render '@button--icon' removeIcon }}
</div>
</div>
</div>
{
"productImage": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/cart-product-160_160.jpg",
"alt": "product name goes here"
},
"productName": "Some product long name",
"productPrice": "$85.00",
"qtyInput": {
"class": "cart-list-item__qty-wrapper",
"label": {
"attribute": "",
"text": "Qty:",
"class": "label--hidden"
},
"field": {
"attribute": "type=\"number\" value=\"1\"",
"class": "cart-list-item__qty-input",
"placeholder": "Qty"
}
},
"editIcon": {
"tag": "a",
"attributes": "href=\"#\" aria-label=\"edit product in your shopping cart\"",
"text": "",
"class": "button--icon cart-list-item__actions-item",
"icon": {
"id": "edit",
"title": "Edit pencil",
"class": "button__icon"
}
},
"removeIcon": {
"tag": "button",
"attributes": "href=\"#\" aria-label=\"remove this product from your shopping cart\"",
"text": "",
"class": "button--icon cart-list-item__actions-item",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon"
}
},
"attributes": {
"class": "cart-list-item__attributes",
"elements": [
{
"label": "Size",
"value": "XXL"
},
{
"label": "Color",
"value": "Red"
}
]
},
"configurable": true
}
$cart-list-item__padding : $spacer--medium 0 !default;
$cart-list-item__border : 1px solid $gray-light !default;
$cart-list-item__image-width : 160px !default;
$cart-list-item__image-padding : 0 $spacer--medium 0 0 !default;
$cart-list-item__name-weight : $font-weight-bold !default;
$cart-list-item__name-width : 65% !default;
$cart-list-item__name-padding\@small : 0 $spacer--medium 0 0 !default;
$cart-list-item__details-width : calc(100% - #{$cart-list-item__name-width}) !default;
$cart-list-item__details-margin : $spacer--medium 0 !default;
$cart-list-item__details-margin\@small : 0 !default;
$cart-list-item__attributes-margin : 0 0 $spacer--medium 0 !default;
$cart-list-item__price-margin : $spacer 0 0 0 !default;
$cart-list-item__price-margin\@medium : 0 !default;
$cart-list-item__qty-width : 100% !default;
$cart-list-item__qty-width\@small : auto !default;
$cart-list-item__qty-wrapper-margin : 0 !default;
$cart-list-item__qty-input-width\@small : 70px !default;
$cart-list-item__actions-item-margin : 0 0 0 $spacer !default;
.cart-list-item {
display: flex;
width: 100%;
flex-flow: row nowrap;
padding: $cart-list-item__padding;
border-bottom: $cart-list-item__border;
&__image {
flex: 0 0 $cart-list-item__image-width;
padding: $cart-list-item__image-padding;
}
&__info {
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
}
&__data {
display: flex;
flex-direction: column;
@include mq($screen-m) {
flex-flow: row wrap;
}
}
&__name {
line-height: $font-line-height;
text-decoration: none;
font-weight: $cart-list-item__name-weight;
@include mq($screen-m) {
flex: 0 0 $cart-list-item__name-width;
padding: $cart-list-item__name-padding\@small;
}
&:hover,
&:focus {
text-decoration: none;
}
}
&__details {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin: $cart-list-item__details-margin;
@include mq($screen-m) {
flex: 0 0 $cart-list-item__details-width;
margin: $cart-list-item__details-margin\@small;
flex-direction: row;
align-items: center;
}
}
&__attributes {
margin: $cart-list-item__attributes-margin;
}
&__price {
margin: $cart-list-item__price-margin;
@include mq($screen-m) {
margin: $cart-list-item__price-margin\@medium;
}
}
&__qty {
width: $cart-list-item__qty-width;
@include mq($screen-m) {
width: $cart-list-item__qty-width\@small;
}
}
&__qty-wrapper {
margin: $cart-list-item__qty-wrapper-margin;
}
&__qty-input {
@include mq($screen-m) {
width: $cart-list-item__qty-input-width\@small;
}
}
&__actions {
display: flex;
justify-content: flex-end;
}
&__actions-item {
margin: $cart-list-item__actions-item-margin;
}
}
There are no notes for this item.