OFRAG Frontend Components Library v0.0.0

Price: Regular With Bulk Prices And From 

<div class="price--regular">

    <div class="price__row">
        <div class="price__column--regular-price">
            <div class="price-regular">
                <div class="price-regular__current">
                    <div class="price-regular__current-price-inner">
                        <div class="price-regular__current-prefix">dès</div>
                        <div class="price-regular__current-currency">CHF</div>
                    </div>
                    <div class="price-regular__current-price-inner">
                        <div class="price-regular__current-value">9.90</div>
                    </div>
                </div>
            </div>
            <div class="price-regular__note">Preis exkl. 7.7% MwSt.</div>
        </div>
        <div class="price__column--bulk-price">
            <div class="price-bulk-price--regular">
                <div class="price-bulk-price__row">
                    <div class="price-bulk-price__column">

                        <div class="price-bulk-price__amount-row" aria-hidden="true">
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>3<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>10<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                        </div>
                        <div class="price-bulk-price__value-row">
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 3: CHF 8.90</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">9</div>
                            </div>
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 10: CHF 8.90</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">9</div>
                            </div>
                        </div>
                    </div>
                    <div class="price-bulk-price__column">

                        <div class="price-bulk-price__amount-row" aria-hidden="true">
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>20<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>25<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                        </div>
                        <div class="price-bulk-price__value-row">
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 20: CHF 7.00</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">7</div>
                            </div>
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 25: CHF 6.50</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">7</div>
                            </div>
                        </div>
                    </div>
                    <div class="price-bulk-price__column">

                        <div class="price-bulk-price__amount-row" aria-hidden="true">
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>30<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>35<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                        </div>
                        <div class="price-bulk-price__value-row">
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 30: CHF 5.50</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">6</div>
                            </div>
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 35: CHF 5.40</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">5</div>
                            </div>
                        </div>
                    </div>
                    <div class="price-bulk-price__column">

                        <div class="price-bulk-price__amount-row" aria-hidden="true">
                            <div class="price-bulk-price__amount-column">
                                <div class="price-bulk-price__amount">
                                    <span class="price__desktop-only">dès </span>40<span class="price__mobile-only">+</span>:
                                </div>
                            </div>
                        </div>
                        <div class="price-bulk-price__value-row">
                            <div class="price-bulk-price__value-column">
                                <span class="visually-hidden">dès 40: CHF 5.20</span>
                                <div class="price-bulk-price__currency" aria-hidden="true">CHF</div>
                                <div class="price-bulk-price__value" aria-hidden="true">5</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
 
{% include '@SharedComponents/modules/shared-product/components/price/price.twig' %}
 
{
  "variant": "regular",
  "labels": {
    "from": "dès"
  },
  "price": {
    "currency": "CHF",
    "price": "9.90",
    "note": "Preis exkl. 7.7% MwSt.",
    "from": true
  },
  "bulkPrices": {
    "prices": {
      "3": {
        "currency": "CHF",
        "price": "8.90"
      },
      "10": {
        "currency": "CHF",
        "price": "8.90"
      },
      "20": {
        "currency": "CHF",
        "price": "7.00"
      },
      "25": {
        "currency": "CHF",
        "price": "6.50"
      },
      "30": {
        "currency": "CHF",
        "price": "5.50"
      },
      "35": {
        "currency": "CHF",
        "price": "5.40"
      },
      "40": {
        "currency": "CHF",
        "price": "5.20"
      }
    }
  }
}
  • 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