Categories: Мадженто 2

Як додати нову вкладку (таб) в опис товару Magento 2

Чим більше корисної та актуальної інформації ви розміщуєте про свої товари, тим вище будуть ваші шанси на високі позиції з точки зору 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, використовуючи для цього інформацію з нового атрибута. Тепер ви зможете додавати стільки додаткових вкладок з інформацією про товар, скільки потрібно.