2

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?

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 '18 at 15:59
  • will this also include the currency symbol? – Ben Crook Jun 6 '18 at 16:00
  • 1
    @BenCrook yes . – Sohel Rana Jun 6 '18 at 16:01
  • @SohelRana but what about if I wanted to use in product detail page ? – Himanshu Aug 30 '19 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 '20 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, privacy policy and cookie policy

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