Alpaca components for Magento 2

Sidebar Block: Recently Ordered 

<div class="sidebar-block">
    <div class="sidebar-block__heading">
        <h2 class="sidebar-block__title">
            Recently Ordered
        </h2>

    </div>
    <ol class="list sidebar-block__list">
        <li>
            <div class="sidebar-block__item">
                <a href="#" class="link sidebar-block__link">
                    Chaz Kangeroo Hoodie
                </a>
            </div>
            <div class="checkbox sidebar-block__checkbox">
                <input type="checkbox" id="reorder-item-1" name="order-item-1" class="checkbox__field ">
                <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#checked"></use>
                </svg>
                <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#unchecked"></use>
                </svg>
                <label for="reorder-item-1" class="checkbox__label ">
                    <span class="checkbox__text">
                        Add to Cart
                    </span>
                </label>
            </div>

        </li>
        <li>
            <div class="sidebar-block__item">
                <a href="#" class="link sidebar-block__link">
                    Bruno Compete Hoodie
                </a>
            </div>
            <div class="checkbox sidebar-block__checkbox">
                <input type="checkbox" id="reorder-item-2" name="order-item-2" class="checkbox__field ">
                <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#checked"></use>
                </svg>
                <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#unchecked"></use>
                </svg>
                <label for="reorder-item-2" class="checkbox__label ">
                    <span class="checkbox__text">
                        Add to Cart
                    </span>
                </label>
            </div>

        </li>
        <li>
            <div class="sidebar-block__item">
                <a href="#" class="link sidebar-block__link">
                    Hero Hoodie
                </a>
            </div>
            <div class="checkbox sidebar-block__checkbox">
                <input type="checkbox" id="reorder-item-3" name="order-item-3" class="checkbox__field ">
                <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#checked"></use>
                </svg>
                <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                    <use href="/images/icons-sprite.svg#unchecked"></use>
                </svg>
                <label for="reorder-item-3" class="checkbox__label ">
                    <span class="checkbox__text">
                        Add to Cart
                    </span>
                </label>
            </div>

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

        <a class="link sidebar-block__action" href="#" title="View All">
            View All
        </a>

    </div>
</div>
 
<div class="sidebar-block">
    <div class="sidebar-block__heading">
        {{ render '@heading' title }}
    </div>
    <ol class="list sidebar-block__list">
        {{#each product}}
            <li>
                <div class="sidebar-block__item">
                    <a href="#" class="link sidebar-block__link">
                        {{ name }}
                    </a>
                </div>
                {{ render '@checkbox' checkbox }}
            </li>
        {{/each}}
    </ol>
    <div class="sidebar-block__actions">
        {{ render '@button' addToCart }}
        {{ render '@link' viewAll }}
    </div>
</div>
 
{
  "headingClass": "",
  "title": {
    "tag": "h2",
    "class": "sidebar-block__title",
    "text": "Recently Ordered"
  },
  "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",
      "checkbox": {
        "id": "reorder-item-1",
        "class": "sidebar-block__checkbox",
        "name": "order-item-1",
        "label": {
          "text": "Add to Cart"
        }
      }
    },
    {
      "name": "Bruno Compete Hoodie",
      "checkbox": {
        "id": "reorder-item-2",
        "class": "sidebar-block__checkbox",
        "name": "order-item-2",
        "label": {
          "text": "Add to Cart"
        }
      }
    },
    {
      "name": "Hero Hoodie",
      "checkbox": {
        "id": "reorder-item-3",
        "class": "sidebar-block__checkbox",
        "name": "order-item-3",
        "label": {
          "text": "Add to Cart"
        }
      }
    }
  ],
  "compareLink": false,
  "clearButton": {
    "tag": "button",
    "attributes": "type=\"button\"",
    "class": "button--link sidebar-block__action",
    "text": "Clear all"
  },
  "clearLink": false,
  "addToCart": {
    "tag": "button",
    "class": "button--link sidebar-block__action",
    "attributes": "type=\"button\"",
    "text": "Add to Cart"
  },
  "viewAll": {
    "href": "#",
    "class": "sidebar-block__action",
    "text": "View All"
  }
}
  • 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           : $white !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 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

No notes defined.