Catalog Grid Item: Default

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="catalog-grid-item " tabindex="0">

    <a href="#" class="catalog-grid-item__link" tabindex="-1">
        <div class="lazyload-wrapper catalog-grid-item__image-wrapper">
            <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/catalog-grid-item/product-1_320_312.jpg" alt="image alt text">
        </div>

    </a>

    <section class="catalog-grid-item__details">
        <h2 class="catalog-grid-item__name">
            <a href="#" class="catalog-grid-item__name-link">
                Some product name - very long name because that&#x27;s important
            </a>
        </h2>

        <div class="catalog-grid-item__price">
            <div class="price  ">
                <span class="price__value ">
                    $
                    1 400

                </span>
            </div>

        </div>

        <div class="rating catalog-grid-item__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
            <div class="rating__star " role="presentation" style="width: 72%">
                <span class="
                rating__indicator
                
            "></span>
            </div>
        </div>
        <div class="rating__title">
            4/5 sterren
        </div>

        <div class="catalog-grid-item__options">
            <div class="swatch ">

                <div class="swatch__wrapper" aria-label="Size" tabindex="0" aria-activedescendant="opt-size-s" aria-required="true" role="listbox" aria-invalid="false">
                    <div class="swatch__option-container " id="opt-size-xs" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option ">
                            XS
                        </div>
                    </div>
                    <div class="swatch__option-container selected" id="opt-size-s" tabindex="0" role="option" aria-selected="true">
                        <div class="swatch__option ">
                            S
                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-size-m" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option ">
                            M
                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-size-l" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option ">
                            L
                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-size-xl" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option ">
                            XL
                        </div>
                    </div>
                </div>
            </div>

            <script src="/components/raw/swatch/swatch.js"></script>

            <div class="swatch ">

                <div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
                    <div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-orange.jpg)">

                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-green.jpg)">

                        </div>
                    </div>
                    <div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
                        <div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-red.jpg)">

                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-color-white-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option swatch__option--image" style="background-image: url(../../images/swatch/swatch-white.jpg)">

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

            <script src="/components/raw/swatch/swatch.js"></script>

        </div>

        <div class="catalog-grid-item__actions">
            <form action="#" class="catalog-grid-item__primary-form">
                <button class="button button button--secondary catalog-grid-item__primary-action">
                    <span class="catalog-grid-item__cart-text">Add to Cart</span>
                    <svg class="icon icon catalog-grid-item__cart-icon" role="img">
                        <title>Shopping cart</title>
                        <use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
                    </svg>

                </button>

            </form>

            <div class="catalog-grid-item__secondary-action">
                <button class="button button--icon" type="button" aria-label="Add to Wish List">

                    <svg class="icon button__icon" role="img">
                        <title>Heart</title>
                        <use xlink:href="/images/icons-sprite.svg#heart"></use>
                    </svg>

                </button>

                <button class="button button--icon" type="button" aria-label="Add to compare">

                    <svg class="icon button__icon" role="img">
                        <title>Compare</title>
                        <use xlink:href="/images/icons-sprite.svg#compare"></use>
                    </svg>

                </button>

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


        <{{{ tag }}} class="catalog-grid-item {{ class }}" tabindex="0">


<a
        href="#"
        class="catalog-grid-item__link"
        tabindex="-1"
>
    {{ render '@image' image merge=true }}
</a>

<section class="catalog-grid-item__details">
    <h2 class="catalog-grid-item__name">
        <a
                href="#"
                class="catalog-grid-item__name-link"
        >
            {{ name }}
        </a>
    </h2>

    <div class="catalog-grid-item__price">
        {{ render (component price.name) price.context }}
    </div>

    {{#if rating }}
        {{ render '@rating' rating merge=true }}
    {{/if }}

    {{#if swatches }}
        <div class="catalog-grid-item__options">
            {{ render '@swatch' }}
            {{ render '@swatch--image' }}
        </div>
    {{/if }}

    <div class="catalog-grid-item__actions">
        <form action="#" class="catalog-grid-item__primary-form">
            {{ render '@button' primaryAction }}
        </form>

        <div class="catalog-grid-item__secondary-action">
            {{
            render '@button--icon'
                   secondaryActions.wishlist
                   merge=true
            }}

            {{
            render '@button--icon'
                   secondaryActions.compare
                   merge=true
            }}
        </div>
    </div>
</section>
</{{{ tag }}}>


        
            
            {
  "tag": "div",
  "class": "",
  "badge": {
    "name": "badge--new",
    "context": {
      "class": "badge catalog-grid-item__badge",
      "text": "NEW"
    }
  },
  "image": {
    "wrapperClass": "catalog-grid-item__image-wrapper",
    "dataSrc": "/images/catalog-grid-item/product-1_320_312.jpg"
  },
  "name": "Some product name - very long name because that's important",
  "price": {
    "name": "price",
    "context": {
      "regularPrice": "1 400",
      "specialPrice": "",
      "prefix": {
        "tag": "",
        "text": "$"
      },
      "suffix": {
        "tag": "",
        "text": ""
      }
    }
  },
  "rating": {
    "class": "catalog-grid-item__rating"
  },
  "swatches": true,
  "primaryAction": {
    "tag": "button",
    "text": "<span class=\"catalog-grid-item__cart-text\">Add to Cart</span>",
    "class": "button button--secondary catalog-grid-item__primary-action",
    "icon": {
      "id": "shopping-cart",
      "title": "Shopping cart",
      "class": "icon catalog-grid-item__cart-icon"
    }
  },
  "secondaryActions": {
    "wishlist": {
      "tag": "button",
      "class": "button--icon",
      "icon": {
        "id": "heart",
        "title": "Heart",
        "class": "button__icon"
      },
      "attributes": "type=\"button\" aria-label=\"Add to Wish List\""
    },
    "compare": {
      "tag": "button",
      "class": "button--icon",
      "icon": {
        "id": "compare",
        "title": "Compare",
        "class": "button__icon"
      },
      "attributes": "type=\"button\" aria-label=\"Add to compare\""
    }
  }
}

File:

Content:


                                $catalog-grid-item__base-spacing                  : $spacer !default;
$catalog-grid-item__padding                       : 0 !default;
$catalog-grid-item__border                        : 1px solid $gray-lightest !default;
$catalog-grid-item__font-size                     : $font-size-base !default;
$catalog-grid-item__font-size\@large              : 16px !default;
$catalog-grid-item__line-height                   : 1.5 !default;
$catalog-grid-item__font-weight                   : $font-weight-bold !default;

$catalog-grid-item__badge-top-position            : $spacer--medium !default;
$catalog-grid-item__badge-left-position           : 0 !default;
$catalog-grid-item__badge-z-index                 : 1 !default;
$catalog-grid-item__badge-padding                 : 5px 12px !default;
$catalog-grid-item__badge-font-size               : $font-size-small !default;
$catalog-grid-item__badge-border-radius           : 0 !default;

$catalog-grid-item__link-width                    : 100% !default;
$catalog-grid-item__link-z-index--focus           : 0 !default;
$catalog-grid-item__link-outline--focus           : none !default;

$catalog-grid-item__image-margin                  : 0 auto !default;
$catalog-grid-item__image-width                   : auto !default;
$catalog-grid-item__image-width--lazyload         : 100% !default;
$catalog-grid-item__image-height--lazyload        : auto !default;
$catalog-grid-item__image-height                  : auto !default;

$catalog-grid-item__loader-margin-top             : 30% !default;

$catalog-grid-item__link-name-overflow            : hidden !default;
$catalog-grid-item__link-name-overflow--visible   : visible !default;
$catalog-grid-item__link-name-white-space         : nowrap !default;
$catalog-grid-item__link-name-white-space--visible: normal !default;
$catalog-grid-item__link-name-text-overflow       : ellipsis !default;

$catalog-grid-item__content-bg-color              : $white !default;
$catalog-grid-item__content-padding               : $spacer !default;
$catalog-grid-item__content-width                 : 100% !default;
$catalog-grid-item__content-top\@large            : 100% !default;
$catalog-grid-item__content-height                : 67px !default;
$catalog-grid-item__content-height\@large         : 73px !default;
$catalog-grid-item__content-translateY            : translateY(-$catalog-grid-item__content-height) !default;
$catalog-grid-item__content-translateY\@large     : translateY(-$catalog-grid-item__content-height\@large) !default;
$catalog-grid-item__content-translateY--active    : translateY(-100%) !default;

$catalog-grid-item__name-color                    : $font-color-base !default;
$catalog-grid-item__name-font-weight              : $font-weight-normal !default;
$catalog-grid-item__name-margin-botttom           : $spacer !default;
$catalog-grid-item__name-padding--bigger          : $spacer--medium 0 !default;

$catalog-grid-item__rating-margin-bottom          : $spacer !default;
$catalog-grid-item__price-margin-bottom           : $spacer !default;
$catalog-grid-item__price-label-font-weight       : $font-weight-normal !default;

$catalog-grid-item__primary-padding               : 0 $spacer !default;
$catalog-gird-item__primary-form-margin           : 0 !default;
$catalog-grid-item__primary-icon-fill             : $gray-darker !default;

$catalog-grid-item__action-size                   : 48px !default;
$catalog-grid-item__action-padding                : 0 !default;
$catalog-grid-item__action-background             : transparent !default;
$catalog-grid-item__action-border                 : none !default;
$catalog-grid-item__action-cursor                 : pointer !default;
$catalog-grid-item__action-icon-size              : 18px !default;
$catalog-grid-item__action-icon-transition        : $transition-base !default;
$catalog-grid-item__action-icon-fill              : $gray-darker !default;
$catalog-grid-item__action-icon-fill-hover        : $green !default;

$catalog-grid-item__IE-margin                     : 0 $spacer $spacer--medium $spacer !default;
$catalog-grid-item__IE-width                      : calc(50% - #{$spacer--medium} - 1px) !default;
$catalog-grid-item__IE-width\@medium              : calc(100% / 3 - #{$spacer--medium} - 1px) !default;

.catalog-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: $catalog-grid-item__border;
    padding: $catalog-grid-item__padding;
    overflow: hidden;

    @include isIE() {
        margin: $catalog-grid-item__IE-margin;
        width: $catalog-grid-item__IE-width;

        @include mq($screen-m) {
            width: $catalog-grid-item__IE-width\@medium;
        }
    }

    @include mq($screen-m) {
        flex-direction: row;

        &:hover,
        &:focus-within {
            .catalog-grid-item__details {
                transform: $catalog-grid-item__content-translateY--active;
            }

            .catalog-grid-item__name-link {
                overflow: $catalog-grid-item__link-name-overflow--visible;
                white-space: $catalog-grid-item__link-name-white-space--visible;
            }
        }

        @include isIE() {
            &:hover {
                .catalog-grid-item__details {
                    transform: $catalog-grid-item__content-translateY--active;
                }

                .catalog-grid-item__name-link {
                    overflow: $catalog-grid-item__link-name-overflow--visible;
                    white-space: $catalog-grid-item__link-name-white-space--visible;
                }
            }
        }
    }

    &__badge {
        position: absolute;
        top: $catalog-grid-item__badge-top-position;
        left: $catalog-grid-item__badge-left-position;
        z-index: $catalog-grid-item__badge-z-index;
        border-radius: $catalog-grid-item__badge-border-radius;
        padding: $catalog-grid-item__badge-padding;
        font-size: $catalog-grid-item__badge-font-size;
    }

    &__link {
        display: flex;
        justify-content: center;
        flex: 1 1 auto;
        align-items: center;
        align-self: stretch;
        width: $catalog-grid-item__link-width;

        &:focus {
            z-index: $catalog-grid-item__link-z-index--focus;
            outline: $catalog-grid-item__link-outline--focus;
        }
    }

    &__image-wrapper {
        @include mq($screen-m) {
            &:after {
                content: "";
                display: block;
                height: $catalog-grid-item__content-height;
                @include mq($screen-xxl) {
                    height: $catalog-grid-item__content-height\@large;
                }
            }
        }

        .image {
            margin: $catalog-grid-item__image-margin;
            width: $catalog-grid-item__image-width;
            height: $catalog-grid-item__image-height;
        }

        .lazyload,
        .lazyloading {
            width: $catalog-grid-item__image-width--lazyload;
            height: $catalog-grid-item__image-height--lazyload;
        }

        .loader__circle {
            margin-top: $catalog-grid-item__loader-margin-top;
        }
    }

    &__name {
        font-weight: $catalog-grid-item__name-font-weight;
        font-size: $catalog-grid-item__font-size;
        line-height: $catalog-grid-item__line-height;
        margin-bottom: $catalog-grid-item__name-margin-botttom;

        @include mq($screen-xxl) {
            font-size: $catalog-grid-item__font-size\@large;
        }

        &--bigger {
            padding: $catalog-grid-item__name-padding--bigger;
        }
    }

    &__name-link {
        display: block;
        color: $catalog-grid-item__name-color;

        @include mq($screen-m) {
            overflow: $catalog-grid-item__link-name-overflow;
            white-space: $catalog-grid-item__link-name-white-space;
            text-overflow: $catalog-grid-item__link-name-text-overflow;
        }
    }

    &__rating {
        margin-bottom: $catalog-grid-item__rating-margin-bottom;
    }

    &__price {
        margin-bottom: $catalog-grid-item__price-margin-bottom;
        padding: $catalog-grid-item__padding;
        font-size: $catalog-grid-item__font-size;
        line-height: $catalog-grid-item__line-height;
        font-weight: $catalog-grid-item__font-weight;
        white-space: nowrap;

        @include mq($screen-xxl) {
            font-size: $catalog-grid-item__font-size\@large;
        }

        .price-label {
            font-weight: $catalog-grid-item__price-label-font-weight;
        }
    }

    &__details {
        padding: $catalog-grid-item__content-padding;
        background: $catalog-grid-item__content-bg-color;
        transition: $transition-base;

        @include mq($screen-m) {
            position: absolute;
            top: $catalog-grid-item__content-top\@large;
            transform: $catalog-grid-item__content-translateY;
            width: $catalog-grid-item__content-width;
            border-top: $catalog-grid-item__border;
        }

        @include mq($screen-xxl) {
            transform: $catalog-grid-item__content-translateY\@large;
        }
    }

    &__options {
        .swatch {
            margin: $catalog-grid-item__base-spacing 0;
        }
    }

    &__actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    &__primary-form {
        margin: $catalog-gird-item__primary-form-margin;
        @include mq($screen-m) {
            flex: 1;
        }
    }

    &__primary-action {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: $catalog-grid-item__primary-padding;

        &:hover,
        &:focus {
            .icon {
                fill: $catalog-grid-item__primary-icon-fill;
            }
        }
    }

    &__cart-icon {
        @include mq($screen-m) {
            display: block;
        }
    }

    &__cart-text {
        display: none;
        @include mq($screen-m) {
            display: block;
        }
    }

    &__secondary-action {
        display: flex;
        align-items: center;
        justify-content: center;
        .button {
            height: $catalog-grid-item__action-size;
            width: $catalog-grid-item__action-size;
            padding: $catalog-grid-item__action-padding;
            background: $catalog-grid-item__action-background;
            border: $catalog-grid-item__action-border;
            cursor: $catalog-grid-item__action-cursor;
            &:hover,
            &:focus {
                .button__icon {
                    fill: $catalog-grid-item__action-icon-fill-hover;
                }
            }
            .button__icon {
                width: $catalog-grid-item__action-icon-size;
                height: $catalog-grid-item__action-icon-size;
                transition: $catalog-grid-item__action-icon-transition;
                fill: $catalog-grid-item__action-icon-fill;
            }
        }
    }
}

URL: /components/raw/catalog-grid-item/_catalog-grid-item.scss
Filesystem Path: build/components/03-modules/catalog-grid-item/_catalog-grid-item.scss
Size: 11.1 KB

Handle: @catalog-grid-item--default
Variants (2): Default , Special Price
Preview:
- With layout
- Component only
Filesystem Path: build/components/03-modules/catalog-grid-item/catalog-grid-item.hbs
References (6): @image, @rating, @swatch, @swatch--image, @button, @button--icon
Referenced by (1): @grid-view

There are no notes for this item.