<div class="sidebar-block">
    <div class="sidebar-block__heading ">
        <h2 class="sidebar-block__title">
            My Wish List
        </h2>

        <span class="sidebar-block__counter">
            3 items
        </span>
    </div>
    <ol class="list sidebar-block__list">
        <li class="margin-bottom-m">
            <div class="sidebar-block__item">
                <div class="sidebar-block__product-image">
                    <a href="#">
                        <div class="lazyload-wrapper ">
                            <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                        </div>

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a href="#" class="link sidebar-block__link">
                        Chaz Kangeroo Hoodie
                    </a>
                    <div class="price ">
                        <span class="price__value ">
                            $
                            159.95

                        </span>
                    </div>

                </div>
            </div>
            <div class="sidebar-block__actions">
                <button class="button button--link sidebar-block__action" type="button">
                    Add to Cart
                </button>

                <button class="button button--link sidebar-block__action" type="button">
                    Remove this item
                </button>

            </div>
        </li>
        <li class="margin-bottom-m">
            <div class="sidebar-block__item">
                <div class="sidebar-block__product-image">
                    <a href="#">
                        <div class="lazyload-wrapper ">
                            <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                        </div>

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a href="#" class="link sidebar-block__link">
                        Bruno Compete Hoodie
                    </a>
                    <div class="price ">
                        <span class="price__value ">
                            $
                            159.95

                        </span>
                    </div>

                </div>
            </div>
            <div class="sidebar-block__actions">
                <button class="button button--link sidebar-block__action" type="button">
                    Add to Cart
                </button>

                <button class="button button--link sidebar-block__action" type="button">
                    Remove this item
                </button>

            </div>
        </li>
        <li class="margin-bottom-m">
            <div class="sidebar-block__item">
                <div class="sidebar-block__product-image">
                    <a href="#">
                        <div class="lazyload-wrapper ">
                            <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                        </div>

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a href="#" class="link sidebar-block__link">
                        Hero Hoodie
                    </a>
                    <div class="price ">
                        <span class="price__value ">
                            $
                            159.95

                        </span>
                    </div>

                </div>
            </div>
            <div class="sidebar-block__actions">
                <button class="button button--link sidebar-block__action" type="button">
                    Add to Cart
                </button>

                <button class="button button--link sidebar-block__action" type="button">
                    Remove this item
                </button>

            </div>
        </li>
    </ol>
    <a class="button button--secondary button--fluid" href="#">
        Go to Wish List
    </a>

</div>
<div class="sidebar-block">
    <div class="sidebar-block__heading {{ headingClass }}">
        {{ render '@heading' title }}
        <span class="sidebar-block__counter">
            {{ qty }}
        </span>
    </div>
    <ol class="list sidebar-block__list">
        {{#each product}}
            <li class="{{ ../wishlistListItemClass }}">
                <div class="sidebar-block__item">
                    <div class="sidebar-block__product-image">
                        <a href="#">
                            {{ render '@image' }}
                        </a>
                    </div>
                    <div class="sidebar-block__product-info">
                        <a  href="#" class="link sidebar-block__link">
                            {{ name }}
                        </a>
                        {{ render '@price' }}
                    </div>
                </div>
                <div class="sidebar-block__actions">
                    {{ render '@button' ../addToCart }}
                    {{ render '@button' ../removeFromWishlist }}
                </div>
            </li>
        {{/each}}
    </ol>
    {{ render '@button' goToWishlist }}
</div>
{
  "headingClass": "",
  "title": {
    "tag": "h2",
    "class": "sidebar-block__title",
    "text": "My Wish List"
  },
  "qty": "3 items",
  "removeButton": {
    "tag": "button",
    "attributes": "aria-label=\"Remove product from compare\" title=\"Remove product from compare\"",
    "class": "sidebar-block__remove margin-right-xs",
    "icon": {
      "id": "close",
      "title": "Close",
      "class": "icon sidebar-block__remove-icon"
    }
  },
  "product": [
    {
      "name": "Chaz Kangeroo Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      }
    },
    {
      "name": "Bruno Compete Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      }
    },
    {
      "name": "Hero Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      }
    }
  ],
  "compareLink": false,
  "clearButton": {
    "tag": "button",
    "attributes": "type=\"button\"",
    "class": "button--link sidebar-block__action",
    "text": "Clear all"
  },
  "clearLink": false,
  "wishlistListItemClass": "margin-bottom-m",
  "addToCart": {
    "tag": "button",
    "class": "button--link sidebar-block__action",
    "attributes": "type=\"button\"",
    "text": "Add to Cart"
  },
  "removeFromWishlist": {
    "tag": "button",
    "class": "button--link sidebar-block__action",
    "attributes": "type=\"button\"",
    "text": "Remove this item"
  },
  "goToWishlist": {
    "tag": "a",
    "class": "button--secondary button--fluid",
    "attributes": "href=\"#\"",
    "text": "Go to Wish List"
  }
}
  • Content:
    $sidebar-block__padding                     : 0 0 $spacer--large !default;
    $sidebar-block__min-height                  : 150px !default;
    $sidebar-block__min-height--loaded          : auto !default;
    
    $sidebar-block__heading-border              : $border-base !default;
    $sidebar-block__heading-border-width        : 0 0 $border-width-base !default;
    $sidebar-block__heading-margin              : 0 0 $spacer--medium !default;
    $sidebar-block__heading-padding             : 0 0 $spacer !default;
    
    $sidebar-block__title-font-family           : $font-family-base !default;
    $sidebar-block__title-font-weight           : $font-weight-bold !default;
    $sidebar-block__title-font-size             : $font-size-medium !default;
    
    $sidebar-block__list-margin                 : 0 0 $spacer 0 !default;
    
    $sidebar-block__item-padding                : 0 0 $spacer !default;
    
    $sidebar-block__index-margin                : 0 $spacer !default;
    $sidebar-block__index-margin\@large         : 0 $spacer 0 $spacer--extra-small !default;
    $sidebar-block__index-font-weight           : $font-weight-bold !default;
    $sidebar-block__index-min-width             : $spacer--medium !default;
    
    $sidebar-block__icon-fill                   : $red !default;
    $sidebar-block__icon-fill--active           : $theme-second !default;
    
    $sidebar-block__product-image-max-width     : 72px !default;
    $sidebar-block__product-image-margin        : 0 $spacer--medium 0 0 !default;
    
    $sidebar-block__price-margin                : 0 !default;
    $sidebar-block__price-font-weight           : $font-weight-bold !default;
    
    $sidebra-block__action-margin               : 0 $spacer--small !default;
    $sidebra-block__action-margin\@large        : 0 $spacer--small 0 0 !default;
    $sidebra-block__action-font-size            : $font-size-medium !default;
    $sidebra-block__action-font-weight          : $font-weight-bold !default;
    $sidebra-block__action-text-decoration      : underline !default;
    $sidebra-block__action-text-decoration-hover: underline !default;
    $sidebra-block__action-text-align           : left !default;
    
  • URL: /components/raw/sidebar-block/_sidebar-block-variables.scss
  • Filesystem Path: build/components/Organisms/sidebar-block/_sidebar-block-variables.scss
  • Size: 2.1 KB
  • Content:
    @import 'sidebar-block-variables';
    
    .sidebar-block {
        position: relative;
        padding: $sidebar-block__padding;
        min-height: $sidebar-block__min-height;
    
        &--hidden {
            display: none;
        }
    
        &--loaded {
            min-height: $sidebar-block__min-height--loaded;
        }
    
        &__heading {
            display: flex;
            justify-content: space-between;
            align-items: center;
    
            &--with-border {
                border: $sidebar-block__heading-border;
                border-width: $sidebar-block__heading-border-width;
                margin: $sidebar-block__heading-margin;
                padding: $sidebar-block__heading-padding;
            }
        }
    
        &__title {
            font-family: $sidebar-block__title-font-family;
            font-weight: $sidebar-block__title-font-weight;
            font-size: $sidebar-block__title-font-size;
        }
    
        &__list {
            margin: $sidebar-block__list-margin;
            counter-reset: sidebarIndex;
            &--hidden {
                display: none;
            }
        }
    
        &__item {
            display: flex;
            align-items: center;
            padding: $sidebar-block__item-padding;
    
            &:before {
                content: counter(sidebarIndex) ".";
                counter-increment: sidebarIndex;
                margin: $sidebar-block__index-margin;
                min-width: $sidebar-block__index-min-width;
                font-weight: $sidebar-block__index-font-weight;
                @include mq($screen-l) {
                    margin: $sidebar-block__index-margin\@large;
                }
            }
        }
    
        &__remove {
            &:hover,
            &.focus-visible {
                .icon {
                    fill: $sidebar-block__icon-fill--active;
                }
            }
    
            .icon {
                fill: $sidebar-block__icon-fill;
            }
    
        }
    
        &__product-image {
            width: $sidebar-block__product-image-max-width;
            margin: $sidebar-block__product-image-margin;
        }
    
        &__counter {
            white-space: nowrap;
        }
    
    
        &__hidden {
            display: none;
        }
    
        &__actions {
            display: flex;
            flex-flow: row wrap;
        }
    
        &__action {
            @include font-padding($font-size-medium, 48px);
            display: inline-block;
            min-height: initial;
            margin: $sidebra-block__action-margin;
            font-size: $sidebra-block__action-font-size;
            font-weight: $sidebra-block__action-font-weight;
            text-decoration: $sidebra-block__action-text-decoration;
            text-align: $sidebra-block__action-text-align;
            @include mq($screen-l) {
                margin: $sidebra-block__action-margin\@large;
            }
    
            &:hover {
                text-decoration: $sidebra-block__action-text-decoration-hover;
            }
        }
    
        .price-as-configured {
            margin: $sidebar-block__price-margin;
            font-weight: $sidebar-block__price-font-weight;
        }
    }
    
  • URL: /components/raw/sidebar-block/_sidebar-block.scss
  • Filesystem Path: build/components/Organisms/sidebar-block/_sidebar-block.scss
  • Size: 2.8 KB

There are no notes for this item.