3

In Magento 2's checkout summary I managed to add price values to each "item in cart":

<span data-bind="text: $parent.price_incl_tax"></span>
<span data-bind="text: $parent.row_total_incl_tax"></span>

Unfortunately those are plain numbers and a debug shows that $parent does not contain pre-formatted price values:

{
  "item_id":134,
  "price":420.17,
  "base_price":420.17,
  "qty":1,
  "row_total":420.17,
  "base_row_total":420.17,
  "row_total_with_discount":0,
  "tax_amount":79.83,
  "base_tax_amount":79.83,
  "tax_percent":19,
  "discount_amount":0,
  "base_discount_amount":0,
  "discount_percent":0,
  "price_incl_tax":500,
  "base_price_incl_tax":500,
  "row_total_incl_tax":500,
  "base_row_total_incl_tax":500,
  "options":"[]",
  "weee_tax_applied_amount":null,
  "weee_tax_applied":null,
  "name":"My awesome product"
}

How could I format these as actual price values?

2 Answers 2

6

VendorName/ModuleName/view/frontend/requirejs-config.js


var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/summary/item/details': {
                'VendorName_ModuleName/js/mixin/details-mixin': true
            }
        }
    }
};

VendorName/ModuleName/view/frontend/web/js/mixin/details-mixin.js


define([
    'Magento_Checkout/js/model/quote',
    'Magento_Catalog/js/price-utils'
], function(
    quote,
    priceUtils
) {
    'use strict';

    return function (target) {
        return target.extend({
            /**
             * @param {*} price
             * @return {*|String}
             */
            getFormattedPrice: function (price) {
                return priceUtils.formatPrice(price, quote.getPriceFormat());
            }
        });
    }
});

Now use :


<span data-bind="text: getFormattedPrice($parent.price_incl_tax)"></span>
<span data-bind="text: getFormattedPrice($parent.row_total_incl_tax)"></span>

Clear cache and deploy static content.

6
  • This answer is cleaner than mine.
    – Ben Crook
    Jun 6, 2018 at 15:59
  • will this also include the currency symbol?
    – Ben Crook
    Jun 6, 2018 at 16:00
  • 1
    @BenCrook yes .
    – Sohel Rana
    Jun 6, 2018 at 16:01
  • @SohelRana but what about if I wanted to use in product detail page ?
    – Himanshu
    Aug 30, 2019 at 9:24
  • I've got this error: ReferenceError: Unable to process binding "text: function(){return getFormattedPrice(price_incl_tax) }" Message: getFormattedPrice is not defined
    – krybbio
    Jul 15, 2020 at 9:58
1

To convert your number to a string you can use .toString():

<span data-bind="text: $parent.price_incl_tax.toString()"></span>
<span data-bind="text: $parent.row_total_incl_tax.toString()"></span>

You'll also need to get the currency symbol (unless you're happy to hardcode it), there are some questions about that below:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.