0

I'm trying to customize Order Summary in the sidebar. enter image description here

The module that I'm currently working on will modify the final total price and I need to display the additional price under Shipping.

I've taken a look into Magento/Checkout/view/frontend/layout/checkout_index_index.xml and it seems like the totals are defined in the layout starting from line 365. Following this guide, I've tried to insert a new child for totals. I've given the component a JavaScript file and in that file I've also linked my .HTML theme. I'm basically following how it's done in Magento_Checkout. Unfortunately, this did not work.

To see if I'm doing something wrong, I tried changing the title of one of the <item>'s. For example, in Magento/Checkout/view/frontend/web/template/summary/shipping.html, if I understand correctly, line 10 takes the title that's given in line 374 of checkout_index_index.xml layout file. However, after overriding it with my module's checkout_index_index.xml there's no change, so there's likely I'm doing something wrong.

Would appreciate your help!

Edit 1:

I've tried the solution posted below. In fact it was quite similar to what I had initially but it still doesn't do the job. I feel like I'd better share what I have currently:

  1. checkout_index_index.xml (I'm also overriding one other component but that works without problems)
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <css src="Vendor_Module::css/style.css" />
 </head>
 
 <body>
 <referenceBlock name="checkout.root">
 <arguments>
 <argument name="jsLayout" xsi:type="array">
 <item name="components" xsi:type="array">
 <item name="checkout" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="steps" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="shipping-step" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="shippingAddress" xsi:type="array">
 <item name="component" xsi:type="string">Vendor_Module/js/view/shipping</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 <item name="sidebar" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="totals" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="fee" xsi:type="array">
 <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/cart/totals/setupfee</item>
 <item name="sortOrder" xsi:type="string">20</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">Vendor_Module/checkout/cart/summary/setupfee</item>
 <item name="title" xsi:type="string" translate="true">Test</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>
  1. I have originally had a single .js file but I followed the answer given below so:

js/view/checkout/cart/summary/setupfee.js

define(
[
 'Magento_Checkout/js/view/summary/abstract-total',
 'Magento_Checkout/js/model/quote',
 'Magento_Catalog/js/price-utils',
 'Magento_Checkout/js/model/totals'
],
function (Component, quote, priceUtils, totals) {
 "use strict";
 return Component.extend({
 defaults: {
 isFullTaxSummaryDisplayed: window.checkoutConfig.isFullTaxSummaryDisplayed || false,
 template: 'Vendor_Module/checkout/cart/summary/setupfee'
 },
 totals: quote.getTotals(),
 isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
 isDisplayed: function() {
 return this.isFullMode();
 },
 getRawSetupFee: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return price;
 },
 getValue: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return this.getFormattedPrice(price);
 },
 getBaseValue: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return priceUtils.formatPrice(price, quote.getBasePriceFormat());
 }
 });
});

js/view/checkout/cart/totals/setupfee.js

define(
[
 'Vendor_Module/js/view/checkout/cart/summary/setupfee'
],
function (Component) {
 'use strict';
 return Component.extend({
 /**
 * @override
 */
 isDisplayed: function () {
 return true;
 }
 });
});
  1. template/checkout/cart/summary/setupfee.html
<!-- ko -->
 <tr class="totals setup-fee excl">
 <th class="mark" scope="row">
 <span class="label" data-bind="text: title"></span>
 <span class="value" data-bind="text: getValue()"></span>
 </th>
 <td class="amount">
 <span class="price"
 data-bind="text: getValue(), attr: {'data-th': title}"></span>
 </td>
 </tr> 
<!-- /ko -->

As far as I can tell, all my files are in correct directories. I don't really care much about what's going on in .js files with the pricing and everything. For now I just want to make sure that this new <item> works and is displayed in Order Summary. The rest I believe that I will be able to handle on my own. I'm just stuck here :s

asked Mar 22, 2021 at 18:43

2 Answers 2

0

Add this in NameSpace_YourModule/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceBlock name="checkout.root">
 <arguments>
 <argument name="jsLayout" xsi:type="array">
 <item name="components" xsi:type="array">
 <item name="checkout" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="sidebar" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="summary" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="totals" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="fee" xsi:type="array">
 <item name="component" xsi:type="string">NameSpace_YourModule/js/view/checkout/cart/totals/setupfee</item>
 <item name="sortOrder" xsi:type="string">20</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">NameSpace_YourModule/checkout/cart/totals/setupfee</item>
 <item name="title" xsi:type="string" translate="true">Setup/Design Fee</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

And now you will need three files:

1. NameSpace_YourModule/view/frontend/web/js/view/checkout/cart/totals/setupfee.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define(
 [
 'NameSpace_YourModule/js/view/checkout/summary/setupfee'
 ],
 function (Component) {
 'use strict';
 return Component.extend({
 /**
 * @override
 */
 isDisplayed: function () {
 return true;
 }
 });
 }
);

2. NameSpace_YourModule/view/frontend/web/js/view/checkout/cart/summary/setupfee.js

/*global alert*/
define(
 [
 'Magento_Checkout/js/view/summary/abstract-total',
 'Magento_Checkout/js/model/quote',
 'Magento_Catalog/js/price-utils',
 'Magento_Checkout/js/model/totals'
 ],
 function (Component, quote, priceUtils, totals) {
 "use strict";
 return Component.extend({
 defaults: {
 isFullTaxSummaryDisplayed: window.checkoutConfig.isFullTaxSummaryDisplayed || false,
 template: 'NameSpace_YourModule/js/view/checkout/summary/setupfee'
 },
 totals: quote.getTotals(),
 isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
 isDisplayed: function() {
 return this.isFullMode();
 },
 getRawSetupFee: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return price;
 },
 getValue: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return this.getFormattedPrice(price);
 },
 getBaseValue: function() {
 var price = 0;
 if (this.totals()) {
 price = totals.getSegment('fee').value;
 }
 return priceUtils.formatPrice(price, quote.getBasePriceFormat());
 }
 });
 }
);

3. NameSpace_YourModule/view/frontend/web/js/view/checkout/summary/setupfee.html

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko -->
 <tr class="totals setup-fee excl">
 <th class="mark" scope="row">
 <span class="label" data-bind="text: title"></span>
 <span class="value" data-bind="text: getValue()"></span>
 </th>
 <td class="amount">
 <span class="price"
 data-bind="text: getValue(), attr: {'data-th': title}"></span>
 </td>
 </tr> 
<!-- /ko -->

To show it in cart page

4. Add this in NameSpace_YourModule/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceBlock name="checkout.cart.totals">
 <arguments>
 <argument name="jsLayout" xsi:type="array">
 <item name="components" xsi:type="array">
 <item name="block-totals" xsi:type="array">
 <item name="children" xsi:type="array">
 <item name="setup_fee" xsi:type="array">
 <item name="component" xsi:type="string">NameSpace_YourModule/js/view/checkout/cart/totals/setupfee</item>
 <item name="sortOrder" xsi:type="string">20</item>
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">NameSpace_YourModule/checkout/cart/totals/setupfee</item>
 <item name="title" xsi:type="string" translate="true">Setup/Design Fee</item>
 </item>
 </item>
 </item>
 </item>
 </item>
 </argument>
 </arguments>
 </referenceBlock>
 </body>
</page>

5. NameSpace_YourModule/view/frontend/web/template/checkout/cart/totals/setupfee.html

<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko -->
<tr class="totals setup-fee excl">
 <th class="mark" colspan="1" scope="row" data-bind="text: title"></th>
 <td class="amount">
 <span class="price" data-bind="text: getValue()"></span>
 </td>
</tr>
<!-- /ko -->

Hope this works.

answered Mar 23, 2021 at 1:27
1
  • Thanks for your reply. I've tried your solution but it doesn't seem to work still. I've edited my original post, showing what I currently have. Commented Mar 23, 2021 at 13:37
0

After looking into my checkout_index_index.xml I realized an obvious mistake of mine. I missed the following in my code:

<item name="summary" xsi:type="array">
 <item name="children" xsi:type="array">

Watch out while coding tired folks!

answered Mar 23, 2021 at 16:36

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.