<li class="product-grid-item product-item product-item-info product-item-details" data-container="product-grid" tabindex="0" data-testid="list-product-item">
    <div class="product-item-info" data-container="product-grid">
        <a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet" class="product-grid-item__link product photo product-item-photo" tabindex="-1">
            <div class="product-grid-item__image-wrapper">
                <div class="lazyload-wrapper">
                    <picture class="image product-image-photo catalog-grid-item__image lazyloaded">
                        <source type="image/webp" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp">
                        <source type="image/jpg" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg">
                        <img class="image product-image-photo catalog-grid-item__image lazyloaded" src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" data-src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" alt="Adore Bouclé Boxspring Antraciet" loading="lazy">
                    </picture>
                </div>
            </div>
        </a>
        <div class="product details product-item-details">
            <strong class="product name product-item-name">
                <a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" class="product-item-link" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet">
                    Adore Bouclé Boxspring Antraciet
                </a>
            </strong>
            <div class="price-box price-final_price" data-role="priceBox" data-product-id="90660" data-price-box="product-id-90660">
                <span class="
                        price__value
                        price__value--normal
                    ">
                    <span class="price-container price-final_price tax weee">
                        <span id="product-price-90660" data-price-amount="899" data-price-type="finalPrice" class="
                                price-wrapper
                                        " aria-label="finalPrice €&nbsp;899,00">
                            <span class="price">€&nbsp;899,00</span>
                        </span>
                    </span>
                </span>
            </div>
            <div class="product-item-inner">
                <div class="product actions product-item-actions">
                    <div class="actions-primary">
                        <form data-role="tocart-form" data-product-sku="Adore-Bouclé-Boxspring-Antraciet" action="https://www.onlineslaapcomfort.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4%2C/product/90660/" method="post">
                            <input type="hidden" name="product" value="90660">
                            <input type="hidden" name="uenc" value="aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL2NoZWNrb3V0L2NhcnQvYWRkL3VlbmMvYUhSMGNITTZMeTkzZDNjdWIyNXNhVzVsYzJ4aFlYQmpiMjFtYjNKMExtNXNMM2R2Ym1WdUwzTnNZWEJsYmk5aVpXUmtaVzQlMkMvcHJvZHVjdC85MDY2MC8,">
                            <input name="form_key" type="hidden" value="crBUhdSqzPqMwD9O">
                            <button type="submit" title="in de winkelwagen" class="action tocart primary">
                                <span>in de winkelwagen</span>
                            </button>
                        </form>
                    </div>
                    <div data-role="add-to-links" class="actions-secondary">
                        <button class="
                            button
                            button--icon
                            button--wishlist
                            add-to-wishlist
                                    " type="button" title="Toevoegen aan verlanglijstje" aria-label="Toevoegen aan verlanglijstje" data-testid="add-to-wishlist-button" data-multiplewishlist="{&quot;action&quot;:&quot;https:\/\/www.onlineslaapcomfort.nl\/wishlist\/index\/add\/&quot;,&quot;data&quot;:{&quot;product&quot;:90660,&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4,&quot;}}">
                            <svg class="icon button__icon" role="presentation" focusable="false">
                                <use href="https://www.onlineslaapcomfort.nl/static/version1706615337/frontend/FalconMedia/onlineslaapcomfort/nl_NL/images/icons-sprite.svg#heart"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li class="product-grid-item product-item product-item-info product-item-details" data-container="product-grid" tabindex="0" data-testid="list-product-item">
    <div class="product-item-info" data-container="product-grid">
        <a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet" class="product-grid-item__link product photo product-item-photo" tabindex="-1">
            <div class="product-grid-item__image-wrapper">
                <div class="lazyload-wrapper">
                    <picture class="image product-image-photo catalog-grid-item__image lazyloaded">
                        <source type="image/webp" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.webp">
                        <source type="image/jpg" data-srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" srcset="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg">
                        <img class="image product-image-photo catalog-grid-item__image lazyloaded" src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" data-src="https://www.onlineslaapcomfort.nl/media/catalog/product/cache/4d7e9da9b936efcb8770700531839a3b/8/7/8719128297163_1.jpg" alt="Adore Bouclé Boxspring Antraciet" loading="lazy">
                    </picture>
                </div>
            </div>
        </a>
        <div class="product details product-item-details">
            <strong class="product name product-item-name">
                <a onclick="window.wpGA4ServerSide.pushClick(90660, '334', 'Wonen/Slapen/Bedden', 1 , this);" class="product-item-link" href="https://www.onlineslaapcomfort.nl/adore-boucle-boxspring-antraciet">
                    Adore Bouclé Boxspring Antraciet
                </a>
            </strong>
            <div class="price-box price-final_price" data-role="priceBox" data-product-id="90660" data-price-box="product-id-90660">
                <span class="
                        price__value
                        price__value--normal
                    ">
                    <span class="price-container price-final_price tax weee">
                        <span id="product-price-90660" data-price-amount="899" data-price-type="finalPrice" class="
                                price-wrapper
                                        " aria-label="finalPrice €&nbsp;899,00">
                            <span class="price">€&nbsp;899,00</span>
                        </span>
                    </span>
                </span>
            </div>
            <div class="product-item-inner">
                <div class="product actions product-item-actions">
                    <div class="actions-primary">
                        <form data-role="tocart-form" data-product-sku="Adore-Bouclé-Boxspring-Antraciet" action="https://www.onlineslaapcomfort.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4%2C/product/90660/" method="post">
                            <input type="hidden" name="product" value="90660">
                            <input type="hidden" name="uenc" value="aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL2NoZWNrb3V0L2NhcnQvYWRkL3VlbmMvYUhSMGNITTZMeTkzZDNjdWIyNXNhVzVsYzJ4aFlYQmpiMjFtYjNKMExtNXNMM2R2Ym1WdUwzTnNZWEJsYmk5aVpXUmtaVzQlMkMvcHJvZHVjdC85MDY2MC8,">
                            <input name="form_key" type="hidden" value="crBUhdSqzPqMwD9O">
                            <button type="submit" title="in de winkelwagen" class="action tocart primary">
                            <span>in de winkelwagen</span>
                            </button>
                        </form>
                    </div>
                    <div data-role="add-to-links" class="actions-secondary">
                        <button class="
                            button
                            button--icon
                            button--wishlist
                            add-to-wishlist
                                    " type="button" title="Toevoegen aan verlanglijstje" aria-label="Toevoegen aan verlanglijstje" data-testid="add-to-wishlist-button" data-multiplewishlist="{&quot;action&quot;:&quot;https:\/\/www.onlineslaapcomfort.nl\/wishlist\/index\/add\/&quot;,&quot;data&quot;:{&quot;product&quot;:90660,&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cub25saW5lc2xhYXBjb21mb3J0Lm5sL3dvbmVuL3NsYXBlbi9iZWRkZW4,&quot;}}">
                            <svg class="icon button__icon" role="presentation" focusable="false">
                                <use href="https://www.onlineslaapcomfort.nl/static/version1706615337/frontend/FalconMedia/onlineslaapcomfort/nl_NL/images/icons-sprite.svg#heart"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
{
  "tag": "div",
  "class": "product-grid-item--slider-item",
  "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__padding-bottom                          : 75px !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;
        padding-bottom: $product-grid-item__padding-bottom;
        z-index: 0 !important; //sass-lint:disable-line no-important
        @include mq($screen-m) {
            border: $product-grid-item__border\@medium;
        }
        .product {
            &.actions {
                .tocart {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    font-weight: $font-weight-bold;
                }
            }
            &.details {
                padding-left: 10px;
            }
        }
        &: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;
            }
        }
    
        // styles for safari
        &:not(:root:root) {
            display: flex !important; // sass-lint:disable-line no-vendor-prefixes no-important
        }
    
    
        &--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;
    
                    @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.4 KB
  • Content:
    <{{{ 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 }}}>
    
  • URL: /components/raw/product-grid-item/product-grid-item.hbs.old
  • Filesystem Path: build/components/Organisms/product-grid-item/product-grid-item.hbs.old
  • Size: 2.2 KB

There are no notes for this item.