Magento – How to overrite cart subtotal price in order summary block magento2

magento2magento2.2magento2.2.6magento2.3

can any one know that i want to update the price of the checkout page order summary Cart subtotal line.

how can i do that ?

knowckout file is render is

subtotal.html : 

<tr class="totals">
    <th class="mark" scope="row" data-bind="text: title"></th>
    <td class="amount">
        <span class="price" data-bind ="text: getValue(), attr:{'data-label': title}"></span>
        <!-- ko foreach: elems() -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </td>
</tr>

and it will render from

checkout_index_index.xml : 

<item name="subtotal" xsi:type="array">
    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/subtotal</item>
        <item name="config" xsi:type="array">
        <item name="title" xsi:type="string" translate="true">Cart Subtotal</item>
    </item>
</item>

please let me know if any one knows about this

thanks

Best Answer

If you want to overwrite a render of the price itself (e.g. 3.55 $ ) take a look into getFormattedPrice() method of the total.

vendor/magento/module-checkout/view/frontend/web/js/view/summary/abstract-total.js

getFormattedPrice: function (price) {
    return priceUtils.formatPrice(price, quote.getPriceFormat());
},

as you can see it uses a priceUtils.formatPrice which is locate in the

vendor/magento/module-catalog/view/base/web/js/price-utils.js

and having next content:

/**
 * Formatter for price amount
 * @param  {Number}  amount
 * @param  {Object}  format
 * @param  {Boolean} isShowSign
 * @return {String}              Formatted value
 */
function formatPrice(amount, format, isShowSign) {
    var s = '',
        precision, integerRequired, decimalSymbol, groupSymbol, groupLength, pattern, i, pad, j, re, r, am;

    format = _.extend(globalPriceFormat, format);

    // copied from price-option.js | Could be refactored with varien/js.js

    precision = isNaN(format.requiredPrecision = Math.abs(format.requiredPrecision)) ? 2 : format.requiredPrecision;
    integerRequired = isNaN(format.integerRequired = Math.abs(format.integerRequired)) ? 1 : format.integerRequired;
    decimalSymbol = format.decimalSymbol === undefined ? ',' : format.decimalSymbol;
    groupSymbol = format.groupSymbol === undefined ? '.' : format.groupSymbol;
    groupLength = format.groupLength === undefined ? 3 : format.groupLength;
    pattern = format.pattern || '%s';

    if (isShowSign === undefined || isShowSign === true) {
        s = amount < 0 ? '-' : isShowSign ? '+' : '';
    } else if (isShowSign === false) {
        s = '';
    }
    pattern = pattern.indexOf('{sign}') < 0 ? s + pattern : pattern.replace('{sign}', s);

    // we're avoiding the usage of to fixed, and using round instead with the e representation to address
    // numbers like 1.005 = 1.01. Using ToFixed to only provide trailing zeroes in case we have a whole number
    i = parseInt(
            amount = Number(Math.round(Math.abs(+amount || 0) + 'e+' + precision) + ('e-' + precision)),
            10
        ) + '';
    pad = i.length < integerRequired ? integerRequired - i.length : 0;

    i = stringPad('0', pad) + i;

    j = i.length > groupLength ? i.length % groupLength : 0;
    re = new RegExp('(\\d{' + groupLength + '})(?=\\d)', 'g');

    // replace(/-/, 0) is only for fixing Safari bug which appears
    // when Math.abs(0).toFixed() executed on '0' number.
    // Result is '0.-0' :(

    am = Number(Math.round(Math.abs(amount - i) + 'e+' + precision) + ('e-' + precision));
    r = (j ? i.substr(0, j) + groupSymbol : '') +
        i.substr(j).replace(re, '$1' + groupSymbol) +
        (precision ? decimalSymbol + am.toFixed(precision).replace(/-/, 0).slice(2) : '');

    return pattern.replace('%s', r).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

So you can totally overwrite the method getFormattedPrice in own component which should replace original one, or you can change the quote.getPriceFormat() to a desired one, or you can write own logic inside the overwritten total component.

Related Topic