<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
</div>
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a class="
link
link--invert
minicart-product__link
" href="#">
Some product name
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $249.95">
$
249.95
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $159.95">
$
159.95
</ins>
</span>
</div>
</div>
</div>
<dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
</dl>
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
<label class="
label
input__label
minicart-product__label
" for="mini-qty">
Qty:
</label>
<input class="input__field minicart-product__field" id="mini-qty" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
</div>
<button class="button button--secondary minicart-product__update" type="button">
Update
</button>
</div>
<div class="minicart-product__actions">
<a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Edit pencil</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
{{ render '@image' productImage }}
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a
class="
link
link--invert
minicart-product__link
"
href="#"
>
{{ productName }}
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
{{ render '@price--with-special-price' }}
</div>
</div>
{{#if configurable }}
{{ render '@list--description' attributes merge="true" }}
{{/if}}
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
{{ render '@input' productQty }}
{{#if updateQty }}
{{ render '@button' updateQty }}
{{/if}}
</div>
<div class="minicart-product__actions">
{{ render '@button--icon' editIcon }}
{{ render '@button--icon' removeIcon }}
</div>
</div>
</div>
</div>
{
"productImage": {
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/product/minicart-product-64x96.jpeg",
"alt": "product name goes here"
},
"productName": "Some product name",
"productPrice": "$85.00",
"productQty": {
"class": "input--inline minicart-product__input margin-bottom-0 margin-right-m",
"label": {
"class": "minicart-product__label",
"text": "Qty:",
"hidden": false
},
"field": {
"attributes": "aria-label=\"Change the quantity\" min=\"1\"",
"class": "minicart-product__field",
"id": "mini-qty",
"name": "mini-qty",
"placeholder": "32",
"type": "text"
}
},
"updateQty": {
"tag": "button",
"text": "Update",
"class": "button--secondary minicart-product__update",
"attributes": "type=\"button\""
},
"attributes": {
"class": "minicart-product__attributes-list"
},
"editIcon": {
"tag": "a",
"attributes": "href=\"#\" aria-label=\"edit product in your shopping cart\"",
"text": "",
"icon": {
"id": "edit",
"title": "Edit pencil",
"class": "button__icon",
"hidden": true
}
},
"removeIcon": {
"tag": "a",
"attributes": "href=\"#\" aria-label=\"remove this product from your shopping cart\"",
"text": "",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon",
"hidden": true
}
},
"configurable": true
}
$minicart-product__padding : $spacer--medium 0 !default;
$minicart-product__border : $border-base !default;
$minicart-product__spacer : $spacer !default;
$minicart-product__image-width : 64px !default;
$minicart-product__data-padding : 0 0 0 $spacer--medium !default;
$minicart-product--info-margin : 0 0 $spacer !default;
$minicart-product__name-line-height : 24px !default;
$minicart-product__name-font-size : $font-size-base !default;
$minicart-product__name-text-transform : none !default;
$minicart-product__link-text-decoration : none !default;
$minicart-product__link-font-weight : $font-weight-base !default;
$minicart-product__link-color : $color-primary !default;
$minicart-product__attributes-button-margin : 0 !default;
$minicart-product__attributes-button-padding : 0 !default;
$minicart-product__attributes-button-color : $blue !default;
$minicart-product__attributes-button-bg-color : $white !default;
$minicart-product__attributes-button-font-size : $font-size-small !default;
$minicart-product__attributes-color : $gray-dark !default;
$minicart-product__attributes-font-size : $font-size-small !default;
$minicart-product__attributes-line-height : 24px !default;
$minicart-product__attributes-label-padding : 0 $spacer 0 0 !default;
$minicart-product__attributes-label-font-weight : $font-weight-bold !default;
$minicart-product__attributes-value-padding : 0 !default;
$minicart-product__attributes-list-padding : 0 !default;
$minicart-product__attributes-list-icon-margin : 0 0 0 $spacer !default;
$minicart-product__price-font-size : $font-size-base !default;
$minicart-product__price-font-weight : $font-weight-bold !default;
$minicart-product__price-font-size--old : $font-size-small !default;
$minicart-product__price-align : center !default;
$minicart-product__action-button-bg : transparent !default;
$minicart-product__action-justify-content : flex-end !default;
$minicart-product__action-button-border : 0 !default;
$minicart-product__action-icon-color : $color-secondary !default;
$minicart-product__action-icon-color--active : $white !default;
$minicart-product__field-max-width : 56px !default;
$minicart-product__qty-margin : 0 0 $spacer !default;
$minicart-product__qty-margin\@medium : 0 !default;
$minicart-product__update-btn-padding : 0 $spacer !default;
$minicart-product__update-btn-padding\@medium : 0 $spacer--large !default;
@import 'minicart-product-variables';
.minicart-product {
display: flex;
width: 100%;
flex-flow: row nowrap;
padding: $minicart-product__padding;
border-bottom: $minicart-product__border;
&:last-child {
border-bottom: none;
}
&__image {
flex-basis: $minicart-product__image-width;
img {
width: $minicart-product__image-width;
max-width: $minicart-product__image-width;
height: auto;
}
}
&__data {
display: flex;
flex-flow: column wrap;
flex-grow: 1;
padding: $minicart-product__data-padding;
@include mq($screen-m) {
flex-direction: row;
}
}
&__info {
margin: $minicart-product__info-margin;
@include mq($screen-m) {
flex-grow: 1;
}
}
&__name {
margin-bottom: $minicart-product__spacer;
font-size: $minicart-product__name-font-size;
line-height: $minicart-product__name-line-height;
text-transform: $minicart-product__name-text-transform;
}
&__link {
text-decoration: $minicart-product__link-text-decoration;
font-weight: $minicart-product__link-font-weight;
color: $minicart-product__link-color;
}
&__attributes {
margin-bottom: $minicart-product__spacer;
display: none; //hidden due to lack of design TO DO
}
&__attributes-button {
display: flex;
align-items: center;
margin: $minicart-product__attributes-button-margin;
padding: $minicart-product__attributes-button-padding;
font-size: $minicart-product__attributes-button-font-size;
.dropdown-list__icon {
position: static;
margin: $minicart-product__attributes-list-icon-margin;
fill: $minicart-product__attributes-button-color;
}
&.dropdown-list__label {
color: $minicart-product__attributes-button-color;
background-color: $minicart-product__attributes-button-bg-color;
&.focus-visible,
&:hover {
background-color: $minicart-product__attributes-button-bg-color;
}
}
}
&__attributes-list {
padding: $minicart-product__attributes-list-padding;
.list__label,
.list__value {
color: $minicart-product__attributes-color;
font-size: $minicart-product__attributes-font-size;
line-height: $minicart-product__attributes-line-height;
}
.list__label {
padding: $minicart-product__attributes-label-padding;
font-weight: $minicart-product__attributes-label-font-weight;
}
.list__value {
padding: $minicart-product__attributes-value-padding;
}
}
&__price {
display: flex;
align-items: $minicart-product__price-align;
font-size: $minicart-product__price-font-size;
font-weight: $minicart-product__price-font-weight;
@include mq($screen-m) {
justify-content: flex-end;
}
.price__value {
display: block;
font-size: $minicart-product__price-font-size;
@include mq($screen-m) {
text-align: right;
}
&--old {
font-size: $minicart-product__price-font-size--old;
@include mq($screen-m) {
margin: 0;
}
}
}
}
&__bottom {
display: flex;
flex-direction: column;
width: 100%;
@include mq($screen-m) {
flex-direction: row;
justify-content: space-between;
}
}
&__actions {
display: flex;
.action.delete {
display: none;
}
}
&__field {
max-width: $minicart-product__field-max-width;
}
&__qty {
display: flex;
margin: $minicart-product__qty-margin;
@include mq($screen-m) {
margin: $minicart-product__qty-margin\@medium;
}
}
&__name-wrapper {
display: flex;
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}
&__update {
padding: $minicart-product__update-btn-padding;
@include mq($screen-m) {
padding: $minicart-product__update-btn-padding\@medium;
}
}
}
There are no notes for this item.