<div class="product-grid-item " tabindex="0">
    <a href="#" class="product-grid-item__link" tabindex="-1">
        <div class="badges product-grid-item__badges">
            <div class="badge ">
                -15%
            </div>

            <div class="badge badge--new">
                New
            </div>

        </div>

        <div class="lazyload-wrapper product-grid-item__image-wrapper">
            <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/product/product-368_552.jpg" alt="image alt text">
        </div>

    </a>

    <section class="product-grid-item__details">
        <div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
            <div class="rating__star " role="presentation" style="width: 72%">
                <span class="
                rating__indicator
                
            "></span>
            </div>
        </div>

        <h2 class="product-grid-item__name">
            <a href="#" class="product-grid-item__name-link">
                Long product name can have maximum 50 caractere...
            </a>
        </h2>
        <div class="swatch__container swatch__container--catalog">
            <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 " style="background-color: #ffa500">

                        </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 " style="background-color: #00ff00">

                        </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 " style="background-color: #ff0000">

                        </div>
                    </div>
                    <div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
                        <div class="swatch__option " style="background-color: #000000">

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

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

        </div>

        <div class="product-grid-item__details-bottom">
            <div class="product-grid-item__price ">
                <div class="price ">
                    <span class="price__value ">
                        $
                        1 400

                    </span>
                </div>

            </div>

            <div class="product-grid-item__actions ">
                <div class="product-grid-item__secondary-action">
                    <button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
                        <svg class="icon button__icon" role="presentation" focusable="false">
                            <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="presentation" focusable="false">
                            <title>Compare</title>
                            <use xlink:href="/images/icons-sprite.svg#compare"></use>
                        </svg>

                    </button>

                </div>

                <form action="#" class="product-grid-item__primary-action">
                    <button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
                        <span class="button__text ">
                            Add to cart
                        </span>

                        <svg class="icon button__icon" role="presentation" focusable="false">
                            <title>Add to cart</title>
                            <use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
                        </svg>

                    </button>

                </form>
            </div>
        </div>
    </section>
</div>
<{{{ tag }}} class="product-grid-item {{ class }}" tabindex="0">
    <a
        href="#"
        class="product-grid-item__link"
        tabindex="-1"
    >
        {{#if productBadges}}
            {{ render '@badges' productBadges }}
        {{/if}}
        {{ render '@image' image merge=true }}
    </a>

    <section class="product-grid-item__details">
        {{#if rating }}
            {{ render '@rating--secondary' rating merge=true }}
        {{/if }}

        <h2 class="product-grid-item__name">
            <a
                href="#"
                class="product-grid-item__name-link"
            >
                {{ name }}
            </a>
        </h2>
        {{#if swatches}}
            <div class="swatch__container swatch__container--catalog">
                {{ render '@swatch--color' }}
            </div>
        {{/if}}

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

            <div class="product-grid-item__actions {{ secondaryActions.class }}">
                <div class="product-grid-item__secondary-action">
                    {{#if secondaryActions.wishlist }}
                        {{
                            render '@button--icon'
                            secondaryActions.wishlist
                            merge=true
                        }}
                    {{/if}}

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

                {{#if secondaryActions.addToCart }}
                    <form action="#" class="product-grid-item__primary-action">
                        {{
                            render '@button--add-to'
                            secondaryActions.addToCart
                            merge=true
                        }}
                    </form>
                {{/if}}
            </div>
        </div>
    </section>
</{{{ tag }}}>
{
  "tag": "div",
  "class": "",
  "swatches": true,
  "productBadges": {
    "class": "product-grid-item__badges",
    "badges": [
      {
        "contentElement": "badge",
        "contentContext": {
          "text": "-15%"
        }
      },
      {
        "contentElement": "badge--new",
        "contentContext": {
          "text": "New"
        }
      }
    ]
  },
  "image": {
    "wrapperClass": "product-grid-item__image-wrapper",
    "dataSrc": "/images/product/product-368_552.jpg"
  },
  "name": "Long product name can have maximum 50 caractere...",
  "price": {
    "name": "price",
    "context": {
      "regularPrice": "1 400",
      "specialPrice": "",
      "prefix": {
        "tag": "",
        "text": "$"
      },
      "suffix": {
        "tag": "",
        "text": ""
      }
    }
  },
  "rating": {
    "class": "product-grid-item__rating rating--secondary"
  },
  "secondaryActions": {
    "wishlist": {
      "tag": "button",
      "class": "add-to-wishlist",
      "icon": {
        "id": "heart",
        "title": "Heart",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"Add to Wish List\""
    },
    "compare": {
      "tag": "button",
      "class": "",
      "icon": {
        "id": "compare",
        "title": "Compare",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"button\" aria-label=\"Add to compare\""
    },
    "addToCart": {
      "tag": "button",
      "class": "button--add-to",
      "icon": {
        "id": "shopping-cart",
        "title": "Add to cart",
        "class": "button__icon",
        "hidden": true
      },
      "attributes": "type=\"submit\" aria-label=\"Add to cart\""
    }
  }
}
  • Content:
    $product-grid-item__width                                   : 100% !default;
    $product-grid-item__padding                                 : 0 !default;
    $product-grid-item__border                                  : $form-element-border-width solid $gray-light !default;
    $product-grid-item__border\@medium                          : $form-element-border-width solid $gray-lightest !default;
    $product-grid-item__border-hover                            : $form-element-border-width solid $gray !default;
    $product-grid-item__border-hover\@medium                    : $form-element-border-width solid $gray-light !default;
    $product-grid-item__transition                              : $transition-base !default;
    
    $product-grid-item__badges-top-position                     : $spacer--medium !default;
    $product-grid-item__badges-left-position                    : 0 !default;
    $product-grid-item__badges-z-index                          : $z-index-low !default;
    
    $product-grid-item__image-margin                            : 0 auto !default;
    $product-grid-item__image-width                             : auto !default;
    $product-grid-item__image-width--lazyload                   : 100% !default;
    $product-grid-item__image-height--lazyload                  : auto !default;
    $product-grid-item__image-height                            : auto !default;
    $product-grid-item__image-bg-hover                          : $black !default;
    $product-grid-item__imgae-layout-color-hover                : rgba($black, 0.2) !default;
    
    $product-grid-item__details-padding                         : 0 $spacer !default;
    $product-grid-item__details-padding\@xl                     : 0 $spacer !default;
    $product-grid-item__details-margin                          : $spacer 0 $spacer--medium !default;
    $product-grid-item__details-border                          : 0 !default;
    $product-grid-item__details-border-width                    : 0 !default;
    
    $product-grid-item__name-color                              : $font-color-base !default;
    $product-grid-item__name-color-hover                        : $font-color-base !default;
    $product-grid-item__name-font-size                          : $font-size-base !default;
    $product-grid-item__name-font-size\@medium                  : $font-size-medium !default;
    $product-grid-item__name-font-weight                        : $font-weight-normal !default;
    $product-grid-item__name-line-height                        : 1.5 !default;
    $product-grid-item__name-text-decoration                    : none !default;
    $product-grid-item__name-text-decoration-hover              : none !default;
    $product-grid-item__name-margin                             : 0 0 $spacer !default;
    $product-grid-item__name-height                             : 65px !default;
    $product-grid-item__name-height\@small                      : 45px !default;
    
    $product-grid-item__rating-margin-bottom                    : $spacer !default;
    $product-grid-item__rating-height                           : $spacer--medium !default;
    $product-grid-item__price-label-font-weight                 : $font-weight-normal !default;
    $product-grid-item__price-old-font-size                     : $font-size-base !default;
    $product-grid-item__price-old-font-size\@medium             : $font-size-medium !default;
    $product-grid-item__price-value-font-size--between          : $font-size-medium !default;
    $product-grid-item__price-min-height                        : 44px !default;
    
    $product-gird-item__primary-margin                          : 0 0 0 $spacer !default;
    
    $product-grid-item__action-wishlist-background              : transparent !default;
    
    $product-grid-item__IE-margin                               : 0 $spacer $spacer--medium $spacer !default;
    $product-grid-item__IE-width                                : calc(50% - #{$spacer--medium} - 1px) !default;
    $product-grid-item__IE-width\@medium                        : calc(100% / 3 - #{$spacer--medium} - 1px) !default;
    
    // wishlist variant
    $product-grid-item__action-margin--wishlist                 : $spacer 0 0 0 !default;
    
    $product-grid-item__comment-input-width--wishlist           : 100% !default;
    $product-grid-item__comment-margin--wishlist                : 0 0 $spacer 0 !default;
    $product-grid-item__comment-margin--wishlist\@medium        : 0 0 $spacer--medium 0 !default;
    
    $product-grid-item__qty-input-width--wishlist               : 72px !default;
    $product-grid-item__qty-input-width--wishlist\@xl           : 60px !default;
    $product-grid-item__qty-button-size--wishlist               : 48px !default;
    $product-grid-item__qty-input-border-width--wishlist        : 1px !default;
    $product-grid-item__qty-input-border-width--wishlist\@xl    : 1px 0 !default;
    $product-grid-item__qty-width--wishlist                     : 100% !default;
    $product-grid-item__qty-width--wishlist\@medium             : 80px !default;
    $product-grid-item__qty-width--wishlist\@xl                 : 156px !default;
    
    $product-grid-item__primary-action-width--wishlist          : 100% !default;
    $product-grid-item__primary-action-margin--wishlist         : $spacer 0 0 0 !default;
    $product-grid-item__primary-action-margin--wishlist\@medium : $spacer--medium 0 0 0 !default;
    $product-grid-item__primary-action-button-padding--wishlist : 0 $spacer--semi-medium !default;
    
    $product-grid-item__secondary-action-width--wishlist        : 100% !default;
    $product-grid-item__secondary-action-width--wishlist\@medium: calc(100% - #{$product-grid-item__qty-width--wishlist\@medium}) !default;
    $product-grid-item__secondary-action-width--wishlist\@xl    : calc(100% - #{$product-grid-item__qty-width--wishlist\@xl}) !default;
    
    $product-grid-item__tocompare-background-color              : $gray-lighter !default;
    
    // Slider item variant
    $product-grid-item__image-wrapper-width--slider-item        : 100% !default;
    
    // EE Version
    $product-grid-item-ee__actions-width                        : 100% !default;
    $product-grid-item-ee__tocart-width                         : 48px !default;
    $product-grid-item-ee__tocart-height                        : 48px !default;
    $product-grid-item-ee__requisition-margin                   : 0 $spacer 0 0 !default;
    $product-grid-item-ee__multiwishlist-width                  : 48px !default;
    $product-grid-item-ee__multiwishlist-margin                 : 0 $spacer !default;
    $product-grid-item-ee__dropdown-list-content-width          : 180px !default;
    $product-grid-item-ee__dropdown-list-content-width\@medium  : 210px !default;
    $product-grid-item-slider__dropdown-list-content-top        : auto !default;
    $product-grid-item-slider__dropdown-list-content-bottom     : 100% !default;
    $product-grid-item-ee__dropdown-list-label-width            : 48px !default;
    $product-grid-item-ee__dropdown-list-label-height           : 48px !default;
    
  • URL: /components/raw/product-grid-item/_product-grid-item-variables.scss
  • Filesystem Path: build/components/Organisms/product-grid-item/_product-grid-item-variables.scss
  • Size: 6.8 KB
  • Content:
    @import 'product-grid-item-variables';
    
    .product-grid-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: $product-grid-item__width;
        border: $product-grid-item__border;
        padding: $product-grid-item__padding;
        z-index: 0 !important; //sass-lint:disable-line no-important
        @include mq($screen-m) {
            border: $product-grid-item__border\@medium;
        }
        &:hover {
            border: $product-grid-item__border-hover;
            @include mq($screen-m) {
                border: $product-grid-item__border-hover\@medium;
            }
        }
    
        @include isIE() {
            margin: $product-grid-item__IE-margin;
            width: $product-grid-item__IE-width;
            @include mq($screen-m) {
                width: $product-grid-item__IE-width\@medium;
            }
        }
    
        &--wishlist {
            .quantity-update__input {
                width: $product-grid-item__qty-input-width--wishlist;
                height: $product-grid-item__qty-button-size--wishlist;
                border-width: $product-grid-item__qty-input-border-width--wishlist;
                @include mq($screen-xl) {
                    border-width: $product-grid-item__qty-input-border-width--wishlist\@xl;
                    width: $product-grid-item__qty-input-width--wishlist\@xl;
                }
            }
            .quantity-update__button {
                width: $product-grid-item__qty-button-size--wishlist;
                height: $product-grid-item__qty-button-size--wishlist;
                display: none;
                @include mq($screen-xl) {
                    display: flex;
                }
            }
            .product-grid-item__primary-action {
                width: $product-grid-item__primary-action-width--wishlist;
                margin: $product-grid-item__primary-action-margin--wishlist;
                @include mq($screen-m) {
                    margin: $product-grid-item__primary-action-margin--wishlist\@medium;
                }
                .button {
                    width: $product-grid-item__primary-action-width--wishlist;
                    padding: $product-grid-item__primary-action-button-padding--wishlist;
                }
            }
            .product-grid-item__secondary-action {
                display: flex;
                justify-content: space-around;
                width: $product-grid-item__secondary-action-width--wishlist;
                @include mq($screen-m) {
                    width: $product-grid-item__secondary-action-width--wishlist\@medium;
                    align-items: flex-end;
                }
                @include mq($screen-xl) {
                    width: $product-grid-item__secondary-action-width--wishlist\@xl;
                }
            }
        }
    
        &--slider-item {
            .product-grid-item__link {
                flex: 0;
            }
    
            .product-grid-item__details {
                flex: 1;
            }
    
            .product-grid-item__details-bottom {
                margin-top: auto;
            }
    
            @include isIE() {
                display: block;
                width: 100%;
            }
    
            .product-grid-item__image-wrapper {
                .image {
                    width: $product-grid-item__image-wrapper-width--slider-item;
                    position: absolute;
    
                    @include isIE() {
                        width: auto;
                    }
                }
    
                .lazyload,
                .lazyloading {
                    width: $product-grid-item__image-wrapper-width--slider-item;
                }
            }
    
            .product-grid-item__price {
                &--full-width {
                    @include mq($screen-m) {
                        width: 100%;
                    }
                }
            }
    
            .product-grid-item__actions {
                &--zero-width {
                    @include mq($screen-m) {
                        width: 0;
                    }
                }
            }
        }
    
        &__badges {
            top: $product-grid-item__badges-top-position;
            left: $product-grid-item__badges-left-position;
            z-index: $product-grid-item__badges-z-index;
        }
    
        &__link {
            position: relative;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            flex: 1 1 auto;
            align-items: center;
            align-self: stretch;
    
            &:after {
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: transparent;
                transition: $product-grid-item__transition;
            }
        }
    
        &__image-wrapper {
            position: relative;
            transition: $product-grid-item__transition;
            width: 100%;
            .product-image-container {
                width: auto !important; // sass-lint:disable-line no-important
                position: unset !important; // sass-lint:disable-line no-important
            }
            .image {
                margin: $product-grid-item__image-margin;
                width: $product-grid-item__image-width;
                height: $product-grid-item__image-height;
                transition: $product-grid-item__transition;
            }
            .lazyload,
            .lazyloading {
                width: $product-grid-item__image-width--lazyload;
                height: $product-grid-item__image-height--lazyload;
            }
        }
    
        &__name {
            min-height: $product-grid-item__name-height;
            margin: $product-grid-item__name-margin;
            font-weight: $product-grid-item__name-font-weight;
            font-size: $product-grid-item__name-font-size;
            text-transform: $product-grid-item__name-text-decoration;
            width: 100%;
            @include mq($screen-s) {
                min-height: $product-grid-item__name-height\@small;
            }
            @include mq($screen-m) {
                font-size: $product-grid-item__name-font-size\@medium;
            }
            @include mq($screen-l) {
                width: 100%;
            }
        }
    
        &__name-link {
            display: block;
            color: $product-grid-item__name-color;
            text-decoration: none;
            line-height: $product-grid-item__name-line-height;
            &:hover {
                text-decoration: $product-grid-item__name-text-decoration-hover;
                color: $product-grid-item__name-color-hover;
            }
        }
    
        &__rating {
            margin-bottom: $product-grid-item__rating-margin-bottom;
            height: $product-grid-item__rating-height;
        }
    
        &__price {
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            min-height: $product-grid-item__price-min-height;
            margin-bottom: 15px;
            @include mq($screen-m) {
                width: 50%;
                margin-bottom: 0;
            }
            .price-label {
                font-weight: $product-grid-item__price-label-font-weight;
            }
            .price__value:not(.price__value--between) {
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                white-space: nowrap;
            }
        }
    
        &__details {
            padding: $product-grid-item__details-padding;
            margin: $product-grid-item__details-margin;
            flex-grow: 0;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-end;
            border: $product-grid-item__details-border;
            border-width: $product-grid-item__details-border-width;
    
            @include mq($screen-xl) {
                padding: $product-grid-item__details-padding\@xl;
            }
            .product-grid-item__stock-status--out-of-stock {
                display: none;
            }
        }
    
        &__details-bottom {
            display: flex;
            flex-flow: column wrap;
            justify-content: space-between;
            @include mq($screen-m) {
                flex-flow: row wrap;
            }
        }
    
        &__actions {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            width: 100%;
            @include mq($screen-m) {
                width: 50%;
            }
    
            .tocompare {
                display: none;
            }
    
            &--ee {
                justify-content: space-between;
                width: $product-grid-item-ee__actions-width;
    
                &.product-grid-item__actions--slider {
                    .dropdown-list__content {
                        bottom: $product-grid-item-slider__dropdown-list-content-bottom;
                        top: $product-grid-item-slider__dropdown-list-content-top;
                    }
                }
    
                .tocart {
                    width: $product-grid-item-ee__tocart-width;
                    height: $product-grid-item-ee__tocart-height;
                }
    
                .product-grid-item {
                    &__secondary-action {
                        display: flex;
                        align-items: center;
    
                        .button {
                            justify-content: center;
                            order: 1;
    
                            &__text {
                                display: none;
                            }
                        }
    
                        .block-requisition-list {
                            margin: $product-grid-item-ee__requisition-margin;
                            order: 3;
                        }
                    }
                }
    
                .button--wishlist {
                    display: none;
                }
    
                .product-view {
                    &__update-wishlist {
                        display: none;
                    }
    
                    &__multiwishlist {
                        width: $product-grid-item-ee__multiwishlist-width;
                        margin: $product-grid-item-ee__multiwishlist-margin;
                        order: 2;
                    }
                }
    
                .dropdown-list {
                    &__content {
                        width: $product-grid-item-ee__dropdown-list-content-width;
    
                        @include mq($screen-m) {
                            width: $product-grid-item-ee__dropdown-list-content-width\@medium;
                        }
                    }
    
                    &__icon {
                        display: none;
                    }
    
                    &__label {
                        width: $product-grid-item-ee__dropdown-list-label-width;
                        height: $product-grid-item-ee__dropdown-list-label-height;
                    }
    
                    &__item {
                        position: relative;
                    }
                }
            }
        }
    
        &__primary-action {
            margin: $product-gird-item__primary-margin;
    
            .button--add-to {
                @include mq($screen-m) {
                    @include add-to-button(block);
                }
            }
        }
    
        // elements from product-grid-item--wishlist variant
        &__wishlist-action {
            margin: $product-grid-item__action-margin--wishlist;
            @include mq($screen-m) {
                display: flex;
                flex-flow: row wrap;
            }
        }
    
        &__wishlist-comment {
            width: $product-grid-item__comment-input-width--wishlist;
            margin: $product-grid-item__comment-margin--wishlist;
            @include mq($screen-m) {
                margin: $product-grid-item__comment-margin--wishlist\@medium;
            }
        }
    
        &__wishlist-qty {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: space-between;
            width: $product-grid-item__qty-width--wishlist;
    
            @include mq($screen-m) {
                flex-direction: column;
                align-items: flex-start;
                width: $product-grid-item__qty-width--wishlist\@medium;
            }
            @include mq($screen-xl) {
                width: $product-grid-item__qty-width--wishlist\@xl;
            }
        }
    
        .add-to-wishlist {
            @extend .button--icon-fill;
            position: absolute;
            top: 0;
            right: 0;
            background: $product-grid-item__action-wishlist-background;
            &:before {
                display: none;
            }
            &.button--icon-filled {
                @include button-fill-bg();
            }
        }
    
        .button--tocompare {
            background-color: $product-grid-item__tocompare-background-color;
            display: none;
        }
    }
    
  • URL: /components/raw/product-grid-item/_product-grid-item.scss
  • Filesystem Path: build/components/Organisms/product-grid-item/_product-grid-item.scss
  • Size: 12 KB

There are no notes for this item.