0

I have a requirement to show a custom label with the value from the custom table inside the cart and checkout summary.

Example : enter image description here

I have added the below code.

Vendor/Module/etc/frontend/di.xml

<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
  <argument name="configProviders" xsi:type="array">
    <item name="totalmessage_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
  </argument>
</arguments>

Vendor\Module\Model\ConfigProvider.php

  <?php
   namespace Vendor\Module\Model;

   use Magento\Checkout\Model\ConfigProviderInterface;
   use Vendor\Module\Helper\Data;

   class ConfigProvider implements ConfigProviderInterface
   {
     protected $_helper;

     public function __construct(Data $helper)
     {
      $this->_helper = $helper;
     }

     public function getConfig()
     {
       return [
        'totalmessage' => $this->_helper->getTotalMessage()
       ];
     }
   }

Vendor/Module/Helper/Data.php

 <?php
   namespace Vendor\Module\Helper;

   use Magento\Framework\App\Helper\AbstractHelper;
   use Magento\Framework\App\Helper\Context;
   use Magento\Checkout\Model\Session;

   class Data extends AbstractHelper
   {
       protected $_checkoutSession;

       public function __construct(
        Context $context,
        Session $session
        ) {
          parent::__construct($context);
          $this->_checkoutSession = $session;
       }

   public function getTotalMessage()
     {
    $quote = $this->_checkoutSession->getQuote();
    if ($quote->getBaseSubtotalWithDiscount() >= 100) {
       return __('custom message.');
    }
   return false;
 }
}

Vendor/Module/Block/Message.php

<?php
namespace Vendor\Module\Block;

use Magento\Framework\View\Element\Template;
use Vendor\Module\Helper\Data;

class Message extends Template
 {
  protected $_helper;

  public function __construct(
      Template\Context $context,
       Data $helper,
      array $data = []
    ) {
     parent::__construct($context, $data);
      $this->_helper = $helper;
   }

   public function getMessage()
   {
      return $this->_helper->getTotalMessage();
    }
}

Vendor/Module/view/frontend/layout/checkout_cart_index.xml

<?xml version="1.0"?>
  <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="cart.summary">
    <block class="Vendor\Module\Block\Message" 
   name="checkout.cart.summary.totalmessage" 
    template="Vendor_Module::message.phtml" 
    after="checkout.cart.totals.container" />
   </referenceContainer>
  </body>
</page>

Vendor/Module/view/frontend/templates/message.phtml

<?php if ($block->getMessage()): ?>
  <div class="total-message">
   <span><?php echo $block->getMessage() ?></span>
  </div>
<?php endif; ?>

Vendor/Module/view/frontend/layout/checkout_index_index.xml

 <?xml version="1.0"?>
  <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="itemsBefore" xsi:type="array">
                      <item name="children" xsi:type="array">
                        <item name="totalMessage" xsi:type="array">
                          <item name="component" xsi:type="string">Vendor_Module/js/view/message</item>
                          <item name="displayArea" xsi:type="string">itemsBefore</item>
                          <item name="config" xsi:type="array">
                            <item name="template" xsi:type="string">Vendor_Module/message</item>
                          </item>
                        </item>
                      </item>
                    </item>
                  </item>
                </item>
              </item>
            </item>
          </item>
        </item>
      </item>
    </argument>
  </arguments>
</referenceBlock>

Vendor/Module/view/frontend/web/js/view/message.js

  define(
  [
  'uiComponent'
 ],
 function (Component) {
   "use strict";
   return Component.extend({
  defaults: {
    message: false
  },

  initialize: function() {
    this._super();
    this.message = window.checkoutConfig.totalmessage;
  },

  hasMessage: function() {
    if (this.message) {
      return true;
    }

    return false;
  },

  getMessage: function() {
    return this.message;
  }
  });

} );

Vendor/Module/view/frontend/web/template/message.html

<!-- ko if: hasMessage() -->
   <div class="block total-message">
       <span data-bind="text: getMessage()"></span>
   </div>
  <!-- /ko -->

This is working fine but it displayed after the Grand total, Can we move it above the Order Total?

How this can be done?

Please someone help me on this.

1
  • Can you please share code which you applied? Oct 4, 2021 at 6:51

1 Answer 1

1

You can follow this below way. I added value as static. You need to make it dynamic based on your requirement.

Create checkout_cart_index.xml at app/code/Vendor/Module/view/frontend/ and paste the below code :

<?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="fee" xsi:type="array">
                                    <item name="component"  xsi:type="string">Vendor_Module/js/view/checkout/cart/totals/customvalue</item>
                                    <item name="sortOrder" xsi:type="string">80</item>
                                    <item name="config" xsi:type="array">
                                         <item name="template" xsi:type="string">Vendor_Module/checkout/cart/totals/customvalue</item>
                                        <item name="title" xsi:type="string" translate="true">Custom Value</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Create customvalue.js at app/code/Vendor/Module/view/frontend/web/js/view/checkout/cart/totals/ and paste the below code :

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
define([
    'Vendor_Module/js/view/checkout/summary/customvalue'
],
    function (Component) {
        'use strict';

        return Component.extend({

            /**
             * @override
             */
            isDisplayed: function () {
                return true;
            }
        });
    }
);

Create customvalue.js at app/code/Vendor/Module/view/frontend/web/js/view/checkout/summary/ and paste the below code :

define([
    'Magento_Checkout/js/view/summary/abstract-total'
],
    function (Component) {
        "use strict";
        return Component.extend({
            isDisplayed: function() {
                return true;
            }
        });
    }
);

Create customvalue.html at app/code/Vendor/Module/view/frontend/web/template/checkout/cart/totals/ and paste the below code :

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

Output :

enter image description here

2
  • Thank you for the answer, how it works in checkout?
    – Manjunath
    Oct 4, 2021 at 18:35
  • Can this be moved to before the order Total in checkout page? please share your screenshot of checkout
    – Manjunath
    Oct 4, 2021 at 18:38

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.