Vechtsport Online Components for Magento 2

Price: Between 

<div class="price  ">
    <span class="price__value price__value--between">
        <span class="price__text">
            From
        </span>
        €

        61.00

    </span>

    <span class="price__value price__value--between">
        <span class="price__text">
            To
        </span>

        €

        79.00

    </span>
</div>
 
<div class="price {{ class }} {{{ attributes }}}">
    <span class="price__value {{ priceClass }}">
        <span class="price__text">
            {{ textBeforeFromPrice }}
        </span>
        {{#if prefix.tag}}
            <{{tag}}>
        {{/if}}
            {{ prefix.text }}
        {{#if prefix.tag}}
            </{{tag}}>
        {{/if}}

        {{ fromPrice }}

        {{#if suffix.tag}}
            <{{suffix.tag}}>
        {{/if}}
            {{ suffix.text }}
        {{#if suffix.tag}}
            </{{suffix.tag}}>
        {{/if}}
    </span>

    <span class="price__value {{ priceClass }}">
        <span class="price__text">
            {{ textBeforeToPrice }}
        </span>

        {{#if prefix.tag}}
            <{{tag}}>
        {{/if}}
            {{ prefix.text }}
        {{#if prefix.tag}}
            </{{tag}}>
        {{/if}}

        {{ toPrice }}

        {{#if suffix.tag}}
            <{{suffix.tag}}>
        {{/if}}
            {{ suffix.text }}
        {{#if suffix.tag}}
            </{{suffix.tag}}>
        {{/if}}
    </span>
</div>
 
{
  "regularPrice": "129,95",
  "specialPrice": "",
  "prefix": {
    "tag": "",
    "text": "€"
  },
  "suffix": {
    "tag": "",
    "text": ""
  },
  "priceClass": "price__value--between",
  "textBeforeFromPrice": "From",
  "textBeforeToPrice": "To",
  "fromPrice": "61.00",
  "toPrice": "79.00"
}
  • Content: 
    $price__spacing                     : $spacer !default;
$price__font-family                 : $font-family-saira !default;
$price__font-style                  : normal !default;

$price__font-weight                 : $font-weight-semibold !default;
$price__font-weight--old            : $font-weight-normal !default;
$price__font-weight--special        : $font-weight-semibold !default;

$price__font-size                   : 20px !default;
$price__font-size--old              : 14px !default;

$price__color                       : $red !default;
$price__color--special              : $red !default;
$price__color--old                  : rgba(227, 6, 19, 0.5) !default;

$secondary-price__color             : $white !default;
$secondary-price__color--special    : $white !default;
$secondary-price__color--old        : rgba(255, 255, 255, 0.5) !default;

.price {
    &-box,
    &__value {
        font-family: $price__font-family;
        font-size: $price__font-size;
        font-weight: $price__font-weight;
        color: $price__color;
        & .old-price,
        &--old {
            color: $price__color--old;
            font-weight: $price__font-weight--old;
            font-size: $price__font-size--old;
            text-decoration: line-through;
            margin-right: $price__spacing;
        }
        &--special {
            color: $price__color--special;
            font-weight: $price__font-weight--special;
            & > ins {
                text-decoration: none;
            }
        }
        &--between {
            display: block;

            &:last-child {
                margin-top: $price__spacing;
            }
        }
    }
    & .normal-price {
        & .price-container.price-final_price {
            & .price-label {
                margin-bottom: 5px;
            }
            & .price-wrapper {
                & span.price {
                    color: $price__color--special;
                    font-weight: $price__font-weight--special;
                }
            }
        }
    }
    &-label {
        display: none;
    }
    &__text {
        font-weight: $price__font-weight--old;
    }
    &-final_price {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
    }
}
.catalog-item__price--black,
.catalog-item__price--red {
    .price {
        &__value {
            color: $secondary-price__color;
            &--old {
                color: $secondary-price__color--old;
            }
            &--special {
                color: $secondary-price__color--special;
            }
        }
    }
}
  • URL: /components/raw/price/_price.scss
  • Filesystem Path: build/components/02-elements/price/_price.scss
  • Size: 2.6 KB

There are no notes for this item.