<section class="product-list-item ">
<a href="#" class="
link
product-list-item__image-link
">
<div class="badges product-list-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-list-item__image">
<img class="image lazyload " src="" data-src="/images/product/product-160_240.jpg" alt="">
</div>
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
<div class="rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-list-item__name">
<a class="link product-list-item__name-link" href="#" title="Title">
Some product name - very long name because that's important
</a>
</h2>
<div class="product-list-item__sku">
SKU: CEL-31145
</div>
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
<dl class="list list--description ">
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
<dt class="list__label">
Attribute
</dt>
<dd class="list__value">
Value
</dd>
</dl>
</div>
</div>
<div class="product-list-item__actions">
<button class="button button--link modal-trigger product-list-item__stock" type="button" data-modal-trigger="shipping-latency-1">
In stock
</button>
<div role="dialog" aria-hidden="true" id="shipping-latency-1" data-modal="shipping-latency-1" class="modal " aria-labbeledny="shipping-latency-title-1">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content ">
<div class="modal__top ">
<h2 class="modal__heading heading heading--third-level" id="shipping-latency-title-1">
Shipping Latency Modal
</h2>
</div>
<div class="modal__middle ">
<p class="
modal__description
margin-bottom-xs
">
This is a shipping latency modal. Inside we have some text from shippig latency module.
</p>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="shipping-latency-1"]'));
</script>
<div class="product-list-item__price">
<div class="price " aria-label="Product price" tabindex="0">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-list-item__actions-inner">
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
<button class="button button--icon product-list-item__button-action" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<form action="#" class="product-list-item__add-to-action">
<button class="button button--add-to button--add-to product-list-item__add-to-button button--fluid" type="button" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Add to Cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</div>
</section>
<{{{ tag }}} class="product-list-item {{ class }}">
<a
href="#"
class="
link
product-list-item__image-link
"
>
{{#if productBadges}}
{{ render '@badges' productBadges }}
{{/if}}
{{ render '@image' image }}
</a>
<div class="product-list-item__main">
<div class="product-list-item__details">
{{ render '@rating--secondary' }}
<h2 class="product-list-item__name">
{{ render '@link' linkName merge=true }}
</h2>
<div class="product-list-item__sku">
{{ sku }}
</div>
{{#if description}}
<div class="product-list-item__description">
{{ description }}
</div>
{{/if}}
{{#if bulletList }}
<div class="product-list-item__list">
<!-- Markup generated by snowdog/module-bullet-points -->
{{ render '@list--description' bulletList }}
</div>
{{/if}}
</div>
<div class="product-list-item__actions">
{{ render '@button' stockButton merge=true }}
{{ render '@modal' shippingLatencyModal }}
<div class="product-list-item__price">
{{ render (component price.name) price.context merge=true }}
</div>
{{#if swatches}}
<div class="swatch__container swatch__container--catalog">
{{ render '@swatch--color' }}
</div>
{{/if}}
<div class="product-list-item__actions-inner">
{{
render '@button--icon'
secondaryActions.compare
merge=true
}}
{{
render '@button--icon'
secondaryActions.wishlist
merge=true
}}
<form action="#" class="product-list-item__add-to-action">
{{ render '@button--add-to' addToButton merge=true }}
</form>
</div>
</div>
</div>
</{{{ tag }}}>
{
"tag": "section",
"class": "",
"swatches": true,
"image": {
"wrapperClass": "product-list-item__image",
"dataSrc": "/images/product/product-160_240.jpg"
},
"productBadges": {
"class": "product-list-item__badges",
"badges": [
{
"contentElement": "badge",
"contentContext": {
"text": "-15%"
}
},
{
"contentElement": "badge--new",
"contentContext": {
"text": "New"
}
}
]
},
"linkName": {
"class": "product-list-item__name-link",
"text": "Some product name - very long name because that's important"
},
"sku": "SKU: CEL-31145",
"description": false,
"bulletList": {
"attributes": "",
"elements": [
{
"label": "Attribute",
"value": "Value"
},
{
"label": "Attribute",
"value": "Value"
},
{
"label": "Attribute",
"value": "Value"
},
{
"label": "Attribute",
"value": "Value"
}
]
},
"stockButton": {
"class": "button--link modal-trigger product-list-item__stock",
"text": "In stock",
"attributes": "type=\"button\" data-modal-trigger=\"shipping-latency-1\""
},
"shippingLatencyModal": {
"modal": {
"id": "shipping-latency-1",
"attributes": "aria-labbeledny=\"shipping-latency-title-1\""
},
"buttonClose": {
"tag": "button",
"text": "",
"class": "button--rotate-icon modal__close-button",
"icon": {
"id": "close",
"title": "Close",
"class": "button__icon modal__close-button-icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"click to close the modal\""
},
"modalTop": true,
"heading": {
"tag": "h2",
"class": "heading heading--third-level",
"attributes": "id=\"shipping-latency-title-1\"",
"text": "Shipping Latency Modal"
},
"modalMiddle": true,
"modalDescription": {
"attributes": "",
"class": "margin-bottom-xs",
"tag": "p",
"text": "This is a shipping latency modal. Inside we have some text from shippig latency module."
}
},
"price": {
"name": "price",
"context": {
"attributes": "aria-label=\"Product price\" tabindex=\"0\""
}
},
"secondaryActions": {
"wishlist": {
"class": "product-list-item__button-action",
"icon": {
"id": "heart",
"title": "Heart",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to Wish List\""
},
"compare": {
"class": "product-list-item__button-action",
"icon": {
"id": "compare",
"title": "Compare",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Add to compare\""
}
},
"addToButton": {
"text": "Add to cart",
"class": "button--add-to product-list-item__add-to-button button--fluid",
"attributes": "type=\"button\" aria-label=\"Add to cart\"",
"iconBefore": {
"id": "shopping-cart",
"title": "Add to cart",
"class": "button__icon",
"hidden": true
}
}
}
$product-list-item__border-style : $border-style-base !default;
$product-list-item__border-color : $border-color-base !default;
$product-list-item__border-width : 0 0 1px 0 !default;
$product-list-item__padding : $spacer--semi-medium 0 $spacer--medium !default;
$product-list-item__padding\@medium : $spacer--semi-medium 0 !default;
$product-list-item__transition : $transition-base !default;
$product-list-item__image-width : 80px !default;
$product-list-item__image-width\@medium : 160px !default;
$product-list-item__image-margin-right : $spacer !default;
$product-list-item__image-margin-right\@medium : $spacer--medium !default;
$product-list-item__image-margin : 0 $product-list-item__image-margin-right 0 0 !default;
$product-list-item__image-margin\@medium : 0 $product-list-item__image-margin-right\@medium 0 0 !default;
$product-list-item__image-margin\@xl : 0 64px 0 0 !default;
$product-list-item__image-link-decoration : none !default;
$product-list-item__image-layout-color-hover : rgba($black, 0.2) !default;
$product-list-item__main-width : calc(100% - #{$product-list-item__image-width} - #{$product-list-item__image-margin-right}) !default;
$product-list-item__main-width\@medium : calc(100% - #{$product-list-item__image-width\@medium} - #{$product-list-item__image-margin-right\@medium}) !default;
$product-list-item__badges-z-index : $z-index-low !default;
$product-list-item__badges-top\@medium : $spacer--medium !default;
$product-list-item__badges-left : 0 !default;
$product-list-item__badges-bottom : -$spacer !default;
$product-list-item__badges-bottom\@medium : $spacer--large !default;
$product-list-item__name-font-size : $font-size-base !default;
$product-list-item__name-font-size\@medium : $font-size-medium !default;
$product-list-item__name-margin : ($spacer / 2) 0 !default;
$product-list-item__name-margin\@medium : $spacer 0 ($spacer / 2) !default;
$product-list-item__name-text-transform : none !default;
$product-list-item__name-decoration : none !default;
$product-list-item__name-decoration-hover : none !default;
$product-list-item__name-color-hover : $color-primary !default;
$product-list-item__sku-font-size : $font-size-extra-small !default;
$product-list-item__sku-font-size\@medium : $font-size-base !default;
$product-list-item__sku-color : $color-secondary !default;
$product-list-item__sku-margin : 0 0 $spacer--medium !default;
$product-list-item__description-margin : 0 0 $spacer !default;
$product-list-item__description-font-size : $font-size-extra-small !default;
$product-list-item__description-font-size\@medium : $font-size-base !default;
$product-list-item__description-color : $color-secondary !default;
$product-list-item__list-display : block !default;
$product-list-item__list-display\@medium : block !default;
$product-list-item__list-color : $color-secondary !default;
$product-list-item__list-font-size : $font-size-extra-small !default;
$product-list-item__list-font-size\@medium : $font-size-base !default;
$product-list-item__list-margin : 0 !default;
$product-list-item__list-margin\@medium : 0 !default;
$product-list-item__list-label-padding : 0 $spacer $spacer $spacer--medium !default;
$product-list-item__price-width : 100% !default;
$product-list-item__price-margin\@medium : $spacer--extra-large 0 0 0 !default;
$product-list-item__price-align : right !default;
$product-list-item__price-font-size\@medium : $font-size-extra-large !default;
$product-list-item__price-old-font-size\@medium : $font-size-large !default;
$product-list-item__price-old-margin\@medium : 0 !default;
$product-list-item__action-icon-fill : $gray-darker !default;
$product-list-item__action-icon-fill-hover : $white !default;
$product-list-item__action-margin : 0 $spacer--extra-small 0 0 !default;
$product-list-item__action-margin\@medium : 0 $spacer 0 0 !default;
$product-list-item__add-to-button-text-display : none !default;
$product-list-item__add-to-button-text-display\@medium : block !default;
$product-list-item__add-to-button-icon-display\@medium : none !default;
$product-list-item__add-to-icon-display : none !default;
$product-list-item__add-to-icon-display\@medium : block !default;
$product-list-item__add-to-icon-display\@xl : none !default;
$product-list-item__stock-width : 100% !default;
$product-list-item__stock-display : none !default;
$product-list-item__stock-display\@medium : inline-flex !default;
$product-list-item__stock-decoration : none !default;
$product-list-item__stock-padding : 0 !default;
$product-list-item__stock-text-aligment : flex-start !default;
$product-list-item__stock-text-aligment\@medium : flex-end !default;
$product-list-item__stock-text-transform : uppercase !default;
$product-list-item__stock-text-decoration-hover : underline !default;
$product-list-item__swatch-loader-icon-margin : 0 $spacer--semi-large 0 0 !default;
$product-list-item__action-wishlist-background : transparent !default;
$product-list-item__wishlist-filled-bg-color-hover : $color-primary !default;
$product-list-item__wishlist-filled-bg-image-after-hover : linear-gradient(to right, $white 50%, transparent 50%) !default;
// EE Version
$product-list-item-ee__tocompare-background-color : $gray-lighter !default;
$product-list-item-ee__multiwishlist-width : 48px !default;
$product-list-item-ee__multiwishlist-margin : 0 $spacer 0 0 !default;
$product-list-item-ee__dropdown-list-content-top : auto !default;
$product-list-item-ee__dropdown-list-content-bottom : 100% !default;
$product-list-item-ee__dropdown-list-content-width : 180px !default;
$product-list-item-ee__dropdown-list-content-width\@medium: 210px !default;
$product-list-item-ee__dropdown-list-label-width : 48px !default;
$product-list-item-ee__dropdown-list-label-height : 48px !default;
@import 'product-list-item-variables';
.product-list-item {
position: relative;
display: flex;
align-items: stretch;
border-style: $product-list-item__border-style;
border-width: $product-list-item__border-width;
border-color: $product-list-item__border-color;
padding: $product-list-item__padding;
@include darken-layout-hover('.product-list-item__image-link .lazyload-wrapper');
@include mq($screen-m) {
padding: $product-list-item__padding\@medium;
}
&__image {
transition: $product-list-item__transition;
.image {
transition: $product-list-item__transition;
}
}
&__image-link {
position: relative;
display: flex;
flex-flow: column nowrap;
align-items: center;
max-width: $product-list-item__image-width;
margin: $product-list-item__image-margin;
text-decoration: $product-list-item__image-link-decoration;
@include mq($screen-m) {
margin: $product-list-item__image-margin\@medium;
flex-basis: $product-list-item__image-width\@medium;
max-width: $product-list-item__image-width\@medium;
}
@include mq($screen-xl) {
margin: $product-list-item__image-margin\@xl;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
transition: $product-list-item__transition;
}
}
&__badges {
z-index: $product-list-item__badges-z-index;
left: $product-list-item__badges-left;
bottom: $product-list-item__badges-bottom;
@include mq($screen-m) {
top: $product-list-item__badges-top\@medium;
bottom: $product-list-item__badges-bottom\@medium;
}
}
&__main {
flex-grow: 1;
flex-shrink: 1;
flex-basis: $product-list-item__main-width;
max-width: $product-list-item__main-width;
@include mq($screen-m) {
display: flex;
flex-basis: $product-list-item__main-width\@medium;
max-width: $product-list-item__main-width\@medium;
}
}
&__details {
display: flex;
align-items: flex-start;
flex-direction: column;
@include mq($screen-m) {
flex-grow: 1;
flex-shrink: 1;
}
}
&__name {
margin: $product-list-item__name-margin;
font-size: $product-list-item__name-font-size;
@include mq($screen-m) {
margin: $product-list-item__name-margin\@medium;
font-size: $product-list-item__name-font-size\@medium;
}
}
&__name-link {
display: block;
text-decoration: $product-list-item__name-decoration;
text-transform: $product-list-item__name-text-transform;
&:hover {
color: $product-list-item__name-color-hover;
text-decoration: $product-list-item__name-decoration-hover;
}
}
&__sku {
font-size: $product-list-item__sku-font-size;
color: $product-list-item__sku-color;
margin: $product-list-item__sku-margin;
@include mq($screen-m) {
font-size: $product-list-item__sku-font-size\@medium;
}
}
&__description {
color: $product-list-item__description-color;
font-size: $product-list-item__description-font-size;
margin: $product-list-item__description-margin;
@include mq($screen-m) {
font-size: $product-list-item__description-font-size\@medium;
}
}
&__list {
display: $product-list-item__list-display;
margin: $product-list-item__list-margin;
color: $product-list-item__list-color;
font-size: $product-list-item__list-font-size;
@include mq($screen-m) {
display: $product-list-item__list-display\@medium;
margin: $product-list-item__list-margin\@medium;
font-size: $product-list-item__list-font-size\@medium;
}
dl {
@extend .list--description;
color: $product-list-item__list-color;
}
dt {
@extend .list__label;
@extend %bullet;
position: relative;
padding: $product-list-item__list-label-padding;
}
dd {
@extend .list__value;
}
}
&__actions {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;
@include mq($screen-m) {
flex-grow: 1;
justify-content: flex-end;
align-items: flex-start;
}
}
&__actions-inner {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
.button--icon:not(.button--add-to) {
margin: $product-list-item__action-margin;
@include mq($screen-m) {
margin: $product-list-item__action-margin\@medium;
}
}
&--ee {
display: flex;
align-items: center;
.button--tocompare {
background-color: $product-list-item-ee__tocompare-background-color;
}
.button {
justify-content: center;
order: 1;
&__text {
display: none;
}
}
.product-list-item__add-to-action {
flex-grow: 0;
width: auto;
order: 4;
.button {
.button__text {
display: none;
@include mq($screen-xl) {
display: block;
}
}
.button__icon {
display: block;
@include mq($screen-xl) {
display: none;
}
}
}
}
.block-requisition-list {
order: 3;
}
.product-view {
&__update-wishlist {
display: none;
}
&__multiwishlist {
width: $product-list-item-ee__multiwishlist-width;
margin: $product-list-item-ee__multiwishlist-margin;
order: 2;
.dropdown-list__label {
justify-content: center;
}
}
}
.dropdown-list {
&__content {
top: $product-list-item-ee__dropdown-list-content-top;
bottom: $product-list-item-ee__dropdown-list-content-bottom;
width: $product-list-item-ee__dropdown-list-content-width;
@include mq($screen-m) {
width: $product-list-item-ee__dropdown-list-content-width\@medium;
}
}
&__icon {
display: none;
}
&__label {
width: $product-list-item-ee__dropdown-list-label-width;
height: $product-list-item-ee__dropdown-list-label-height;
}
&__item {
position: relative;
}
}
}
}
&__price {
width: $product-list-item__price-width;
.price {
display: flex;
flex-flow: column nowrap;
}
@include mq($screen-m) {
margin: $product-list-item__price-margin\@medium;
text-align: $product-list-item__price-align;
.price {
align-items: flex-end;
}
.price__value {
font-size: $product-list-item__price-font-size\@medium;
&--old {
margin: $product-list-item__price-old-margin\@medium;
font-size: $product-list-item__price-old-font-size\@medium;
}
}
}
}
&__add-to-action {
flex-grow: 1;
max-width: 250px;
@include mq($screen-m) {
flex-grow: 0;
}
.button--add-to {
@include add-to-button($product-list-item__add-to-icon-display);
padding: $spacer;
@include mq($screen-m) {
@include add-to-button($product-list-item__add-to-icon-display\@medium);
}
@include mq($screen-xl) {
@include add-to-button($product-list-item__add-to-icon-display\@xl);
}
}
}
&__stock {
display: $product-list-item__stock-display;
width: $product-list-item__stock-width;
justify-content: $product-list-item__stock-text-aligment;
padding: $product-list-item__stock-padding;
text-transform: $product-list-item__stock-text-transform;
text-decoration: $product-list-item__stock-decoration;
@include mq($screen-m) {
display: $product-list-item__stock-display\@medium;
justify-content: $product-list-item__stock-text-aligment\@medium;
}
&:hover {
text-decoration: $product-list-item__stock-text-decoration-hover;
}
}
.button--wishlist {
&.button--icon-filled {
@include button-fill-bg();
&.button--icon-filled {
@extend .button--icon-fill;
@include button-fill-bg();
&:hover,
&:active {
&:before {
background-color: $product-list-item__wishlist-filled-bg-color-hover;
}
&:after {
display: block;
background-image: $product-list-item__wishlist-filled-bg-image-after-hover;
}
.icon {
fill: $white;
}
}
}
}
}
&__rating {
.review__amount,
.review__summary-add {
display: none;
}
}
// swatch & loader
.swatch {
&__container--catalog {
.loader__icon {
margin: $product-list-item__swatch-loader-icon-margin;
}
}
&__wrapper {
justify-content: flex-end;
}
}
}
to show attributes list in product-list-item, the module snowdog/module-highpointscientific-bullet-points
is required
to confirm