<div class="price--extra-small">

    <div class="price__row">
        <div class="price__column--regular-price">
            <div class="price-regular__special--discount is-offset">AKTION</div>
            <div class="price-regular">
                <div class="price-regular__current">
                    <div class="price-regular__current-price-inner">
                        <div class="price-regular__current-prefix--offer">ab</div>
                        <div class="price-regular__current-currency--offer">CHF</div>
                    </div>
                    <div class="price-regular__current-price-inner">
                        <div class="price-regular__current-value--offer">24.90</div>
                    </div>
                </div>
                <div class="price-regular__list-price is-offset">
                    <div class="price-regular__list-price-prefix">
                        <del>statt</del>
                    </div>
                    <div class="price-regular__list-price-inner">
                        <div class="price-regular__list-price-currency">
                            <del>CHF</del>
                        </div>
                        <div class="price-regular__list-price-value">
                            <del>12.90</del>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{% include '@SharedComponents/modules/shared-product/components/price/price.twig' %}
{
  "variant": "extra-small",
  "labels": {
    "from": "ab",
    "instead": "statt"
  },
  "price": {
    "from": true,
    "currency": "CHF",
    "price": "24.90",
    "special": {
      "type": "discount",
      "value": "AKTION",
      "offset": true
    },
    "listPrice": "12.90",
    "listPriceOffset": true
  }
}
  • Content:
    import './price.scss';
    import Price, {selector as sel} from 'cando-cx-components-library/components/modules/shared-product/components/price/price';
    
    export default Price;
    export const selector = sel;
  • URL: /components/raw/price/price.js
  • Filesystem Path: src/components/modules/shared-product/components/price/price.js
  • Size: 199 Bytes
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/shared-product/components/price/price";
  • URL: /components/raw/price/price.scss
  • Filesystem Path: src/components/modules/shared-product/components/price/price.scss
  • Size: 120 Bytes
  • Content:
    import puppeteer from 'puppeteer';
    
    /* eslint-disable max-lines-per-function */
    describe('PRICE-TYPE Price Media-Large', () => {
      let browser;
      beforeAll(async () => {
        browser = await puppeteer.launch({
          args: ['--window-size=768,540'],
          defaultViewport: { width: 768, height: 540 },
        });
      });
      TESTPLACEHOLDER;
      afterAll(async () => {
        await browser.close();
      });
    });
    
  • URL: /components/raw/price/template-media-large.txt
  • Filesystem Path: src/components/modules/shared-product/components/price/template-media-large.txt
  • Size: 395 Bytes
  • Content:
    import puppeteer from 'puppeteer';
    
    /* eslint-disable max-lines-per-function */
    describe('PRICE-TYPE Price Media-medium', () => {
      let browser;
      beforeAll(async () => {
        browser = await puppeteer.launch({
          args: ['--window-size=767,540'],
          defaultViewport: { width: 767, height: 540 },
        });
      });
      TESTPLACEHOLDER;
      afterAll(async () => {
        await browser.close();
      });
    });
    
  • URL: /components/raw/price/template-media-medium.txt
  • Filesystem Path: src/components/modules/shared-product/components/price/template-media-medium.txt
  • Size: 396 Bytes

Usage

  • The extra large price variant is used in the family slider brick
  • The large and large secondary variants are used on the PDP product overview
  • The regular variant is used e.g. in cart or in product tiles
  • The small variant is used in the PDP variants table
  • The extra small variant is kept in case it’s needed in future (not being used currently)
  • The regular offset variants are ONLY used to vertical align prices with offers or specials in tables (i.e. on the variant table) IMPORTANT: does not work in combination with bulkprices or Notes
  • The large offset variants are ONLY used to vertical align prices with offers or specials on the PDP (variants found on the overview component). IMPORTANT: on the PDP only the price.special.offset is needed WITHOUT the price.listPriceOffset