<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>
<li class="product-grid-item product-item product-item-info product-item-details" data-container="product-grid" tabindex="0" data-testid="list-product-item">
<div class="product-item-info" data-container="product-grid">
<a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet" class="product-grid-item__link product photo product-item-photo" tabindex="-1">
<div class="product-grid-item__image-wrapper">
<div class="lazyload-wrapper">
<picture class="image product-image-photo catalog-grid-item__image lazyloaded">
<source type="image/webp" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp">
<source type="image/jpg" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg">
<img class="image product-image-photo catalog-grid-item__image lazyloaded" src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" data-src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" alt="Adore Bouclé Boxspring Antraciet" loading="lazy">
</picture>
</div>
</div>
</a>
<div class="product details product-item-details">
<strong class="product name product-item-name">
<a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" class="product-item-link" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet">
Adore Bouclé Boxspring Antraciet
</a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="90660" data-price-box="product-id-90660">
<span class="
price__value
price__value--normal
">
<span class="price-container price-final_price tax weee">
<span id="product-price-90660" data-price-amount="899" data-price-type="finalPrice" class="
price-wrapper
" aria-label="finalPrice € 899,00">
<span class="price">€ 899,00</span>
</span>
</span>
</span>
</div>
<div class="product-item-inner">
<div class="product actions product-item-actions">
<div class="actions-primary">
<form data-role="tocart-form" data-product-sku="Adore-Bouclé-Boxspring-Antraciet" action="https://www.onlineslaapcomfort.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4%2C/product/90660/" method="post">
<input type="hidden" name="product" value="90660">
<input type="hidden" name="uenc" value="aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL2NoZWNrb3V0L2NhcnQvYWRkL3VlbmMvYUhSMGNITTZMeTkzZDNjdWIyNXNhVzVsYzJ4aFlYQmpiMjFtYjNKMExtNXNMM2R2Ym1WdUwzTnNZWEJsYmk5aVpXUmtaVzQlMkMvcHJvZHVjdC85MDY2MC8,">
<input name="form_key" type="hidden" value="crBUhdSqzPqMwD9O">
<button type="submit" title="in de winkelwagen" class="action tocart primary">
<span>in de winkelwagen</span>
</button>
</form>
</div>
<div data-role="add-to-links" class="actions-secondary">
<button class="
button
button--icon
button--wishlist
add-to-wishlist
" type="button" title="Toevoegen aan verlanglijstje" aria-label="Toevoegen aan verlanglijstje" data-testid="add-to-wishlist-button" data-multiplewishlist="{"action":"https:\/\/www.onlineslaapcomfort.nl\/wishlist\/index\/add\/","data":{"product":90660,"uenc":"aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4,"}}">
<svg class="icon button__icon" role="presentation" focusable="false">
<use href="https://www.onlineslaapcomfort.nl/static/version1706615337/frontend/FalconMedia/onlineslaapcomfort/nl_NL/images/icons-sprite.svg#heart"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
</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;
&--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