Чим більше корисної та актуальної інформації ви розміщуєте про свої товари, тим вище будуть ваші шанси на високі позиції з точки зору 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, використовуючи для цього інформацію з нового атрибута. Тепер ви зможете додавати стільки додаткових вкладок з інформацією про товар, скільки потрібно.
Щоб уникати помилок, потрібно набиратися досвіду; щоб набиратися досвіду, потрібно робити помилки Лоуренс Пітер
Коротке визначення Чорного SEO Чорне СЕО (або Чорна оптимізація) — це будь-яка практика, метою якої…
Отримання прав водія категорії C відкриває двері до професійної діяльності, пов'язаної з керуванням вантажними автомобілями.…
Вихід айфонів 15 і 16 покоління — не привід забути про пристрої 14-го ряду моделей,…
Дуже неприємно виходить, коли ви доклали багато зусиль, праці та сил, щоб створити картинку, а…