'getFormattedPrice' undefined on checkout

Question

I need to get a list under each product in the form: - Unit price - Amount - Amount based on price and quantity

Rewrite template: vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html

my Template

<div class="product-item-details">
    <div class="product-item-inner">
        <div class="product-item-name-block">
            <strong class="product-item-name" data-bind="html: $parent.name"></strong>
            <div class="price">
                <span class="label"><!-- ko i18n: 'Price' --><!-- /ko --></span>
                <span class="value" data-bind="text: $parent.price"></span>
            </div>
            <div class="details-qty">
                <span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
                <span class="value" data-bind="text: $parent.qty"></span>
            </div>
            <!-- ko foreach: getRegion('after_details') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</div>

code block

<div class="price">
    <span class="label"><!-- ko i18n: 'Price' --><!-- /ko --></span>
    <span class="value" data-bind="text: $parent.price"></span>
</div>

Must give a formatted price: 1.780,00 €

But on the front end, I see: 1780

I used the method: getFormattedPrice($parent.price)

but i was getting undefined

Answer 1

If you didn't also overwrite the js file for your template, the method getFormattedPrice is not defined in your component. That is why you get undefined when trying to use getFormattedPrice.

If you didn't overwrite it then the component for your tempalte is this one: vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js .

The file src/vendor/magento/module-checkout/view/frontend/web/js/view/summary/abstract-total.js defines the getFormattedPrice method you want to use.

I see 2 easy ways to fix this, so you can use getFormattedPrice in your template:

A) Extend details.js and implement getFormattedPrice the same way like abstract-total.js

B) Overwrite details.js and extend from abstract-total.js so you can use getFormattedPrice in your template