Product Price

This webcomponent is responsible for managing product prices rendered inside.

It listens to two events - product.priceChanged and product.stockChanged, so when the prices for a specific product change or a different product variant is selected it updates them.

Attributes

Attribute name	Type	Default	Required	Description
product-id	number	-	yes	Id of the product to which <product-prices> should refer to

Children of the Product Price

As mentioned above in the introduction section the component changes the prices properly with the events it listens to. In order for that to happen children with specific class names need to be put inside the <product-prices>. There are several classes, each having it's own responsibility:

• js__product-price-net - a container for net prices
• js__product-price-gross - a container for gross prices
• js__product-currency-price - a container for a price in a product currency (if it's different than the currency in the store)
• js__product-price - a container for a price in a store currency
• js__special-offer-container - a container for a price undergoing a promotion
• js__no-special-offer-container - a container for a price not undergoing any promotion
• js__price-vat-value - a container for a price vat value
• js__regular-price-value - a container for displaying a regular price when a product is undergoing a promotion
• js__special-offer-percentage-value - a container for a promotion discount percentage
• js__lowest-historical-price-percentage-value - a container for the lowest produdct price within the last 30 days
• js__special-offer-duration-value - a container for a promotion duration
• js__price-value - a value of a regular price
• js__price-vat-value a vat value of a price

Event Bus events

This webcomponent listens to the following events with the Event Bus:

• product.priceChanged
• product.stockChanged

Example

An example of such price structure could look like this:

    <product-price product-id="12">
        <div class="js__product-price-gross">
            <div class="js__product-price">
                <div class="js__special-offer-container">
                    <span class="js__special-offer-price-value">$4.99</span>
                </div>
            </div>

            <span>
                with
                <span class="js__price-vat-value">23%</span>
                VAT
            </span>
        </div>


        <div class="js__special-offer-container">
            <span class="js__special-offer-duration-value">Promotion runs until 01.01.1970</span>
        </div>
    </product-price>

Of course you do not need to define it by hand. We have designed a product_price macro as well as a product_prices module to handle these operations. You can read those documentations to find out about all possible configuration options of the product prices.