Чим більше корисної та актуальної інформації ви розміщуєте про свої товари, тим вище будуть ваші шанси на високі позиції з точки зору SEO. Одним з найпоширеніших способів відображення корисної інформації є розміщення додаткової інформації про товар у вкладках (табах). Це дає можливість клієнтам краще розуміти представлені в інтернет-магазині на Magento 2 товари. У сьогоднішньому уроці ми розглянемо кроки по створенню і додаванню табів з додатковою інформацією в опис на сторінці товару.
Раніше ми розглядали питання, як створити новий атрибут товару. Якщо при створенні атрибута ви встановите для параметра Видимий на сторінках каталогу в магазині (Visible on Catalog Pages on Storefront) значення Так, тоді буде доступна вкладка «Додаткова інформація» на сторінці товару. Однак, якщо ви хочете додати свою додаткову вкладку в область табів, тоді вам потрібно буде виконати інші дії, які ми сьогодні розглянемо.
Крок №1. Створіть атрибут для товару
В панелі адміністратора Magento 2 створіть атрибут, інформацію з якого ви хочете додати в якості нової вкладки. Заповніть цей атрибут корисною інформацією на сторінці редагування товару в адмінці.
Крок №2. Додавання нової вкладки на сторінку товару
Тепер, коли ми додали атрибут і додали в товарі інформацію для нього, нам потрібно створити новий xml-файл і додатковий файл-шаблон .phtml, в якому будемо виводити ці дані.
Створіть XML-файл catalog_product_view.xml у своїй темі за адресою app/design/frontend/{VENDOR}/{ТЕМА}/Magento_Catalog/layout з наступним кодом:
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="custom.tab" as="custom_tab" template="product/view/custom_vkladka.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Якщо у вашій темі вже створений цей файл, тоді додайте в нього шматок коду з ноду <referenceBlock name="product.info.details">…</referenceBlock>. Якщо цей нод також існує, тоді скопіюйте тільки наступний вкладений нод <block>...</block>.
Примітка: Завжди зберігайте копію старих файлів теми до моменту їх зміни, щоб у вас завжди була резервна копія.
Крок №3. Створення файлу-шаблона для вкладки
У попередньому кроці ми додали Блок і привласнили йому шаблон. Тепер створимо цей шаблон. Шлях до нього (з попередніх налаштувань) буде таким:
app/design/frontend/{VENDOR}/{ТЕМА}/Magento_Catalog/templates/product/view/custom_vkladka.phtml
Додайте наступний код в файл custom_vkladka.phtml:
<?php
$product = $block->getProduct();
?>
<h3><?php echo $product->getData('custom_vkladka_attribute'); ?></h3>
Замініть custom_vkladka_attribute на ідентифікатор атрибута, який ви створили на кроці №1.
Крок №4: Перевірка відображення нової вкладки
Після виконання попередніх кроків, у вас повинна з’явитися нова вкладка Custom Tab на сторінці товару. Якщо вкладка не відображається (при всіх правильних інших умовах), спробуйте очистити кеш. Після цього перевірте правильність відображення нової вкладки у фронт-енді.
Після ознайомлення з сьогоднішньої статтею у вас має бути краще уявлення про те, як створювати нові вкладки для опису товару в Magento 2, використовуючи для цього інформацію з нового атрибута. Тепер ви зможете додавати стільки додаткових вкладок з інформацією про товар, скільки потрібно.
20 травня 2026 року офіційно відбувся реліз довгоочікуваної мажорної версії WordPress 7.0 «Armstrong», названої на…
Кожен власник сайту та SEO-спеціаліст веде щоденну запеклу боротьбу за утримання користувача на сторінках вебресурсу.…
Футбольна секція швидко показує, наскільки взуття підходить дитині. Якщо пара ковзає, тисне або погано чіпляється…
Компанія Samsung - один із лідерів на ринку електроніки. Її смартфони вирізняються надійністю, якісними дисплеями,…
Іспанська мова приваблює мільйони людей своєю мелодійністю, емоційністю та відносною простотою вивчення. Одним із найважливіших…
Робочий простір давно перестав бути просто столом із ПК/ноутбуком. Сьогодні це повноцінна екосистема, де кожна…