Як додати нову вкладку (таб) в опис товару 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, використовуючи для цього інформацію з нового атрибута. Тепер ви зможете додавати стільки додаткових вкладок з інформацією про товар, скільки потрібно.
This post was last modified on 17/01/2019 22:05
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…