Vechtsport Online Components for Magento 2

Sidebar Block: Wishlist 

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

        <span class="sidebar-block__counter">
            3 items
        </span>
    </div>
    <div class="divider sidebar-block__divider"></div>

    <ol class="list sidebar-block__list">
        <li class="sidebar-block__wishlist-item">
            <div class="sidebar-block__item sidebar-block__item--wishlist">
                <div class="sidebar-block__product-image">
                    <a href="">
                        <div class="lazyload-wrapper ">
                            <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                        </div>

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a class="link sidebar-block__link" href="#">
                        Chaz Kangeroo Hoodie
                    </a>
                    <div class="price  ">
                        <span class="price__value ">
                            €
                            129,95

                        </span>
                    </div>

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

                <a class="button button--link button--secondary sidebar-block__action" href="#">
                    Remove this item
                </a>

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

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a class="link sidebar-block__link" href="#">
                        Bruno Compete Hoodie
                    </a>
                    <div class="price  ">
                        <span class="price__value ">
                            €
                            129,95

                        </span>
                    </div>

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

                <a class="button button--link button--secondary sidebar-block__action" href="#">
                    Remove this item
                </a>

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

                    </a>
                </div>
                <div class="sidebar-block__product-info">
                    <a class="link sidebar-block__link" href="#">
                        Hero Hoodie
                    </a>
                    <div class="price  ">
                        <span class="price__value ">
                            €
                            129,95

                        </span>
                    </div>

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

                <a class="button button--link button--secondary sidebar-block__action" href="#">
                    Remove this item
                </a>

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

</div>
 
<div class="sidebar-block">
    <div class="sidebar-block__heading">
        {{ render '@heading' title }}
        <span class="sidebar-block__counter">
            {{ qty }}
        </span>
    </div>
    {{ render '@divider' divider }}
    <ol class="list sidebar-block__list">
        {{#each product}}
            <li class="sidebar-block__wishlist-item">
                <div class="sidebar-block__item sidebar-block__item--wishlist">
                    <div class="sidebar-block__product-image">
                        <a href="">
                            {{ render '@image' }}
                        </a>
                    </div>
                    <div class="sidebar-block__product-info">
                        <a class="link sidebar-block__link" href="#">
                            {{ name }}
                        </a>
                        {{ render '@price' }}
                    </div>
                </div>
                <div>
                    {{ render '@button' addToCart }}
                    {{ render '@button--link' removeFromWishlist }}
                </div>
            </li>
        {{/each}}
    </ol>
    {{ render '@button--link' goToWishlist }}
</div>
 
{
  "title": {
    "tag": "h2",
    "class": "heading--first-level sidebar-block__title",
    "text": "My Wish List"
  },
  "qty": "3 items",
  "divider": {
    "class": "sidebar-block__divider"
  },
  "product": [
    {
      "name": "Chaz Kangeroo Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      },
      "addToCart": {
        "tag": "button",
        "class": "button--secondary sidebar-block__action",
        "attributes": "type=\"button\"",
        "text": "Add to Cart"
      },
      "removeFromWishlist": {
        "tag": "a",
        "class": "button--link button--secondary sidebar-block__action",
        "attributes": "href=\"#\"",
        "text": "Remove this item"
      }
    },
    {
      "name": "Bruno Compete Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      },
      "addToCart": {
        "tag": "button",
        "class": "button--secondary sidebar-block__action",
        "attributes": "type=\"button\"",
        "text": "Add to Cart"
      },
      "removeFromWishlist": {
        "tag": "a",
        "class": "button--link button--secondary sidebar-block__action",
        "attributes": "href=\"#\"",
        "text": "Remove this item"
      }
    },
    {
      "name": "Hero Hoodie",
      "iconLabel": "Remove product from compare",
      "icon": {
        "id": "close",
        "title": "Close",
        "class": "sidebar-block__remove-icon"
      },
      "addToCart": {
        "tag": "button",
        "class": "button--secondary sidebar-block__action",
        "attributes": "type=\"button\"",
        "text": "Add to Cart"
      },
      "removeFromWishlist": {
        "tag": "a",
        "class": "button--link button--secondary sidebar-block__action",
        "attributes": "href=\"#\"",
        "text": "Remove this item"
      }
    }
  ],
  "compareLink": false,
  "clearLink": false,
  "goToWishlist": {
    "tag": "a",
    "class": "button button--link",
    "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-margin-bottom      : $spacer--medium !default;
$sidebar-block__title-font-weight          : $font-weight-normal !default;
$sidebar-block__title-margin-bottom        : 0 !default;
$sidebar-block__divider-margin-bottom      : $spacer--medium !default;
$sidebar-block__list-margin-bottom         : $spacer !default;
$sidebar-block__item-margin-bottom         : $spacer !default;
$sidebar-block__index-margin               : 0 $spacer !default;
$sidebar-block__index-font-weight          : $font-weight-bold !default;
$sidebar-block__index-min-width            : $spacer--medium !default;
$sidebar-block__remove-padding             : $spacer--medium !default;
$sidebar-block__remove-margin-right        : $spacer !default;
$sidebar-block__remove-background          : transparent !default;
$sidebar-block__remove-icon-padding        : 0 !default;
$sidebar-block__remove-icon-transition     : $transition-base !default;
$sidebar-block__icon-fill                  : $red !default;
$sidebar-block__icon-fill--active          : $green !default;
$sidebar-block__icon-size                  : 16px !default;
$sidebar-block__action-margin-left         : $spacer !default;
$sidebar-block__wishlist-item-margin-bottom: $spacer--large !default;
$sidebar-block__product-image-max-width    : 72px !default;
$sidebar-block__product-info-margin-left   : $spacer--medium !default;
$sidebar-block__checkbox-margin            : $spacer $spacer $spacer--medium !default;
$sidebar-block__price-margin               : 0 !default;
$sidebar-block__price-font-weight          : $font-weight-bold !default;
$sidebar-block__message-margin             : 0 !default;

.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;
        margin-bottom: $sidebar-block__heading-margin-bottom;
    }

    &__title {
        font-weight: $sidebar-block__title-font-weight;
        margin-bottom: $sidebar-block__title-margin-bottom;
    }

    &__divider {
        margin-bottom: $sidebar-block__divider-margin-bottom;
    }

    &__list {
        margin-bottom: $sidebar-block__list-margin-bottom;
        counter-reset: sidebarIndex;
        &--hidden {
            display: none;
        }
    }

    &__item {
        display: flex;
        align-items: center;
        &: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;
        }
        &--wishlist {
            margin-bottom: $sidebar-block__item-margin-bottom;
        }
    }

    &__remove {
        padding: $sidebar-block__remove-padding;
        margin-right: $sidebar-block__remove-margin-right;
        background-color: $sidebar-block__remove-background;

        &:hover,
        &:focus {
            background-color: $sidebar-block__remove-background;

            .sidebar-block__remove-icon {
                fill: $sidebar-block__icon-fill--active;
            }
        }

    }

    &__remove-icon {
        padding: $sidebar-block__remove-icon-padding;
        width: $sidebar-block__icon-size;
        height: $sidebar-block__icon-size;
        transition: $sidebar-block__remove-icon-transition;
        fill: $sidebar-block__icon-fill;
    }

    &__action {
        &:not(:first-child) {
            margin-left: $sidebar-block__action-margin-left;
        }
    }

    &__wishlist-item {
        margin-bottom: $sidebar-block__wishlist-item-margin-bottom;
    }

    &__product-image {
        width: $sidebar-block__product-image-max-width;
    }

    &__product-info {
        margin-left: $sidebar-block__product-info-margin-left;
    }

    &__checkbox {
        margin: $sidebar-block__checkbox-margin;
    }

    &__hidden {
        display: none;
    }

    &__message {
        margin: $sidebar-block__message-margin;
    }

    .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/03-modules/sidebar-block/_sidebar-block.scss
  • Size: 4.6 KB

There are no notes for this item.