<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.