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, используя для этого информацию с нового атрибута. Теперь вы сможете добавлять столько дополнительных вкладок с информацией о товаре, сколько нужно.

Tags: Magento2

Recent Posts

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020

Виды и типы компрессионных чулков

Изделия называют компрессионными, когда их применяют для лечения, а также профилактики нарушений кровотока в нижних… Read More

22/08/2020