Как добавить рекламные этикетки поверх изображений в Magento 2?

Question

Как разместить слой рекламных меток поверх изображений в Magento 2. Изображение, которое я включаю, это из темы Magento 2 из коробки, и у нее есть текст «Новая коллекция йоги лумы ...» и кнопка «Магазин новой йоги», которая была как-то помещена поверх изображения в редакторе.

Вот как это выглядит в редакторе

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 -folder вашего модуля, и положить что-то вроде этого в нем:

<?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 -folder вашего модуля:

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> 

И использовать его в блоке класса:

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

Это действительно так просто.

В вашем конкретном случае я хотел бы предложить создать виджет с 4-мя параметрами:

• Header
• Content
• Кнопка Текст
• Кнопка Link