如何在Magento 2中的图像上添加促销标签？

Question

如何在Magento 2的图像上放置促销标签图层。我所包含的图像来自开箱即用的Magento 2主题，它有一个文本“New Luma Yoga Collection ....”和按钮“Shop New Yoga”以某种方式放置在编辑器中的图像顶部。

这是它在编辑器中的外观

Answer 1

有多种方法可以实现这一目标。一种方法是将HTML元素直接添加到WYSIWYG编辑器中并使用HTML进行标记。这也是Luma主题如何做到这一点。如果您查看编辑器，则会在图像下方看到小蓝色的内容。如果从WYSIWYG切换到HTML，则可以看到此元素的HTML标记：

<span class="content bg-white">
    <span class="info">New Luma Yoga Collection</span>
    <strong class="title">Get fit and look fab in new seasonal styles</strong> 
    <span class="action more button">Shop New Yoga</span>
</span>

您可以简单地使用CSS来设置此元素的样式。

<强>然而...

虽然这是一种非常广泛使用的方法来做这样的事情（这样做很容易和快速），但它并不是最优雅的解决方案。毕竟，从WYSIWYG编辑器中不清楚“蓝色链接”实际上是一个特殊元素。如果你的客户开始搞乱它，他将打破布局并打电话给你，因为“你创建了网站，所以这是你的错”。相信我，我去过那里......

更优雅的解决方案是使用小部件。在Magento 2中创建一个小部件非常简单。首先，您必须在模块的widget.xml - 文件夹中创建一个名为etc的文件，并在其中添加如下内容：

<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
        <label translate="true">Example widget</label>
        <description translate="true">This is an example widget</description>
    </widget>
</widgets>

现在，您可以在模块的Block - 文件夹中创建一个块：

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Example extends Template implements BlockInterface
{
    /**
     * @return string
     */
    public function _toHtml()
    {
        return '<p class="hello">Hello world!</p>';
    }
}

现在，如果您在WYSIWYG编辑器中单击窗口小部件按钮，窗口小部件将在窗口小部件列表中可供选择：

现在，如果你在WYSIWYG编辑器中插入这个小部件，你就会确定它将输出的HTML（因为这是用PHP处理的），而你的客户端不能“破坏它”。

在您的方案中，您最有可能想要添加参数，以便可以重复使用窗口小部件。这很简单。修改您的widget.xml：

<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
    <label translate="true">Example widget</label>
    <description translate="true">This is an example widget</description>
    <parameters>
        <parameter name="name" xsi:type="text" visible="true" sort_order="0">
            <label translate="true">Name</label>
            <description translate="true">Please enter a name</description>
        </parameter>
    </parameters>
</widget>

并在你的Block Class中使用它：

public function _toHtml()
{
    return '<p class="hello">Hello ' . $this->getName() . '</p>';
}

真的那么简单。

在您的具体情况下，我建议创建一个包含4个参数的小部件：

• 标题
• 内容
• 按钮文字
• 按钮链接