Display Message on Cart Summary Page in Magento 2

cartcheckoutmagento2

I have set discount cart price rule. But before rule apply print message on cart summary page .
Example:

  1. When order total $400 then display message "Orders over $500 receives 5% off ".

  2. When order total $800 then display message "Orders over $1000 receives 10% off "

Before image

enter image description here

Expected output

enter image description here

Best Answer

Pmclain/TotalMessage/etc/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="Pmclain_TotalMessage" setup_version="0.0.1">
    <sequence>
      <module name="Magento_Quote" />
      <module name="Magento_Checkout" />
    </sequence>
  </module>
</config>

Pmclain/TotalMessage/etc/frontend/di.xml

Add checkout config provider for passing the message to component on checkout page.

<?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\CompositeConfigProvider">
    <arguments>
      <argument name="configProviders" xsi:type="array">
        <item name="pmclain_totalmessage_config_provider" xsi:type="object">Pmclain\TotalMessage\Model\ConfigProvider</item>
      </argument>
    </arguments>
  </type>
</config>

Pmclain/TotalMessage/Helper/Data.php

<?php
namespace Pmclain\TotalMessage\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() >= 400
        && $quote->getBaseSubtotalWithDiscount() < 500) {
      return __('Orders over $500 receive 5% off.');
    }

    if ($quote->getBaseSubtotalWithDiscount() >= 800
        && $quote->getBaseSubtotalWithDiscount() < 1000) {
      return __('Orders over $1,000 receive 10% off.');
    }

    return false;
  }
}

Pmclain/TotalMessage/Block/Message.php

<?php
namespace Pmclain\TotalMessage\Block;

use Magento\Framework\View\Element\Template;
use Pmclain\TotalMessage\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();
  }
}

Pmclain/TotalMessage/Model/ConfigProvider.php

<?php
namespace Pmclain\TotalMessage\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Pmclain\TotalMessage\Helper\Data;

class ConfigProvider implements ConfigProviderInterface
{
  protected $_helper;

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

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

Pmclain/TotalMessage/view/frontend/layout/checkout_cart_index.xml

Layout update for adding message block on cart page.

<?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="Pmclain\TotalMessage\Block\Message" name="checkout.cart.summary.totalmessage" template="Pmclain_TotalMessage::message.phtml" after="checkout.cart.totals.container" />
    </referenceContainer>
  </body>
</page>

Pmclain/TotalMessage/view/frontend/templates/message.phtml

Message template for cart page summary.

<?php
/** @var Pmclain\TotalMessage\Block\Message $block */
?>
<?php if ($block->getMessage()): ?>
  <div class="total-message">
    <span><?php echo $block->getMessage() ?></span>
  </div>
<?php endif; ?>

Pmclain/TotalMessage/view/frontend/layout/checkout_index_index.xml

Layout update for adding message component in cart summary block of checkout.

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

Pmclain/TotalMessage/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;
      }
    });
  }
);

Pmclain/TotalMessage/view/frontend/web/template/message.html

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

Resulting message displayed on cart view. cart view message

Message displayed in checkout summary. checkout message

Related Topic