Alpaca components for Magento 2

Minicart Product 

<div class="minicart-product">
    <div class="minicart-product__image">
        <div class="lazyload-wrapper ">
            <img class="
            image
            lazyload
            
        " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
        </div>

    </div>
    <div class="minicart-product__data">
        <div class="minicart-product__info">
            <div class="minicart-product__name-wrapper">
                <h3 class="minicart-product__name">
                    <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                        Some product name
                    </a>
                </h3>
                <div class="minicart-product__price margin-bottom-xs">
                    <div class="price  ">
                        <span class="price__value price__value--old ">
                            <del aria-label="Price reduced from: $249.95">
                                $
                                249.95

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

                                $

                                159.95

                            </ins>
                        </span>
                    </div>

                </div>
            </div>
            <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                <dt class="list__label">
                    Lorem ipsum
                </dt>
                <dd class="list__value">
                    Lorem ipsum Value
                </dd>
                <dt class="list__label">
                    Lorem ipsum
                </dt>
                <dd class="list__value">
                    Lorem ipsum Value
                </dd>
            </dl>

        </div>

        <div class="minicart-product__bottom">
            <div class="minicart-product__qty">

            </div>

            <div class="minicart-product__actions">
                <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Edit pencil</title>
                        <use href="/images/icons-sprite.svg#edit"></use>
                    </svg>

                </a>

                <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Trash bin</title>
                        <use href="/images/icons-sprite.svg#remove"></use>
                    </svg>

                </a>

            </div>
        </div>
    </div>
</div>
 
<div class="minicart-product">
    <div class="minicart-product__image">
        {{ render '@image' productImage }}
    </div>
    <div class="minicart-product__data">
        <div class="minicart-product__info">
            <div class="minicart-product__name-wrapper">
                <h3 class="minicart-product__name">
                    <a
                        class="
                            link
                            link--invert
                            minicart-product__link
                        "
                        href="#"
                    >
                        {{ productName }}
                    </a>
                </h3>
                <div class="minicart-product__price margin-bottom-xs">
                    {{ render '@price--with-special-price' }}
                </div>
            </div>
            {{#if configurable }}
                {{ render '@list--description' attributes merge="true" }}
            {{/if}}
        </div>

        <div class="minicart-product__bottom">
            <div class="minicart-product__qty">
                {{#if productQty.visible}}
                    {{ render '@input' productQty }}
                {{/if}}

                {{#if updateQty.visible}}
                    {{ render '@button' updateQty }}
                {{/if}}
            </div>

            <div class="minicart-product__actions">
                {{ render '@button--icon' editIcon }}
                {{ render '@button--icon' removeIcon }}
            </div>
        </div>
    </div>
</div>
 
{
  "productImage": {
    "src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
    "dataSrc": "/images/product/minicart-product-64x96.jpeg",
    "alt": "product name goes here"
  },
  "productName": "Some product name",
  "productPrice": "$85.00",
  "productQty": {
    "visible": false,
    "class": "input--inline minicart-product__input margin-bottom-0 margin-right-m",
    "label": {
      "class": "minicart-product__label",
      "text": "Qty:",
      "hidden": false
    },
    "field": {
      "attributes": "aria-label=\"Change the quantity\" min=\"1\"",
      "class": "minicart-product__field",
      "id": "mini-qty",
      "name": "mini-qty",
      "placeholder": "32",
      "type": "text"
    }
  },
  "updateQty": {
    "visible": false,
    "tag": "button",
    "text": "Update",
    "class": "button--secondary minicart-product__update",
    "attributes": "type=\"button\""
  },
  "attributes": {
    "class": "minicart-product__attributes-list"
  },
  "editIcon": {
    "tag": "a",
    "attributes": "href=\"#\" aria-label=\"edit product in your shopping cart\"",
    "text": "",
    "icon": {
      "id": "edit",
      "title": "Edit pencil",
      "class": "button__icon",
      "hidden": true
    }
  },
  "removeIcon": {
    "tag": "a",
    "attributes": "href=\"#\" aria-label=\"remove this product from your shopping cart\"",
    "text": "",
    "icon": {
      "id": "remove",
      "title": "Trash bin",
      "class": "button__icon",
      "hidden": true
    }
  },
  "configurable": true
}
  • Content: 
    $minicart-product__padding                    : $spacer--medium 0 !default;
$minicart-product__border                     : $border-base !default;
$minicart-product__spacer                     : $spacer !default;

$minicart-product__image-width                : auto !default;
$minicart-product__image-max-width            : 100% !default;
$minicart-product__image-flex-basis           : 78px !default;

$minicart-product__data-padding               : 0 0 0 $spacer--medium !default;

$minicart-product--info-margin                : 0 0 $spacer !default;

$minicart-product__name-line-height           : 24px !default;
$minicart-product__name-font-size             : $font-size-base !default;
$minicart-product__name-text-transform        : none !default;

$minicart-product__link-text-decoration       : none !default;
$minicart-product__link-font-weight             : $font-weight-base !default;
$minicart-product__link-color                   : $color-primary !default;

$minicart-product__attributes-button-margin     : 0 !default;
$minicart-product__attributes-button-padding    : 0 !default;
$minicart-product__attributes-button-color      : $blue !default;
$minicart-product__attributes-button-bg-color   : $white !default;
$minicart-product__attributes-button-font-size  : $font-size-small !default;

$minicart-product__attributes-color             : $gray-dark !default;
$minicart-product__attributes-font-size         : $font-size-small !default;
$minicart-product__attributes-line-height       : 24px !default;
$minicart-product__attributes-label-padding     : 0 $spacer 0 0 !default;
$minicart-product__attributes-label-font-weight : $font-weight-bold !default;
$minicart-product__attributes-value-padding     : 0 !default;
$minicart-product__attributes-list-padding      : 0 !default;
$minicart-product__attributes-list-icon-margin  : 0 0 0 $spacer !default;

$minicart-product__price-font-size              : $font-size-base !default;
$minicart-product__price-font-weight            : $font-weight-bold !default;
$minicart-product__price-font-size--old         : $font-size-small !default;
$minicart-product__price-align                  : center !default;

$minicart-product__action-icon-color            : $color-secondary !default;
$minicart-product__action-icon-color--active    : $white !default;

$minicart-product__field-max-width              : 56px !default;

$minicart-product__qty-margin                   : 0 0 $spacer !default;
$minicart-product__qty-margin\@medium           : 0 !default;

$minicart-product__update-btn-padding           : 0 $spacer !default;
$minicart-product__update-btn-padding\@medium   : 0 $spacer--large !default;
$minicart-product__update-btn-max-height        : 48px !default;
  • URL: /components/raw/minicart-product/_minicart-product-variables.scss
  • Filesystem Path: build/components/Organisms/minicart-product/_minicart-product-variables.scss
  • Size: 2.7 KB
  • Content: 
    @import 'minicart-product-variables';

.minicart-product {
    display: flex;
    width: 100%;
    flex-flow: column wrap;
    padding: $minicart-product__padding;
    border-bottom: $minicart-product__border;

    &:last-child {
        border-bottom: none;
    }

    &__item {
        display: flex;
        flex-flow: row nowrap;
    }

    &__image {
        flex-basis: $minicart-product__image-flex-basis;
        flex-shrink: 0;

        img {
            width: $minicart-product__image-width;
            max-width: $minicart-product__image-max-width;
            height: auto;
        }
    }

    &__image-link {
        display: flex;
        align-items: center;
    }

    &__data {
        display: flex;
        flex-flow: column wrap;
        flex-grow: 1;
        padding: $minicart-product__data-padding;
    }

    &__info {
        margin: $minicart-product__info-margin;

        @include mq($screen-m) {
            flex-grow: 1;
        }
    }

    &__name {
        margin-bottom: $minicart-product__spacer;
        font-size: $minicart-product__name-font-size;
        line-height: $minicart-product__name-line-height;
        text-transform: $minicart-product__name-text-transform;
    }

    &__link {
        text-decoration: $minicart-product__link-text-decoration;
        font-weight: $minicart-product__link-font-weight;
        color: $minicart-product__link-color;
    }

    &__attributes {
        margin-bottom: $minicart-product__spacer;

        display: none; //hidden due to lack of design TO DO
    }

    &__attributes-button {
        display: flex;
        align-items: center;
        margin: $minicart-product__attributes-button-margin;
        padding: $minicart-product__attributes-button-padding;
        font-size: $minicart-product__attributes-button-font-size;

        .dropdown-list__icon {
            position: static;
            margin: $minicart-product__attributes-list-icon-margin;
            fill: $minicart-product__attributes-button-color;
        }

        &.dropdown-list__label {
            color: $minicart-product__attributes-button-color;
            background-color: $minicart-product__attributes-button-bg-color;

            &.focus-visible,
            &:hover {
                background-color: $minicart-product__attributes-button-bg-color;
            }
        }
    }

    &__attributes-list {
        padding: $minicart-product__attributes-list-padding;

        .list__label,
        .list__value {
            color: $minicart-product__attributes-color;
            font-size: $minicart-product__attributes-font-size;
            line-height: $minicart-product__attributes-line-height;
        }

        .list__label {
            padding: $minicart-product__attributes-label-padding;
            font-weight: $minicart-product__attributes-label-font-weight;
        }

        .list__value {
            padding: $minicart-product__attributes-value-padding;
        }
    }

    &__price {
        display: flex;
        align-items: $minicart-product__price-align;
        font-size: $minicart-product__price-font-size;
        font-weight: $minicart-product__price-font-weight;

        @include mq($screen-m) {
            justify-content: flex-end;
        }

        .price__value {
            display: block;
            font-size: $minicart-product__price-font-size;

            @include mq($screen-m) {
                text-align: right;
            }

            &--old {
                font-size: $minicart-product__price-font-size--old;

                @include mq($screen-m) {
                    margin: 0;
                }
            }
        }
    }

    &__bottom {
        display: flex;
        flex-direction: column;
        width: 100%;

        @include mq($screen-m) {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    &__actions {
        display: flex;
    }

    &__field {
        max-width: $minicart-product__field-max-width;
    }

    &__qty {
        display: flex;
        margin: $minicart-product__qty-margin;

        @include mq($screen-m) {
            margin: $minicart-product__qty-margin\@medium;
        }
    }

    &__name-wrapper {
        display: flex;
        flex-direction: column;

        @include mq($screen-m) {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }
    }

    &__update {
        max-height: $minicart-product__update-btn-max-height;
        padding: $minicart-product__update-btn-padding;

        @include mq($screen-m) {
            padding: $minicart-product__update-btn-padding\@medium;
        }
    }
}
  • URL: /components/raw/minicart-product/_minicart-product.scss
  • Filesystem Path: build/components/Organisms/minicart-product/_minicart-product.scss
  • Size: 4.7 KB

No notes defined.