<div class="recently-viewed recently-viewed--grid">
    <div class="recently-viewed__block">
        <div class="recently-viewed__heading section__heading">
            <h2 class="recently-viewed__title heading--first-level margin-0">
                Recently Viewed
            </h2>

        </div>

        <div class="slider slider--products" data-mobile-first="true" data-infinite="false" data-center-mode="false" data-dots="true" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="2" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 3, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}]'>
            <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
                <div class="loader__icon"></div>
            </div>

            <div class="slider__handler">
                <div class="slider__navigation ">
                    <div class="slider__arrows">
                        <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
                            <svg class="icon button__icon slider__nav-icon" role="img">
                                <use href="/images/icons-sprite.svg#arrow-left"></use>
                            </svg>

                        </button>

                        <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
                            <svg class="icon button__icon slider__nav-icon" role="img">
                                <use href="/images/icons-sprite.svg#arrow-right"></use>
                            </svg>

                        </button>

                    </div>
                </div>
                <div class="slider__container">
                    <div class="slider__slides">
                        <div class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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">
                                            Some product name Lorem Ipsum Dolor sit
                                        </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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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">
                                            Some product name
                                        </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 price__value--old ">
                                                    <del aria-label="Price reduced from: $1000.00">
                                                        $
                                                        1000.00

                                                    </del>
                                                </span>
                                                <span class="price__value price__value--special ">
                                                    <ins aria-label="On sale at: $899.99">

                                                        $

                                                        899.99

                                                    </ins>
                                                </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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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">
                                            Some product name
                                        </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 price__value--old product-grid-item__old-price">
                                                    <del aria-label="Price reduced from: $1000.00">
                                                        $
                                                        1000.00

                                                    </del>
                                                </span>
                                                <span class="price__value price__value--special product-grid-item__special-price">
                                                    <ins aria-label="On sale at: $899.99">

                                                        $

                                                        899.99

                                                    </ins>
                                                </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 class="
                            slider__item
                            slider__slide-item
                        ">
                            <div class="product-grid-item product-grid-item--slider-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&#x3D;" 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>
            </div>

        </div>

        <script src="/components/raw/slider/slider.js"></script>

    </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--grid",
  "blockClass": "recently-viewed__block",
  "headingClass": "recently-viewed__heading section__heading",
  "heading": {
    "tag": "h2",
    "class": "recently-viewed__title heading--first-level margin-0",
    "text": "Recently Viewed"
  },
  "content": "slider--products"
}
  • Content:
    .recently-viewed {
        position: relative;
        max-width: $max-content-width;
        margin: 0 auto;
    
        &--sidebar {
            .slider__slides {
                flex-wrap: wrap;
            }
        }
    }
    
  • URL: /components/raw/recently-viewed/_recently-viewed.scss
  • Filesystem Path: build/components/Organisms/recently-viewed/_recently-viewed.scss
  • Size: 189 Bytes
  • Handle: @recently-viewed--default
  • Preview:
  • Filesystem Path: build/components/Organisms/recently-viewed/recently-viewed.hbs
  • References (1): @heading

Recently Viewed

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