<div class="
        add-to-cart 
        
    " data-aos="fade-up" data-aos-anchor="#submit-add-to-cart-main" data-aos-anchor-placement="bottom-top">
    <div class="add-to-cart__wrapper">
        <div class="add-to-cart__title padding-right-m">
            <h2 class="heading heading--page">
                Bluzka ONLSANSA SINGLET WVN
            </h2>

            <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 class="add-to-cart__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 href="/images/icons-sprite.svg#shopping-cart"></use>
                </svg>

            </button>

            <button class="
                        button
                        button--icon
                        add-to-cart__button-more
                    " type="button" aria-expanded="false">
                <svg class="icon button__icon" role="presentation" focusable="false">
                    <title>More</title>
                    <use href="/images/icons-sprite.svg#more"></use>
                </svg>

                <svg class="icon button__icon-close" role="presentation" focusable="false">
                    <title>Close</title>
                    <use href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>
            <div class="add-to-cart__action-secondary">
                <button class="button button--icon product-view__button" type="button" aria-label="Add product to wishlist">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Arrow left</title>
                        <use href="/images/icons-sprite.svg#heart"></use>
                    </svg>

                    <span class="button__text ">
                        Wishlist
                    </span>

                </button>

                <button class="button button--icon product-view__button" type="button" aria-label="Compare product">
                    <svg class="icon button__icon" role="presentation" focusable="false">
                        <title>Add to compare list</title>
                        <use href="/images/icons-sprite.svg#compare"></use>
                    </svg>

                    <span class="button__text ">
                        Compare
                    </span>

                </button>

            </div>

        </div>

    </div>
</div>

<script src="/components/raw/add-to-cart/add-to-cart-more.js"></script>
<div
    class="
        add-to-cart 
        {{ class }}
    "
    data-aos="fade-up"
    data-aos-anchor="#submit-add-to-cart-main"
    data-aos-anchor-placement="bottom-top"
>
    <div class="add-to-cart__wrapper">
        <div class="add-to-cart__title {{ classTitle }}">
            <h2 class="heading heading--page">
                {{ title }}
            </h2>

            {{ render '@price--with-special-price' }}
        </div>
        <div class="add-to-cart__action">
            {{ render '@button--add-to' addToCartBtn merge=true }}
            {{#unless hiddenForEE}}
                <button
                    class="
                        button
                        button--icon
                        add-to-cart__button-more
                    "
                    type="button"
                    aria-expanded="false"
                >
                    {{ render '@icon' moreIcon }}
                    {{ render '@icon' moreIconClose }}
                </button>
                <div class="add-to-cart__action-secondary">
                    {{#if wishlistBtn}}
                        {{ render '@button--icon' wishlistBtn }}
                    {{/if}}
                    {{#if compareBtn}}
                        {{ render '@button--icon' compareBtn }}
                    {{/if}}
                </div>
            {{/unless}}

        </div>

    </div>
</div>

<script src="{{ static 'add-to-cart-more.js' }}"></script>
{
  "title": "Bluzka ONLSANSA SINGLET WVN",
  "hiddenForEE": false,
  "class": "",
  "classTitle": "padding-right-m",
  "moreIcon": {
    "id": "more",
    "title": "More",
    "class": "button__icon",
    "hidden": true
  },
  "moreIconClose": {
    "id": "close",
    "title": "Close",
    "class": "button__icon-close",
    "hidden": true
  },
  "wishlistBtn": {
    "tag": "button",
    "text": "Wishlist",
    "class": "product-view__button",
    "iconBefore": {
      "id": "heart",
      "title": "Arrow left",
      "class": "button__icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Add product to wishlist\""
  },
  "compareBtn": {
    "tag": "button",
    "text": "Compare",
    "class": "product-view__button",
    "iconBefore": {
      "id": "compare",
      "title": "Add to compare list",
      "class": "button__icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Compare product\""
  },
  "addToCartBtn": {
    "class": "button--add-to",
    "attributes": "type=\"submit\" aria-label=\"Add to cart\""
  }
}
  • Content:
    $add-to-cart__sticky-always-mq                           : $screen-m !default;
    $add-to-cart__display-always-max-screen                  : calc(#{$add-to-cart__sticky-always-mq} - 1px);
    $add-to-cart__z-index                                    : $z-index-high !default;
    $add-to-cart__min-height                                 : 2 * $spacer--extra-large !default;
    $add-to-cart__border                                     : $border-base !default;
    $add-to-cart__border-width                               : $border-width-base 0 0 0 !default;
    $add-to-cart__background                                 : $white !default;
    
    $add-to-cart__shadow                                     : 0 -2px 6px 0 rgba(0, 0, 0, 0.1) !default;
    
    $add-to-cart__wrapper-max-width                          : $max-content-width !default;
    $add-to-cart__wrapper-margin                             : 0 auto !default;
    $add-to-cart__wrapper-padding                            : 0 $spacer--medium $spacer !default;
    $add-to-cart__wrapper-padding\@medium                    : $spacer--medium !default;
    $add-to-cart__wrapper-padding\@large                     : $spacer--medium $spacer--semi-large !default;
    $add-to-cart__wrapper-padding\@xxl                       : $spacer--medium 0 !default;
    
    $add-to-cart__title-width                                : calc(100% - 70px) !default;
    $add-to-cart__title-width\@medium                        : calc(100% - 420px) !default;
    $add-to-cart__title-width\@large                         : calc(100% - 490px) !default;
    $add-to-cart__title-font-size                            : $font-size-base !default;
    $add-to-cart__title-font-family                          : $font-family-base !default;
    $add-to-cart__title-font-size\@large                     : $font-size-medium !default;
    $add-to-cart__title-text-transform                       : initial !default;
    $add-to-cart__title-margin                               : 0 !default;
    
    $add-to-cart__button-padding\@medium                     : $spacer--medium $spacer--semi-medium !default;
    $add-to-cart__button-height\@medium                      : 56px !default;
    $add-to-cart__button-add-to-min-width\@large             : 300px !default;
    $add-to-cart__button-additional-margin                   : $spacer 0 !default;
    $add-to-cart__button-additional-margin\@medium           : 0 !default;
    $add-to-cart__button-additional-bg                       : inherit !default;
    $add-to-cart__button-additional-bg\@medium               : $gray-lighter !default;
    $add-to-cart__button-additional-margin-last-child\@medium: 0 0 0 $spacer !default;
    $add-toc-cart__button-more-icon-size                     : $icon-size !default;
    
    $add-to-cart__action-flex-flow                           : column-reverse nowrap !default;
    $add-to-cart__action-flex-flow\@medium                   : row nowrap !default;
    $add-to-cart__action-secondary-position                  : absolute !default;
    $add-to-cart__action-secondary-flex-flow                 : row nowrap !default;
    
    $add-to-cart__action-secondary-width                     : calc(100vw + #{$spacer--medium}) !default;
    $add-to-cart__action-secondary-width\@medium             : $spacer--extra-large + $spacer !default;
    $add-to-cart__action-secondary-height                    : $spacer--extra-large + $spacer !default;
    $add-to-cart__action-secondary-position-right            : -$spacer--medium !default;
    $add-to-cart__action-secondary-background                : $white !default;
    $add-to-cart__action-secondary-shadow                    : $add-to-cart__shadow, inset $add-to-cart__shadow !default;
    $add-to-cart__action-secondary-transition                : $transition-base !default;
    $add-to-cart__action-secondary-flex-flow\@medium         : row nowrap !default;
    $add-to-cart__action-secondary-position\@medium          : relative !default;
    $add-to-cart__action-secondary-margin\@medium            : 0 0 0 $spacer !default;
    $add-to-cart__button-secondary-flex                      : 1 0 50% !default;
    $add-to-cart__button-secondary-flex\@medium              : auto !default;
    
    $add-to-cart__button-wishlist-filled-after-left          : calc(50% - #{$spacer--extra-large}) !default;
    $add-to-cart__button-wishlist-filled-after-left\@medium  : auto !default;
    
  • URL: /components/raw/add-to-cart/_add-to-cart-variables.scss
  • Filesystem Path: build/components/Organisms/add-to-cart/_add-to-cart-variables.scss
  • Size: 4.2 KB
  • Content:
    @import 'add-to-cart-variables';
    
    .add-to-cart {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        min-height: $add-to-cart__min-height;
        border: $add-to-cart__border;
        border-width: $add-to-cart__border-width;
        background: $add-to-cart__background;
        z-index: $add-to-cart__z-index;
        box-shadow: $add-to-cart__shadow;
    
        // keep component sticky & visible for up to '$screen-m'
        html:not(.no-js) &[data-aos^='fade'][data-aos^='fade'] {
            pointer-events: all;
    
            @include mq($max-screen: $add-to-cart__display-always-max-screen) {
                opacity: 1;
                transform: none;
            }
        }
    
        &__wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: $add-to-cart__wrapper-max-width;
            margin: $add-to-cart__wrapper-margin;
            padding: $add-to-cart__wrapper-padding;
    
            @include mq($screen-m) {
                padding: $add-to-cart__wrapper-padding\@medium;
            }
    
            @include mq($screen-l) {
                padding: $add-to-cart__wrapper-padding\@large;
            }
    
            @include mq($screen-xxl) {
                padding: $add-to-cart__wrapper-padding\@xxl;
            }
        }
    
        &__title {
            width: $add-to-cart__title-width;
    
            @include mq($screen-m) {
                width: $add-to-cart__title-width\@medium;
            }
    
            @include mq($screen-l) {
                width: $add-to-cart__title-width\@large;
            }
    
            & > .heading {
                margin: $add-to-cart__title-margin;
                font-family: $add-to-cart__title-font-family;
                font-size: $add-to-cart__title-font-size;
                text-transform: $add-to-cart__title-text-transform;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
    
                @include mq($screen-l) {
                    font-size: $add-to-cart__title-font-size\@large;
                }
            }
        }
    
        &__button-more {
            @include mq($add-to-cart__sticky-always-mq) {
                display: none;
            }
    
            .button__icon-close {
                width: 0;
            }
    
            &[aria-expanded="false"] + .add-to-cart__action-secondary {
                display: flex;
                height: 0;
                opacity: 0;
    
                @include mq($add-to-cart__sticky-always-mq) {
                    height: $add-to-cart__action-secondary-height;
                    opacity: 1;
                }
            }
            &[aria-expanded="true"] {
                .button__icon-close {
                    width: $add-toc-cart__button-more-icon-size;
                }
                .button__icon {
                    width: 0;
                }
                & + .add-to-cart__action-secondary {
                    height: $add-to-cart__action-secondary-height;
                    opacity: 1;
                }
            }
        }
    
        &__action {
            position: relative;
            display: flex;
            flex-flow: $add-to-cart__action-flex-flow;
            align-items: center;
    
            @include mq($screen-m) {
                flex-flow: $add-to-cart__action-flex-flow\@medium;
            }
        }
    
        &__action-secondary {
            position: $add-to-cart__action-secondary-position;
            bottom: $add-to-cart__min-height;
            right: $add-to-cart__action-secondary-position-right;
            display: flex;
            flex-flow: $add-to-cart__action-secondary-flex-flow;
            align-items: center;
            justify-content: space-around;
            width: $add-to-cart__action-secondary-width;
            background-color: $add-to-cart__action-secondary-background;
            box-shadow: $add-to-cart__action-secondary-shadow;
            overflow: hidden;
            transition: $add-to-cart__action-secondary-transition;
    
            @include mq($screen-m) {
                position: $add-to-cart__action-secondary-position\@medium;
                bottom: initial;
                right: initial;
                flex-flow: $add-to-cart__action-secondary-flex-flow\@medium;
                width: auto;
                margin: $add-to-cart__action-secondary-margin\@medium;
                box-shadow: none;
            }
    
            .button {
                flex: $add-to-cart__button-secondary-flex;
    
                @include mq($screen-m) {
                    flex: $add-to-cart__button-secondary-flex\@medium;
                }
            }
        }
    
        &__button {
            .button__text {
                display: none;
            }
    
            @include mq($screen-m) {
                padding: $add-to-cart__button-padding\@medium;
                height: $add-to-cart__button-height\@medium;
    
                .button__text {
                    display: block;
                }
    
                .button__icon {
                    display: none;
                }
            }
        }
    
        &__button-additional {
            margin: $add-to-cart__button-additional-margin;
            background-color: $add-to-cart__button-additional-bg;
    
            @include mq($screen-m) {
                margin: $add-to-cart__button-additional-margin\@medium;
                height: $add-to-cart__action-secondary-height;
                width: $add-to-cart__action-secondary-width\@medium;
                background-color: $add-to-cart__button-additional-bg\@medium;
                .button__text {
                    display: none;
                }
            }
            &:last-child {
                @include mq($screen-m) {
                    margin: $add-to-cart__button-additional-margin-last-child\@medium;
                }
            }
    
            &.button--icon-filled {
                &:after {
                    left: $add-to-cart__button-wishlist-filled-after-left;
    
                    @include mq($screen-m) {
                        left: $add-to-cart__button-wishlist-filled-after-left\@medium;
                    }
                }
            }
        }
    
        .button--add-to {
            @include mq($screen-m) {
                height: $add-to-cart__action-secondary-height;
            }
    
            @include mq($screen-l) {
                min-width: $add-to-cart__button-add-to-min-width\@large;
            }
        }
    }
    
  • URL: /components/raw/add-to-cart/_add-to-cart.scss
  • Filesystem Path: build/components/Organisms/add-to-cart/_add-to-cart.scss
  • Size: 5.9 KB
  • Content:
    'use strict';
    const mediaBq = window.matchMedia('(max-width: 767px)');
    
    function toggleBtnAction(button) {
      let currentState = button.getAttribute('aria-expanded');
      let newState = currentState === 'true' ? 'false' : 'true';
      button.setAttribute('aria-expanded', newState);
    }
    
    if (mediaBq) {
      const toggleBtn = document.querySelector('.add-to-cart__button-more');
    
      toggleBtn.addEventListener('click', () => {
        toggleBtnAction(toggleBtn);
      });
    }
    
  • URL: /components/raw/add-to-cart/add-to-cart-more.js
  • Filesystem Path: build/components/Organisms/add-to-cart/add-to-cart-more.js
  • Size: 455 Bytes

No notes defined.