Magento 2：如何在产品购物车内添加带有产品图像的<img>标签添加成功消息

Question

我需要在 Magento 2 中显示购物车内添加产品的消息。 我正确覆盖了 addCartSuccessMessage phtml，但我无法在此 phtml 文件中添加 标签，因为它消失了。

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Framework\View\Element\Template $block */
?>
<div class="addCartSuccessMessaheHidden">
    <img src="productImageUrl" />
    <?= $block->escapeHtml(__(
        'You added %1 to your <a href="%2">shopping cart</a>.',
        $block->getData('product_name'),
        $block->getData('cart_url')
    ), ['a']);
    ?>
</div>

用户在购物车中添加产品后，我需要的是这样的东西：

谢谢！！

我尝试添加一个img标签，我尝试使用js添加一个弹出窗口......

Answer 1

您可以按照以下步骤在添加到购物车消息中添加img标签

打开控制器文件 Magento\Checkout\Controller\Cart\Add

否则添加此代码我使用对象管理器，不要

else {
                    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                    $store = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore();
                    $imageUrl = $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $product->getImage();
                    $this->messageManager->addComplexSuccessMessage(
                        'addCartSuccessMessage',
                        [
                            'product_name' => $product->getName(),
                            'product_image' => $imageUrl,
                            'cart_url' => $this->getCartUrl(),
                            
                        ]
                    );
                }
Above code to get img url

第二步 在 addCartSuccessMessage.phtml 文件中 使用此代码

<?= $block->escapeHtml(__(
    'You added %1 to your <a href="%2">shopping cart</a> and %3',
    $block->getData('product_name'),

    $block->getData('cart_url'),
    $block->getData('product_image')

), ['a']); ?>

第三步 在 /magento/module-theme/view/frontend/web/js/view/messages.js

用这个函数更新prepareMessageForHtml函数

prepareMessageForHtml: function (message) {
            console.log('prepareMessageForHtmlss');
            console.log(message);
            const splitMessage = message.split(' and ');
            const cartItem = splitMessage[0];
            const imageUrl = splitMessage[1];
            console.log('Cart Item:', cartItem);
            console.log('Image URL:', imageUrl);
            return escaper.escapeHtml(cartItem, this.allowedTags) + '<img src="' + imageUrl + '">';
        }

结果会是这样的

在此输入图片描述