Recently Viewed: Sidebar

<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&#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 xlink: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 xlink: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 xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
                                </svg>

                            </button>

                        </form>
                    </div>
                </div>
            </section>
        </div>

    </div>
</div>