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

checkoutknockoutjsmagento2

In Magento_2_Installation/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html, data-bindings (via the knockout js files) places the name and qty of the item to be displayed in the Sidebar Summary.
How would I also pull in the size of the item to be displayed along with the name and qty using data-binding?

For reference, I've included the file: Magento_2_Installation/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html

<div class="product-item-inner">
    <div class="product-item-name-block">
        <strong class="product-item-name" data-bind="text: $parent.name"></strong>
        <div class="details-qty">
            <span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
            <span class="value" data-bind="text: $parent.qty"></span>
        </div>
    </div>
    <!-- ko foreach: getRegion('after_details') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>

<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
    <span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
    <div data-role="content" class="content">
        <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
        <dl class="item-options">
            <!--ko foreach: JSON.parse($parent.options)-->
            <dt class="label" data-bind="text: label"></dt>
                <!-- ko if: ($data.full_view)-->
                <dd class="values" data-bind="html: full_view"></dd>
                <!-- /ko -->
                <!-- ko ifnot: ($data.full_view)-->
                <dd class="values" data-bind="html: value"></dd>
                <!-- /ko -->
            <!-- /ko -->
        </dl>
    </div>
</div>
<!-- /ko -->

Best Answer

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.

Related Solutions

Magento – Magento 2: Rearrange the Checkout page Summary Sidebar

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>

Magento 2: How to Display Product Available Quantity on Checkout Order Summary

Try following way:

Create Vendor/Module/etc/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="vendor_module_type_product_customer_data_default_item" type="Vendor\Module\Plugin\Checkout\Model\DefaultConfigProvider" sortOrder="1"/>
    </type>
</config>

And now create plugin:

Vendor/Module/Plugin/Checkout/Model/DefaultConfigProvider.php

namespace Vendor\Module\Plugin\Checkout\Model;

use Magento\Checkout\Model\Session as CheckoutSession;

class DefaultConfigProvider
{
    protected $stockItemRepository;
    protected $checkoutSession;

    public function __construct(
        CheckoutSession $checkoutSession,
        \Magento\CatalogInventory\Model\Stock\StockItemRepository $stockItemRepository
    ) {
        $this->checkoutSession = $checkoutSession;
        $this->stockItemRepository = $stockItemRepository;
    }

    /**
     * {@inheritdoc}
     */
    public function aroundGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
        \Closure $proceed
    ) {
        $result = $proceed();

        if (isset($result['totalsData'])) {
            $totalsData = $result['totalsData'];

            if (isset($totalsData['items'])) {
                $items = $totalsData['items'];

                foreach ($items as &$item) {
                    $item['qty'] = $item['qty'].$this->getAvailableStock($item['item_id']);
                }

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

        return $result;
    }

    public function getAvailableStock($item_id)
    {
        $quote = $this->checkoutSession->getQuote();
        $items = $quote->getAllItems();

        foreach ($items as $item) {
            if ($item->getId() == $item_id) {
                $productStock = $this->stockItemRepository->get($item->getProductId());
                if ($productStock->getQty()) {
                    $availableQty = $productStock->getQty() - $item->getQty();
                    return "  ".__("Available Qty: ") . $availableQty;
                }

                return '';
            }
        }

        return '';
    }

}

Best Answer

Related Solutions

Magento – Magento 2: Rearrange the Checkout page Summary Sidebar

Magento 2: How to Display Product Available Quantity on Checkout Order Summary

Related Topic