<div class="recently-viewed recently-viewed--sidebar">
<div class="sidebar-block">
<div class="sidebar-block__heading">
<h2 class="sidebar-block__title">
Recently Viewed
</h2>
</div>
<div class="product-grid-item " tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__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-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<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-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value ">
$
1 400
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" 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 href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="recently-viewed {{ class }}">
<div class="{{ blockClass }}">
<div class="{{ headingClass }}">
{{ render '@heading' heading merge="true" }}
</div>
{{ render (component content) contentContext merge=true }}
</div>
</div>
{
"class": "recently-viewed--sidebar",
"blockClass": "sidebar-block",
"headingClass": "sidebar-block__heading",
"heading": {
"tag": "h2",
"class": "sidebar-block__title",
"text": "Recently Viewed"
},
"content": "product-grid-item"
}
.recently-viewed {
position: relative;
max-width: $max-content-width;
margin: 0 auto;
&--sidebar {
.slider__slides {
flex-wrap: wrap;
}
}
}
Currently all widget products are based on ‘product-grid-item’ component
As grid template we use slider to display viewed products
TODO: We need to configure Magento templates and scripts to be able add to cart/wishlist using ajax same as products in catalog