Добавление новых вкладок на главной странице шаблона Demomarket

Актуально для версии 20

Задача

Добавить дополнительную вкладку под слайдером на главной странице шаблона Demomarket.

Решение

1. Добавить новую языковую константу в файл /templates/demomarket/php/i18n/i18n.ru.php

'new_tab' => 'Новая вкладка',

1. test

1. В файле /templates/demomarket/php/content/home/catalog.phtml по аналогии с вкладками "Новинки" и "Лучшие предложения":

1) Получаем данные для вывода при помощи функции isShowNewTab

2) Получаем название новой вкладки из функции getNewTabName или из языковой константы 'new_tab'

3) Добавляем кнопку для переключения вкладки в список <ul class="nav nav-tabs">

4) Добавляем вывод самой вкладки в элемент <div class="tab-content">

В итоге должно получиться так:

<?php
/**
 * Каталог товаров на главной странице. Включает в себя текстовое поле и две вкладки:
 *   - Новинки
 *   - Лучшие предложения
 *
 * @var umiTemplaterPHP|ViewPhpExtension|DemomarketPhpExtension $this
 * @var array $variables
 */

$page = $variables['page'];

$isShowNewItems = $this->isShowNewItems();
$isShowBestOffers = $this->isShowBestProducts();
// 1) Получаем данные для вывода при помощи функции isShowTabNum
$isNewTabNum1 = $this->isShowTabNum(1);

$newItemsTabName = $this->getNewItemsTabName() ?: $this->translate('new_items');
$bestItemsTabName = $this->getBestProductsTabName() ?: $this->translate('best_items');
// 2) Получаем название новой вкладки из функции getNewTabName или из языковой константы 'new_tab'.
$newTabNum1 = $this->getTabNameNum(1) ?: $this->translate('new_tab_'.1);
?>

<div class="goods w100p">
	<div class="container">
		<div class="text-field"
		     umi:element-id="<?= $page->getId() ?>"
		     umi:field-name="field_under_slider"
		     umi:empty="<?= $this->translate('empty_page_content') ?>"
		>
			<?= $page->getValue('field_under_slider') ?>
		</div>
		<div class="row">
			<ul class="nav nav-tabs">
				<?php if ($isShowNewItems): ?>
					<li class="active">
						<a href="#newItems" data-toggle="tab" class="up">
							<?= $newItemsTabName ?>
						</a>
					</li>
				<?php endif; ?>

				<?php if ($isShowBestOffers): ?>
					<li class="<?= $this->getActiveClass(!$isShowNewItems) ?>">
						<a href="#bestItems" data-toggle="tab" class="up">
							<?= $bestItemsTabName ?>
						</a>
					</li>
				<?php endif; ?>
				<?php// 3) Добавляем кнопку для переключения вкладки в список <ul class="nav nav-tabs">?>
				<?php if ($isNewTab): ?>
					<li class="<?= $this->getActiveClass(!$isNewTab) ?>">
						<a href="#bestItems" data-toggle="tab" class="up">
							<?= $newTab ?>
						</a>
					</li>
				<?php endif; ?>
			</ul>
		</div>

		<div class="tab-content">
			<?php if ($isShowNewItems): ?>
				<?= $this->render($variables, 'content/home/catalog/new_items') ?>
			<?php endif; ?>
			<?php if ($isShowBestOffers): ?>
				<?= $this->render([$variables, $isShowNewItems], 'content/home/catalog/best_items') ?>
			<?php endif; ?>
			<?php// 4) Добавляем вывод самой вкладки в элемент <div class="tab-content">?>
			<?php if ($isNewTab): ?>
				<?= $this->render([$variables, $isNewTab], 'content/home/catalog/best_items') ?>
			<?php endif; ?>
		</div>
	</div>
</div>

изменяем языковую константу best_items на best_catalog, а так же меняем вызов шаблона в div c классом .tab-content best_items на best_catalog. В итоге должно получиться так: