Magento – Magento 2: Rearrange the Checkout page Summary Sidebar

checkoutmagento2xml

Currently, the Summary on the Checkout page displays the totals at the top of the summary and the cart items beneath it. I would like it the other way around – to place the cart items at the top of the summary sidebar and the totals beneath.

If I rearrange the summary child items totals and cart_items in Magento_2_Installation/vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml, then the items are reaaranged how I'd like them (items above totals).

Obviously, updating the core files isn't the correct way to do it. So, I created another checkout_index_index.xml and placed it here: Magento_2_Installation/app/design/frontend/mike/mikesite/Magento_Checkout/layout/checkout_index_index.xml. Unfortunately, this doesn't rearrange the child items of Summary and has no effect at all.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <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" /> was here originally -->

                                                <item name="itemsBefore" xsi:type="array">
                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                    <item name="children" xsi:type="array">
                                                        <!-- merge your components here -->
                                                    </item>
                                                </item>
                                                <item name="cart_items" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="details" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="thumbnail" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                    <item name="displayArea" xsi:type="string">before_details</item>
                                                                </item>
                                                                <item name="subtotal" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                    <item name="displayArea" xsi:type="string">after_details</item>
                                                                </item>
                                                            </item>
                                                        </item>

                                                    </item>
                                                </item>
                                                <item name="itemsAfter" xsi:type="array">
                                                    <item name="component" xsi:type="string">uiComponent</item>
                                                    <item name="children" xsi:type="array">
                                                        <!-- merge your components here -->
                                                    </item>
                                                </item>
                                                <item name="totals" xsi:type="array">
                                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/totals</item>
                                                    <item name="displayArea" xsi:type="string">totals</item>
                                                    <item name="config" xsi:type="array">
                                                        <item name="template" xsi:type="string">Magento_Checkout/summary/totals</item>
                                                    </item>
                                                    <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 -->
                                                        <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>
                                                        <item name="shipping" xsi:type="array">
                                                            <item name="component"  xsi:type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                            <item name="config" xsi:type="array">
                                                                <item name="title" xsi:type="string" translate="true">Shipping</item>
                                                                <item name="notCalculatedMessage" xsi:type="string" translate="true">Not yet calculated</item>
                                                            </item>
                                                        </item>
                                                        <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>
                                                        </item>
                                                    </item>
                                                </item>                                                    
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>
</body>

Best Answer

In my theme override of app/design/frontend/<Vendorname>/<theme>/Magento_Checkout/layout/checkout_index_index.xml I used sort order to rearrange the child items, where a lower number (starting from 0) indicates a child should appear earlier in the sequence. This code moved the totals below the items for me:

<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.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="sortOrder" xsi:type="string">99</item>
                                                </item>
                                                <item name="cart_items" xsi:type="array">
                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Related Solutions

Magento – Magento 2: Checkout page sidebar summary – display item size

You will have to create a plugin for that. I wanted to add product flavor to order summary. This is the way I created a plugin and achieved what I wanted.

Vendor = Sejal

Files you need to create:

Registration.php : app\code\Sejal\Flavor\registration.php
di.xml : app\code\Sejal\Flavor\etc\di.xml
module.xml : app\code\Sejal\Flavor\etc\module.xml
ConfigProviderPlugin.php : app\code\Sejal\Flavor\Plugin\ConfigProviderPlugin.php
details.html : copy of vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html

you can override this file in your theme like this

app\design\frontend\Vendor\themename\Magento_Checkout\web\template\summary\item\details.html

Code:

registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Sejal_Flavor',
    __DIR__
);

di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\DefaultConfigProvider">
        <plugin name="AddAttPlug" type="Sejal\Flavor\Plugin\ConfigProviderPlugin" />
    </type>
</config>

module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Sejal_Flavor" setup_version="1.0.0">
    </module>
</config>

ConfigProviderPlugin.php

<?php

namespace Sejal\Flavor\Plugin;

class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{

    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {

        $items = $result['totalsData']['items'];

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        for($i=0;$i<count($items);$i++){

            $quoteId = $items[$i]['item_id'];
            $quote = $objectManager->create('\Magento\Quote\Model\Quote\Item')->load($quoteId);
            $productId = $quote->getProductId();
            $product = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);
            $productFlavours = $product->getResource()->getAttribute('flavors')->getFrontend()->getValue($product);         
            if($productFlavours == 'No' || $productFlavours == 'NA'){
                $productFlavours = '';
            }
            $items[$i]['flavor'] = $productFlavours;
        }
        $result['totalsData']['items'] = $items;
        return $result;
    }

}

details.html

Copy vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html in theme and add

<div class="product-item-flavor" data-bind="text: $parent.flavor"></div>

below

<strong class="product-item-name" data-bind="text: $parent.name"></strong>

However the flavor is displayed only on checkout shipping information page not on payment page.

Magento 2 – Remove Sidebar from Checkout

If you want to remove UI component form layout xml, you have to disable it like

Replace this code

<item name="component" xsi:type="string">Magento_Checkout/js/view/sidebar</item>

<item name="componentDisabled" xsi:type="string">Magento_Checkout/js/view/sidebar</item>

Clear cache by : php bin/magento cache:clean

Note : do not modify core layout file, you have to override by your theme layout. this is only for reference how can we disable any layout component.

Let me know if you have any difficulty.

Best Answer

Related Solutions

Magento – Magento 2: Checkout page sidebar summary – display item size

Magento 2 – Remove Sidebar from Checkout

Related Topic