How is the \Magento\Checkout\Block\Cart\Totals (checkout.cart.totals) implemented inside the «Summary» container on a frontend cart page?

dmitry_fedyuk (Dmitrii Fediuk) March 31, 2016, 5:38pm 1

Context: How is the «checkout.cart.totals.container» implemented inside the «Summary» container on a frontend cart page?

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L135-L135


<block class="Magento\Checkout\Block\Cart\Totals" name="checkout.cart.totals" template="cart/totals.phtml">

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/templates/cart/totals.phtml#L7-L22


<?php
/**
* Shopping cart totals template
* @var $block \Magento\Checkout\Block\Cart\Totals
*/
?>
<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">
   <!-- ko template: getTemplate() --><!-- /ko -->
   <script type="text/x-magento-init">
           {
               "#cart-totals": {
                   "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
               }
           }
   </script>
</div>

The checkout.cart.totals block contants the single Magento_Checkout/js/view/cart/totals UI component:

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L136-L139


<arguments>
    <argument name="jsLayout" xsi:type="array">
        <item name="components" xsi:type="array">
            <item name="block-totals" xsi:type="array">

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L140-L144


<item name="component" xsi:type="string">Magento_Checkout/js/view/cart/totals</item>
<item name="displayArea" xsi:type="string">totals</item>
<item name="config" xsi:type="array">
    <item name="template" xsi:type="string">Magento_Checkout/cart/totals</item>
</item>

The Magento_Checkout/js/view/cart/totals UI component contains the 3 primary UI components:

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L145-L147


<item name="children" xsi:type="array">
    <!-- sort order for this totals is configured on admin panel-->
    <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->

1. `subtotal` (`Magento_Checkout/js/view/summary/subtotal`)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L148-L154


<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">Subtotal</item>
        <item name="template" xsi:type="string">Magento_Checkout/cart/totals/subtotal</item>
    </item>
</item>

2. `shipping` (`Magento_Checkout/js/view/cart/totals/shipping`)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L155-L161


<item name="shipping" xsi:type="array">
    <item name="component"  xsi:type="string">Magento_Checkout/js/view/cart/totals/shipping</item>
    <item name="config" xsi:type="array">
        <item name="title" xsi:type="string" translate="true">Shipping</item>
        <item name="template" xsi:type="string">Magento_Checkout/cart/totals/shipping</item>
    </item>
</item>

3. `grand-total` (`Magento_Checkout/js/view/summary/grand-total`)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Checkout/view/frontend/layout/checkout_cart_index.xml#L162-L168


<item name="grand-total" xsi:type="array">
    <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/grand-total</item>
    <item name="config" xsi:type="array">
        <item name="title" xsi:type="string" translate="true">Order Total</item>
        <item name="template" xsi:type="string">Magento_Checkout/cart/totals/grand-total</item>
    </item>
</item>

The Magento_Checkout/js/view/cart/totals UI component can also contain additional UI components:

4. `before_grandtotal`, `discount` (`Magento_SalesRule/js/view/cart/totals/discount`)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/SalesRule/view/frontend/layout/checkout_cart_index.xml#L10-L30


<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="before_grandtotal" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="discount" xsi:type="array">
                                    <item name="component"  xsi:type="string">Magento_SalesRule/js/view/cart/totals/discount</item>
                                    <item name="config" xsi:type="array">
                                        <item name="title" xsi:type="string" translate="true">Discount</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>

5. `tax` (`Magento_Tax/js/view/checkout/cart/totals/tax`)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Tax/view/frontend/layout/checkout_cart_index.xml#L40-L46


<item name="tax" xsi:type="array">
    <item name="component"  xsi:type="string">Magento_Tax/js/view/checkout/cart/totals/tax</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Tax/checkout/cart/totals/tax</item>
        <item name="title" xsi:type="string" translate="true">Tax</item>
    </item>
</item>

6. `weee` (FPT, Fixed Product Tax)

github.com

magento/magento2/blob/bd1c47b/app/code/Magento/Weee/view/frontend/layout/checkout_cart_index.xml#L11-L28


<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="weee" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Weee/js/view/cart/totals/weee</item>
                            <item name="config" xsi:type="array">
                                <item name="title" xsi:type="string">FPT</item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

How is the «checkout.cart.totals.container» implemented inside the «Summary» container on a frontend cart page?

How to add a custom text below the «Discount» value on the frontend cart and checkout pages?

dmitry_fedyuk (Dmitrii Fediuk) Split this topic April 8, 2016, 1:35pm 2

A post was split to a new topic: How to update the cart totals block when a customer enters credit points?