cruc components for Magento 2

Minicart Content 

<div class="minicart-content ">
    <div class="minicart-content__top" id="minicart-title">
        <h2 class="minicart-content__heading">
            Shopping cart
        </h2>

        <div class="minicart-content__counter">
            2 items
        </div>
    </div>
    <div class="minicart-content__middle" id="minicart-products">
        <div class="minicart-content__products-list">
            <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 class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-1">
        Qty:
    </label>
                                <input class="input__field minicart-product__field" id="mini-qty-1" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                            </div>

                            <button class="button button--secondary minicart-product__update" type="button">
    Update
</button>

                        </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 xlink: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 xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>

</a>

                        </div>
                    </div>
                </div>
            </div>

            <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 2 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 class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-2">
        Qty:
    </label>
                                <input class="input__field minicart-product__field" id="mini-qty-2" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                            </div>

                            <button class="button button--secondary minicart-product__update" type="button">
    Update
</button>

                        </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 xlink: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 xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>

</a>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="minicart-content__bottom">
        <div class="minicart-content__summary">
            <div class="minicart-content__summary-label">
                Cart Subtotal
            </div>
            <div class="minicart-content__summary-value">
                $ 200.00
            </div>
        </div>
        <div class="minicart-content__actions">
            <a href="/edit" class="
                    button
                    button--secondary
                    minicart-content__edit
                    minicart-content__action-button
                ">
                View and edit cart
            </a>
            <button class="button minicart-content__action-button minicart-content__checkout" type="button">
    Go to Checkout
</button>

        </div>
    </div>
</div>
 
<div
    class="minicart-content {{ class }}"
    {{{ attributes }}}
>
    <div class="minicart-content__top" id="minicart-title">
        {{ render '@heading' heading }}
        <div class="minicart-content__counter">
            {{ counter}}
        </div>
    </div>
    <div class="minicart-content__middle" id="minicart-products">
        <div class="minicart-content__products-list">
            {{#each products}}
                {{ render '@minicart-product' this merge=true }}
            {{/each}}
        </div>
    </div>
    <div class="minicart-content__bottom">
        <div class="minicart-content__summary">
            <div class="minicart-content__summary-label">
                {{ total }}
            </div>
            <div class="minicart-content__summary-value">
                {{ price }}
            </div>
        </div>
        <div class="minicart-content__actions">
            <a
                href="{{ editButton.link }}"
                class="
                    button
                    button--secondary
                    minicart-content__edit
                    minicart-content__action-button
                "
            >
                {{ editButton.label }}
            </a>
            {{ render '@button' checkoutButton }}
        </div>
    </div>
</div>
 
{
  "total": "Cart Subtotal",
  "heading": {
    "tag": "h2",
    "class": "minicart-content__heading",
    "text": "Shopping cart"
  },
  "counter": "2 items",
  "price": "$ 200.00",
  "editButton": {
    "label": "View and edit cart",
    "link": "/edit"
  },
  "checkoutButton": {
    "tag": "button",
    "class": "minicart-content__action-button minicart-content__checkout",
    "attributes": "type=\"button\"",
    "text": "Go to Checkout"
  },
  "products": [
    {
      "productQty": {
        "field": {
          "id": "mini-qty-1"
        }
      },
      "attributes": {
        "id": "test-1",
        "dropdowns": [
          {
            "itemAttributes": "aria-expanded=\"false\" aria-controls=\"see-details-1\"",
            "id": "see-details-1"
          }
        ]
      }
    },
    {
      "productName": "Some product 2 name",
      "productQty": {
        "field": {
          "id": "mini-qty-2"
        }
      },
      "attributes": {
        "id": "test-2",
        "dropdowns": [
          {
            "itemAttributes": "aria-expanded=\"false\" aria-controls=\"see-details-2\"",
            "id": "see-details-2"
          }
        ]
      }
    }
  ]
}
  • Content: 
    $minicart-content__height                      : auto !default;
$minicart-content__font-size                   : $font-size-base !default;
$minicart-content__padding                     : 0 !default;

//minicart-content top
$minicart-content__top-padding                 : 0 0 $spacer--semi-large 0 !default;
$minicart-content__top-margin                  : 0 !default;
$minicart-content__top-border                  : $border-base !default;
$minicart-content__top-border-width            : 0 0 $border-width-base 0 !default;

//minicart-content middle
$minicart-content__middle-padding              : $spacer--semi-medium 0 !default;
$minicart-content__middle-margin               : 0 0 80px !default;
$minicart-content__middle-margin\@medium       : 0 !default;
$minicart-content__middle-border               : 0 !default;
$minicart-content__middle-border-width         : 0 !default;

//minicart-content bottom
$minicart-content__bottom-width                : 100% !default;
$minicart-content__bottom-padding              : $spacer--medium !default;
$minicart-content__bottom-padding\@medium      : $spacer--semi-large 0 0 !default;
$minicart-content__bottom-margin               : 0 !default;
$minicart-content__bottom-background           : $white !default;
$minicart-content__bottom-border               : $border-base !default;
$minicart-content__bottom-border-width         : $border-width-base 0 0 0 !default;
$minicart-content__bottom-box-shadow           : 0 -2px 6px 0 rgba(0, 0, 0, 0.1) !default;
$minicart-content__bottom-box-shadow\@medium   : none !default;

//minicart-content heading
$minicart-content__heading-font-size           : $font-size-large !default;
$minicart-content__heading-font-size\@medium   : $font-size-extra-large !default;
$minicart-content__heading-font-weight         : $font-weight-base !default;
$minicart-content__heading-margin              : 0 !default;
$minicart-content__heading-height              : 48px !default;
$minicart-content__heading-padding-right       : 70px !default;
$minicart-content__heading-padding-left        : 0 !default;

//minicart-content counter
$minicart-content__counter-font-size           : $font-size-base !default;
$minicart-content__counter-font-weight         : $font-weight-base !default;
$minicart-content__counter-margin              : 0 !default;
$minicart-content__counter-height              : 24px !default;
$minicart-content__counter-padding-right       : 0 !default;
$minicart-content__counter-padding-left        : 0 !default;

//minicart summary
$minicart-content__summary-color               : $color-primary !default;
$minicart-content__summary-label-text-transform: none !default;
$minicart-content__summary-label-color         : $color-primary !default;
$minicart-content__summary-label-font-weight   : $font-weight-base !default;
$minicart-content__summary-value-color         : $color-primary !default;
$minicart-content__summary-value-font-weight   : $font-weight-bold !default;

$minicart-content__summary-margin              : 0 0 $spacer--medium !default;
$minicart-content__summary-margin\@medium      : 0 0 $spacer--semi-large !default;
$minicart-content__summary-font-size           : $font-size-medium !default;

//minicart actions
$minicart-content__actions-padding             : 0 !default;
$minicart-content__action-flex-flow            : row nowrap !default;
$minicart-content__action-justify              : space-between !default;
$minicart-content__action-button-width         : calc(50% - #{$spacer}) !default;
$minicart-content__action-button-padding       : 0 $spacer--semi-medium !default;

//minicart products
$minicart-content__products-list-padding       : 0 $spacer !default;
$minicart-content__products-list-margin        : 0 !default;
  • URL: /components/raw/minicart-content/_minicart-content-variables.scss
  • Filesystem Path: build/components/Organisms/minicart-content/_minicart-content-variables.scss
  • Size: 3.8 KB
  • Content: 
    @import 'minicart-content-variables';

.minicart-content {
    height: $minicart-content__height;
    font-size: $minicart-content__font-size;
    padding: $minicart-content__padding;
    display: flex;
    flex-direction: column;
    max-height: 100%;

    &__top {
        padding: $minicart-content__top-padding;
        margin: $minicart-content__top-margin;
        border: $minicart-content__top-border;
        border-width: $minicart-content__top-border-width;
    }

    &__middle {
        padding: $minicart-content__middle-padding;
        margin: $minicart-content__middle-margin;
        border: $minicart-content__middle-border;
        border-width: $minicart-content__middle-border-width;
        overflow-y: auto;
        height: auto !important; // sass-lint:disable-line no-important

        @include hide-scrollbar();

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

            @include hide-scrollbar(false);
        }
    }

    &__bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: $minicart-content__bottom-width;
        padding: $minicart-content__bottom-padding;
        margin: $minicart-content__bottom-margin;
        background: $minicart-content__bottom-background;
        border: $minicart-content__bottom-border;
        border-width: $minicart-content__bottom-border-width;
        box-shadow: $minicart-content__bottom-box-shadow;

        @include mq($screen-m) {
            position: relative;
            padding: $minicart-content__bottom-padding\@medium;
            box-shadow: $minicart-content__bottom-box-shadow\@medium;
        }
    }

    &__heading {
        font-size: $minicart-content__heading-font-size;
        font-weight: $minicart-content__heading-font-weight;
        margin: $minicart-content__heading-margin;

        @include font-padding(
            $minicart-content__heading-font-size,
            $minicart-content__heading-height,
            $minicart-content__heading-padding-right,
            $minicart-content__heading-padding-left
        );

        @include mq($screen-m) {
            font-size: $minicart-content__heading-font-size\@medium;

            @include font-padding(
                $minicart-content__heading-font-size\@medium,
                $minicart-content__heading-height,
                $minicart-content__heading-padding-right,
                $minicart-content__heading-padding-left
            );
        }
    }

    &__counter {
        font-size: $minicart-content__counter-font-size;
        font-weight: $minicart-content__counter-font-weight;
        margin: $minicart-content__counter-margin;

        @include font-padding(
            $minicart-content__counter-font-size,
            $minicart-content__counter-height,
            $minicart-content__counter-padding-right,
            $minicart-content__counter-padding-left
        );
    }

    &__summary {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        margin: $minicart-content__summary-margin;
        font-size: $minicart-content__summary-font-size;

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

    &__summary-label {
        color: $minicart-content__summary-label-color;
        font-weight: $minicart-content__summary-label-font-weight;
        text-transform: $minicart-content__summary-label-text-transform;
    }

    &__summary-value {
        color: $minicart-content__summary-value-color;
        font-weight: $minicart-content__summary-value-font-weight;
    }

    &__actions {
        display: flex;
        flex-flow: $minicart-content__action-flex-flow;
        justify-content: $minicart-content__action-justify;
        padding: $minicart-content__actions-padding;
    }

    &__action-button {
        width: $minicart-content__action-button-width;
        padding: $minicart-content__action-button-padding;
    }

    &__products-list {
        margin: $minicart-content__products-list-margin;
        padding: $minicart-content__products-list-padding;
    }
    &__extra-actions {
        display: none;
    }
}
  • URL: /components/raw/minicart-content/_minicart-content.scss
  • Filesystem Path: build/components/Organisms/minicart-content/_minicart-content.scss
  • Size: 4.2 KB

There are no notes for this item.