Alpaca components for Magento 2

Cart List Item 

<section class="cart-list-item " aria-label="product in your shopping cart">
    <div class="cart-list-item__left">
        <picture class="image cart-list-item__image">
            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-64x96.jpg" media="(max-width: 480px)" />
            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-80x120.jpg" media="(max-width: 768px)" />
            <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/cart-view/product-128x192.jpg" media="" />

            <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/cart-view/product-64x96.jpg" alt="Image of product Bluzka &#x27;ONLSANSA SINGLET WVN&#x27;" />
        </picture>

        <div class="cart-list-item__content">
            <h4 class="cart-list-item__name">
                Bluzka &#x27;ONLSANSA SINGLET WVN&#x27;
            </h4>

            <div class="cart-list-item__attributes margin-bottom-xs">
                <span class="cart-list-item__attribute">
                    Size: XXL
                </span>
                <span class="cart-list-item__attribute">
                    Color: Red
                </span>
            </div>
        </div>
    </div>

    <div class="cart-list-item__right">
        <div class="cart-list-item__details">
            <div class="cart-list-item__wrapper">
                <span class="cart-list-item__label margin-right-xs">
                    Price:
                </span>

                <span class="cart-list-item__price">
                    $159.95
                </span>
            </div>

            <div class="input input--inline cart-list-item__qty">
                <label class="
            label
            input__label
            cart-list-item__label
        " for="qty">
                    Qty
                </label>
                <input class="input__field cart-list-item__input text-center" id="qty" name="qty" type="number" placeholder="" value="1">
            </div>

            <div class="cart-list-item__wrapper">
                <span class="cart-list-item__label margin-right-xs">
                    Subtotal:
                </span>

                <span class="cart-list-item__total">
                    $159.95
                </span>
            </div>
        </div>

        <div class="cart-list-item__actions">
            <button class="button button--icon button button--icon cart-list-item__action" type="button" aria-label="Clickt to edit this product">
                <svg class="icon button__icon cart-list-item__action-icon" role="presentation" focusable="false">
                    <title>Edit product</title>
                    <use href="/images/icons-sprite.svg#edit"></use>
                </svg>

            </button>

            <button class="button button--icon button button--icon cart-list-item__action" type="button" aria-label="Click to remove this product">
                <svg class="icon button__icon cart-list-item__action-icon" role="presentation" focusable="false">
                    <title>Remove product</title>
                    <use href="/images/icons-sprite.svg#remove"></use>
                </svg>

            </button>

            <div id="gift-options-dropdown" class="dropdown-list dropdown-list--detailed-content cart-list-item__gift-dropdown">
                <ul class="dropdown-list__list">
                    <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                        <button class="dropdown-list__label " type="button" aria-expanded="false" aria-controls="dropdown-detailed-content-1">
                            Gift options

                            <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                <title>Arrow Down</title>
                                <use href="/images/icons-sprite.svg#angle-down"></use>
                            </svg>

                        </button>

                        <div id="dropdown-detailed-content-1" class="dropdown-list__content " aria-hidden="true">
                            <div class="paragraph ">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                </p>
                            </div>

                        </div>
                    </li>
                </ul>
            </div>

            <script type="text/javascript">
                new DropdownList(document.getElementById('gift-options-dropdown'));
            </script>

        </div>
    </div>
</section>
 
<section class="cart-list-item {{ class }}" {{{ attributes }}}>
    <div class="cart-list-item__left">
        {{ render '@image--picture' image }}

        <div class="cart-list-item__content">
            {{ render '@heading' productName }}

            <div class="cart-list-item__attributes {{ productAttributes.class }}">
                {{#each productAttributes.items }}
                    <span class="cart-list-item__attribute">
                        {{ this }}
                    </span>
                {{/each}}
            </div>
        </div>
    </div>

    <div class="cart-list-item__right">
        <div class="cart-list-item__details">
            <div class="cart-list-item__wrapper">
                <span class="cart-list-item__label {{ price.labelClass }}">
                    {{ price.label }}
                </span>

                <span class="cart-list-item__price">
                    {{ price.amount }}
                </span>
            </div>

            {{ render '@input' qty }}

            <div class="cart-list-item__wrapper">
                <span class="cart-list-item__label {{ total.labelClass }}">
                    {{ total.label }}
                </span>

                <span class="cart-list-item__total">
                    {{ total.amount }}
                </span>
            </div>
        </div>

        <div class="cart-list-item__actions">
            {{ render '@button--icon' edit }}

            {{ render '@button--icon' delete }}

            {{ render '@dropdown-list' giftOptionsDropwdown }}
        </div>
    </div>
</section>
 
{
  "attributes": "aria-label=\"product in your shopping cart\"",
  "image": {
    "class": "cart-list-item__image",
    "defaultSrc": "/images/cart-view/product-64x96.jpg",
    "sources": [
      {
        "src": "/images/cart-view/product-64x96.jpg",
        "mediaQuery": "(max-width: 480px)"
      },
      {
        "src": "/images/cart-view/product-80x120.jpg",
        "mediaQuery": "(max-width: 768px)"
      },
      {
        "src": "/images/cart-view/product-128x192.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "Image of product Bluzka 'ONLSANSA SINGLET WVN'"
  },
  "productName": {
    "tag": "h4",
    "text": "Bluzka 'ONLSANSA SINGLET WVN'",
    "class": "cart-list-item__name"
  },
  "productAttributes": {
    "class": "margin-bottom-xs",
    "items": [
      "Size: XXL",
      "Color: Red"
    ]
  },
  "price": {
    "labelClass": "margin-right-xs",
    "label": "Price:",
    "amount": "$159.95"
  },
  "qty": {
    "class": "input--inline cart-list-item__qty",
    "label": {
      "class": "cart-list-item__label",
      "attributes": "",
      "text": "Qty",
      "hidden": false
    },
    "field": {
      "class": "cart-list-item__input text-center",
      "id": "qty",
      "name": "qty",
      "type": "number",
      "attributes": "value=\"1\""
    }
  },
  "total": {
    "labelClass": "margin-right-xs",
    "label": "Subtotal:",
    "amount": "$159.95"
  },
  "edit": {
    "tag": "button",
    "class": "button button--icon cart-list-item__action",
    "icon": {
      "id": "edit",
      "title": "Edit product",
      "class": "button__icon cart-list-item__action-icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Clickt to edit this product\""
  },
  "delete": {
    "tag": "button",
    "class": "button button--icon cart-list-item__action",
    "icon": {
      "id": "remove",
      "title": "Remove product",
      "class": "button__icon cart-list-item__action-icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Click to remove this product\""
  },
  "giftOptionsDropwdown": {
    "id": "gift-options-dropdown",
    "class": "dropdown-list--detailed-content cart-list-item__gift-dropdown",
    "dropdowns": [
      {
        "itemTag": "button",
        "itemAttributes": "type=\"button\" aria-expanded=\"false\"",
        "title": "Gift options",
        "id": "dropdown-detailed-content-1",
        "collapse": {
          "id": "angle-down",
          "title": "Arrow Down",
          "class": "dropdown-list__icon",
          "attributes": "aria-hidden=\"true\""
        },
        "contentElement": "paragraph"
      }
    ]
  }
}
  • Content: 
    $cart-list-item__padding                           : $spacer--semi-medium 0 !default;
$cart-list-item__border-bottom                     : $border-base !default;
$cart-list-item__right-margin                      : 0 0 0 64px !default;
$cart-list-item__right-padding                     : 0 0 0 $spacer--medium !default;
$cart-list-item__right-margin\@medium              : 0 !default;
$cart-list-item__right-padding\@medium             : 0 !default;
$cart-list-item__image-width                       : 64px !default;
$cart-list-item__image-width\@medium               : 80px !default;
$cart-list-item__image-width\@x-large              : 128px !default;
$cart-list-item__content-padding                   : 0 0 0 $spacer--medium !default;
$cart-list-item__content-padding\@x-large          : 0 0 0 $spacer--large !default;
$cart-list-item__content-flex-basis                : calc(100% - 64px) !default;
$cart-list-item__content-flex-basis\@medium        : calc(100% - 80px) !default;
$cart-list-item__content-flex-basis\@x-large       : calc(100% - 128px) !default;
$cart-list-item__name-font-family                  : $font-family-base !default;
$cart-list-item__name-font-size                    : $font-size-medium !default;
$cart-list-item__name-font-weight                  : $font-weight-base !default;
$cart-list-item__name-line-height                  : 24px !default;
$cart-list-item__name-text-transform               : none !default;
$cart-list-item__attribute-color                   : $color-secondary !default;
$cart-list-item__label-color                       : $font-color-base !default;
$cart-list-item__label-line-height                 : 48px !default;
$cart-list-item__price-font-size\@medium           : $font-size-medium !default;
$cart-list-item__qty-margin                        : 0 !default;
$cart-list-item__qty-flex-direction\@medium        : column !default;
$cart-list-item__qty-padding\@x-large              : 0 $spacer--medium 0 0 !default;
$cart-list-item__input-width                       : 90px !default;
$cart-list-item__input-height                      : 48px !default;
$cart-list-item__input-margin                      : 0 $spacer 0 0 !default;
$cart-list-item__total-font-size                   : $font-size-medium !default;
$cart-list-item__total-line-height                 : 48px !default;
$cart-list-item__total-font-weight                 : $font-weight-medium !default;
$cart-list-item__action-margin-right               : 8px !default;
$cart-list-item__actions-display                   : flex !default;
$cart-list-item__actions-display\@medium           : flex !default;
$cart-list-item__gift-dropdown-label-margin\@medium: 0 0 0 auto !default;
  • URL: /components/raw/cart-list-item/_cart-list-item-variables.scss
  • Filesystem Path: build/components/Organisms/cart-list-item/_cart-list-item-variables.scss
  • Size: 2.7 KB
  • Content: 
    @import "cart-list-item-variables";

.cart-list-item {
    padding: $cart-list-item__padding;
    border-bottom: $cart-list-item__border-bottom;

    @include mq($screen-m) {
        display: flex;
        flex-flow: row wrap;
    }

    &__left {
        display: flex;

        @include mq($screen-m) {
            flex-basis: 50%;
        }

        @include mq($screen-xl) {
            flex-basis: 60%;
        }
    }

    &__right {
        margin: $cart-list-item__right-margin;
        padding: $cart-list-item__right-padding;

        @include mq($screen-m) {
            display: flex;
            flex-basis: 50%;
            flex-wrap: wrap;
            align-content: space-between;
            margin: $cart-list-item__right-margin\@medium;
            padding: $cart-list-item__right-padding\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: 40%;
        }
    }

    &__image {
        width: $cart-list-item__image-width;

        @include mq($screen-m) {
            width: $cart-list-item__image-width\@medium;
        }

        @include mq($screen-xl) {
            width: $cart-list-item__image-width\@x-large;
        }
    }

    &__content {
        flex-basis: $cart-list-item__content-flex-basis;
        padding: $cart-list-item__content-padding;

        @include mq($screen-m) {
            flex-basis: $cart-list-item__content-flex-basis\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: $cart-list-item__content-flex-basis\@x-large;
            padding: $cart-list-item__content-padding\@x-large;
        }
    }

    &__name {
        display: block;
        font-family: $cart-list-item__name-font-family;
        font-size: $cart-list-item__name-font-size;
        font-weight: $cart-list-item__name-font-weight;
        line-height: $cart-list-item__name-line-height;
        text-transform: $cart-list-item__name-text-transform;
    }

    &__attribute {
        display: block;
        width: 100%;
        color: $cart-list-item__attribute-color;
    }

    &__label,
    &__price {
        color: $cart-list-item__label-color;
        line-height: $cart-list-item__label-line-height;
    }

    &__price {
        @include mq($screen-m) {
            font-size: $cart-list-item__price-font-size\@medium;
        }
    }

    &__label {
        @include mq($screen-m) {
            @include visually-hidden;
        }
    }

    &__details {
        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
            align-items: flex-start;
        }
    }

    &__wrapper {
        @include mq($screen-m) {
            flex-basis: 40%;
        }

        @include mq($screen-xl) {
            flex-basis: 35%;
        }
    }

    &__qty {
        margin: $cart-list-item__qty-margin;

        @include mq($screen-m) {
            flex-direction: $cart-list-item__qty-flex-direction\@medium;
            flex-basis: 20%;
        }

        @include mq($screen-xl) {
            flex-basis: 30%;
            padding: $cart-list-item__qty-padding\@x-large;
        }
    }

    &__input {
        width: $cart-list-item__input-width;
        height: $cart-list-item__input-height;
        margin: $cart-list-item__input-margin;
        appearance: textfield;

        @include mq($screen-xl) {
            width: 100%;
        }

        &::-webkit-inner-spin-button, // sass-lint:disable-line no-vendor-prefixes
        &::-webkit-outer-spin-button { // sass-lint:disable-line no-vendor-prefixes
            appearance: none;
            margin: 0;
        }
    }

    &__total {
        font-size: $cart-list-item__total-font-size;
        line-height: $cart-list-item__total-line-height;
        font-weight: $cart-list-item__total-font-weight;
    }

    &__actions {
        display: $cart-list-item__actions-display;
        flex-flow: row wrap;

        @include mq($screen-m) {
            display: $cart-list-item__actions-display\@medium;
            flex-basis: 100%;
            justify-content: flex-end;
        }
    }

    &__action {
        margin-right: $cart-list-item__action-margin-right;

        &:last-child {
            margin-right: 0;
        }
    }

    &__attributes-list {
        @extend .minicart-product__attributes-list;
    }

    &__gift-dropdown {
        width: 100%;

        @include mq($screen-m) {
            text-align: right;
        }
        .dropdown-list {
            &__content {
                display: none;
                &._active {
                    display: block;
                }
            }

            &__label {
                @include mq($screen-m) {
                    margin: $cart-list-item__gift-dropdown-label-margin\@medium;
                }

                &._active {
                    .dropdown-list__icon {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }

    &__alert {
        @include visually-hidden();
    }
}
  • URL: /components/raw/cart-list-item/_cart-list-item.scss
  • Filesystem Path: build/components/Organisms/cart-list-item/_cart-list-item.scss
  • Size: 5 KB

No notes defined.