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.

asked Oct 2, 2021 at 18:09
1
  • Can you please share code which you applied? Commented 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

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

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.