Magento 2 CMS Directives: шпаргалка для CMS Blocks і CMS Pages

Magento 2 CMS Directives: шпаргалка для CMS Blocks і CMS Pages

У Magento 2 в CMS Blocks і CMS Pages можна використовувати спеціальні директиви у форматі {{ ... }}. Вони дозволяють працювати з перекладами, URL магазину, медіафайлами, CMS-блоками, віджетами та custom variables без написання PHP-коду.

У цій шпаргалці зібрані найбільш корисні Magento 2 CMS directives, які часто використовуються під час роботи з контентом.

Переклад тексту

Для тексту, який повинен підтримувати переклади, використовується директива trans.

<h1 class="hero-h1">{{trans "Welcome to this website"}}</h1>

Ще один приклад:

<p>{{trans "Free delivery for orders over $100"}}</p>

Також можна передавати змінні:

{{trans "Hello %name" name=$customer.name}}

URL магазину

Директива store дозволяє сформувати URL відносно base URL поточного store view.

<a href="{{store url='customer/account'}}">
    {{trans "My Account"}}
</a>

Наприклад, посилання на сторінку акцій:

<a href="{{store url='sale'}}">
    {{trans "Sale"}}
</a>

Такий підхід кращий, ніж жорстко прописувати домен у CMS-контенті.

Media URL

Для зображень та інших файлів із каталогу media використовується директива media.

<img
    src="{{media url='wysiwyg/banner.jpg'}}"
    alt="{{trans 'Banner'}}">

Наприклад:

<img
    src="{{media url='wysiwyg/home/hero.webp'}}"
    alt="">

Magento автоматично підставить правильний URL до каталогу media.

Вставка CMS Block

CMS-блок можна вставити безпосередньо в CMS Page або інший CMS Block.

{{block class="Magento\Cms\Block\Block" block_id="footer_links"}}

Де footer_links — identifier CMS-блоку.

Це зручно, коли один і той самий контент потрібно використовувати в декількох місцях сайту.

Вставка CMS Block через Widget

CMS-блок також можна вставити через widget directive.

{{widget
    type="Magento\Cms\Block\Widget\Block"
    template="widget/static_block/default.phtml"
    block_id="12"}}

Такий код часто генерується автоматично після використання Insert Widget у Magento Admin.

Використання Widget

За допомогою директиви widget можна вставляти різні Magento widgets.

Наприклад, список товарів:

{{widget
    type="Magento\CatalogWidget\Block\Product\ProductsList"
    products_count="8"
    template="Magento_CatalogWidget::product/widget/content/grid.phtml"}}

Набір параметрів залежить від конкретного widget.

Custom Variable

Magento дозволяє створювати власні variables в Admin і використовувати їх у CMS-контенті.

{{customVar code="company_phone"}}

Наприклад:

<p>
    {{trans "Phone"}}:
    {{customVar code="company_phone"}}
</p>

Це зручно для даних, які використовуються в багатьох місцях сайту і можуть змінюватися через Admin.

Директиви всередині HTML-атрибутів

Magento CMS directives можна використовувати прямо всередині HTML-атрибутів.

<a href="{{store url='contact'}}">
    {{trans "Contact Us"}}
</a>

Або:

<a href="{{store url='checkout/cart'}}">
    {{trans "View Cart"}}
</a>

Зображення з Media Gallery і посилання на сторінку

На практиці часто використовується одразу декілька директив.

<a href="{{store url='sale'}}">
    <img
        src="{{media url='wysiwyg/banners/sale.webp'}}"
        alt="{{trans 'Sale'}}">
</a>

У цьому прикладі одночасно використовуються:

• {{store}} — для формування URL;
• {{media}} — для шляху до зображення;
• {{trans}} — для перекладу тексту.

Практичний приклад CMS Block

<section class="hero">
    <div class="hero-content">

        <h1>
            {{trans "New Collection"}}
        </h1>

        <p>
            {{trans "Discover our latest products"}}
        </p>

        <a href="{{store url='new-products'}}">
            {{trans "Shop Now"}}
        </a>

    </div>

    <img
        src="{{media url='wysiwyg/home/new-collection.webp'}}"
        alt="{{trans 'New Collection'}}">
</section>

Такий CMS-блок не містить жорстко прописаного домену, підтримує переклади та коректно працює з Magento media URL.

Найкорисніші Magento CMS Directives

Переклад:

{{trans "Text"}}

Store URL:

{{store url='customer/account'}}

Media URL:

{{media url='wysiwyg/image.webp'}}

CMS Block:

{{block class="Magento\Cms\Block\Block" block_id="identifier"}}

Custom Variable:

{{customVar code="variable_code"}}

Widget:

{{widget ...}}

Висновок

Magento 2 CMS directives дозволяють зробити CMS-контент значно гнучкішим і зменшити кількість жорстко прописаних значень у CMS Blocks та CMS Pages.

Для більшості повсякденних задач достатньо знати директиви {{trans}}, {{store}}, {{media}}, {{block}}, {{widget}} та {{customVar}}.

Ці конструкції дозволяють працювати з перекладами, URL, медіафайлами та повторно використовуваним контентом без внесення змін у PHP-код.