Magento2: Display HTML tags in messageManager messages

[PieterCappelle]

Preconditions

1. Default Magento installation 2.1.2
2. Install Sample Data
3. No plugins or extensions

Steps to reproduce

1. Create language module
2. Add the following line to your CSV file (like en_GB.csv)
3. "You added %1 to your shopping cart.","You added %1 to your shopping cart. <em>OKAY</em>",module,Magento_Checkout
4. Clear cache (if enabled)
5. Add product to your basket in the frontend
6. Wait for the message in the green bar

Expected result

1. "You added XXXX to your shopping cart. OKAY" (where OKAY is italic)

Actual result

1. "You added XXXX to your shopping cart. <em>OKAY</em>"

[SerhiyShkolyarenko]

@PieterCappelle thank you for the report.
Tags inside the messages are not allowed.

"You added XXXX to your shopping cart. <em>OKAY</em>"

it is expected result for us.

[SerhiyShkolyarenko]

We are closing the issue, but feel free to leave messages if we didn't cover the topic.

[PieterCappelle]

Pity, this means people can never use HTML tags like a, em or img in the MessageManager. This means when you throw some error message you can't add link to explanation. Sounds strange for me. Hope you can understand my case.

[schmengler]

In Magento 1 it was possible to disable escaping for the whole message block with setEscapeMessageFlag()

Security-wise it is good that this has been removed, but instead it should be possible to set such a flag for individual messages.

I'm currently trying to implement something with the new addComplexErrorMessage() method, which allows custom renderers. This seems to be the intended way for HTML messages.

There is already a "BlockRenderer" which allows you to use arbitrary blocks in messages. But an additional "HtmlRenderer" would be useful.

[PieterCappelle]

@schmengler Are you creating PR? I'm happy to help you.

[schmengler]

I found a good solution, built it into a project for now, but a PR will follow

[schmengler]

for reference, this is how I added the renderer:

Project\Theme\etc\frontend\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\Framework\View\Element\Message\Renderer\RenderersPool">
        <arguments>
            <argument name="renderers" xsi:type="array">
                <item name="html_renderer" xsi:type="object">Project\Theme\View\HtmlMessageRenderer</item>
            </argument>
        </arguments>
    </type>
    <type name="Magento\Framework\View\Element\Message\MessageConfigurationsPool">
        <arguments>
            <argument name="configurationsMap" xsi:type="array">
                <item name="html_message" xsi:type="array">
                    <item name="renderer" xsi:type="const">Project\Theme\View\HtmlMessageRenderer::CODE</item>
                </item>
            </argument>
        </arguments>
    </type>
</config>

Project\Theme\View\HtmlMessageRenderer.php

namespace Project\Theme\View;

use Magento\Framework\Message\MessageInterface;
use Magento\Framework\View\Element\Message\Renderer\RendererInterface;

class HtmlMessageRenderer implements RendererInterface
{
    const CODE = 'html_renderer';

    const MESSAGE_IDENTIFIER = 'html_message';

    /**
     * @param MessageInterface $message
     * @param array $initializationData
     * @return string
     */
    public function render(MessageInterface $message, array $initializationData)
    {
        return $message->getData()['html'];
    }
}

Usage

$this->messages->addComplexNoticeMessage(
    HtmlMessageRenderer::MESSAGE_IDENTIFIER,
    ['html' => (string)$phrase]
);

[PieterCappelle]

@schmengler Looks good, but it's not really what I want to do. I want to edit the message "You added %1 to your shopping cart." to "You added %1 to your shopping cart. <a href="#">Go to cart</a>.". In your case I should trigger the event after add to cart and change the message in the messageManager. Is possible, but is this dev-friendly?

[schmengler]

Good point @PieterCappelle , my use case were custom error messages but ideally there should be a way for existing messages as well, but without disabling escaping altogether.

Any idea how an interface for that could look like? I can't think of anything without an event or plugin to change the message, but maybe we can at least make this conversion easier.

[realadityayadav]

You can use the deprecated method of addError instead of addErrorMessage to show html tags in the message.