Практическое руководство: модульное описание товаров с xtradbrowmarket

Плагин xtradbrowmarket позволяет не просто добавлять произвольные поля к товарам, но и строить на их основе гибкое, структурированное описание продукта. В этом руководстве мы на примере интернет-магазина ноутбуков покажем, как превратить набор экстраполей в удобное «модульное» представление: с вкладками, характеристиками, мультиязычными описаниями и SEO‑оптимизацией. Все примеры используют возможности версии 3.0.0 с поддержкой мультиязычности.

Что такое модульное описание и зачем оно нужно

В классической карточке товара описание часто представляет собой сплошной текст, в котором смешаны характеристики, маркетинговые фразы и условия доставки. Модульное описание разбивает информацию на логические блоки – например, «Характеристики», «Комплектация», «Файлы» – и позволяет выводить их в структурированном виде, часто с переключаемыми вкладками. Такой подход улучшает восприятие пользователем, повышает конверсию и, что немаловажно, помогает поисковым системам точнее индексировать содержимое страницы.

Плагин xtradbrowmarket идеально подходит для этой задачи, потому что каждая характеристика хранится в отдельном поле базы данных. Вы можете комбинировать их в любом порядке, использовать разные шаблоны для разных типов полей и даже переводить значения на несколько языков.

Шаг 1. Проектируем набор полей для ноутбука

Прежде чем приступить к созданию полей в админке, определимся, какие характеристики мы хотим хранить. Для ноутбука это могут быть поля различных типов, каждое из которых решает свою задачу. В таблице ниже перечислены все поля, которые мы будем использовать.

Все эти поля мы создаём через стандартный интерфейс управления экстраполями (Администрирование → Расширения → Экстраполя → cot_xtradbrowmarket). Для полей типа input и textarea можно будет включить мультиязычность и предоставить переводы на другие языки. Для select, radio, checklistbox, checkbox перевод задаётся через языковые файлы (ключи $L). Остальные типы (double, datetime, file, range) не нуждаются в переводе.

Шаг 2. Форма редактирования товара (market.edit.tpl)

Чтобы администратор мог удобно заполнять все характеристики, мы не будем полагаться на групповой цикл (он выводит все поля скопом), а разместим поля индивидуально, сгруппировав их в логические блоки. Это также позволит добавить поля для мультиязычных переводов там, где это необходимо. Ниже приведён пример организации формы с использованием индивидуальных тегов и учётом всех типов полей.

<!-- IF {PHP|cot_plugin_active('xtradbrowmarket')} -->
<div class="card mb-4">
    <div class="card-header">
        <h4>Характеристики ноутбука</h4>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <!-- Процессор -->
                <!-- IF {MARKETEDIT_FORM_XTRA_PROCESSOR} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_PROCESSOR_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_PROCESSOR}
                </div>
                <!-- ENDIF -->
                <!-- Оперативная память -->
                <!-- IF {MARKETEDIT_FORM_XTRA_RAM} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_RAM_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_RAM}
                </div>
                <!-- ENDIF -->
                <!-- SSD -->
                <!-- IF {MARKETEDIT_FORM_XTRA_SSD} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_SSD_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_SSD}
                </div>
                <!-- ENDIF -->
                <!-- Диагональ экрана -->
                <!-- IF {MARKETEDIT_FORM_XTRA_SCREEN_SIZE} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_SCREEN_SIZE_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_SCREEN_SIZE}
                </div>
                <!-- ENDIF -->
                <!-- Разрешение экрана (select) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_SCREEN_RESOLUTION} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_SCREEN_RESOLUTION_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_SCREEN_RESOLUTION}
                </div>
                <!-- ENDIF -->
                <!-- Тип матрицы (select) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_MATRIX_TYPE} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_MATRIX_TYPE_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_MATRIX_TYPE}
                </div>
                <!-- ENDIF -->
            </div>
            <div class="col-md-6">
                <!-- Видеокарта -->
                <!-- IF {MARKETEDIT_FORM_XTRA_GPU} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_GPU_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_GPU}
                </div>
                <!-- ENDIF -->
                <!-- Вес (double) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_WEIGHT} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_WEIGHT_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_WEIGHT}
                </div>
                <!-- ENDIF -->
                <!-- ОС (select) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_OS} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_OS_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_OS}
                </div>
                <!-- ENDIF -->
                <!-- Год выпуска (datetime) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_YEAR_OF_ISSUE} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_YEAR_OF_ISSUE_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_YEAR_OF_ISSUE}
                </div>
                <!-- ENDIF -->
                <!-- Состояние батареи (range) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_BATTERY_HEALTH} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_BATTERY_HEALTH_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_BATTERY_HEALTH}
                </div>
                <!-- ENDIF -->
            </div>
        </div>
    </div>
</div>

<!-- Блок дополнительных функций и файлов -->
<div class="card mb-4">
    <div class="card-header"><h4>Дополнительно</h4></div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <!-- Функции (checklistbox) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_FEATURES} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_FEATURES_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_FEATURES}
                </div>
                <!-- ENDIF -->
                <!-- Наличие веб‑камеры (checkbox) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_HAS_WEBCAM} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_HAS_WEBCAM_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_HAS_WEBCAM}
                </div>
                <!-- ENDIF -->
            </div>
            <div class="col-md-6">
                <!-- Файл инструкции (file) -->
                <!-- IF {MARKETEDIT_FORM_XTRA_INSTRUCTION_FILE} -->
                <div class="mb-3">
                    <label>{MARKETEDIT_FORM_XTRA_INSTRUCTION_FILE_TITLE}:</label>
                    {MARKETEDIT_FORM_XTRA_INSTRUCTION_FILE}
                </div>
                <!-- ENDIF -->
            </div>
        </div>
    </div>
</div>

<!-- Мультиязычные переводы для текстовых полей (пример для процессора) -->
<!-- IF {MARKETEDIT_FORM_XTRA_PROCESSOR} -->
<div class="card mb-4">
    <div class="card-header"><h4>Переводы для процессора</h4></div>
    <div class="card-body">
        <!-- IF {MARKETEDIT_FORM_XTRA_PROCESSOR_EN} -->
        <div class="mb-3">
            <label>{MARKETEDIT_FORM_XTRA_PROCESSOR_EN_TITLE}:</label>
            {MARKETEDIT_FORM_XTRA_PROCESSOR_EN}
        </div>
        <!-- ENDIF -->
        <!-- IF {MARKETEDIT_FORM_XTRA_PROCESSOR_UA} -->
        <div class="mb-3">
            <label>{MARKETEDIT_FORM_XTRA_PROCESSOR_UA_TITLE}:</label>
            {MARKETEDIT_FORM_XTRA_PROCESSOR_UA}
        </div>
        <!-- ENDIF -->
    </div>
</div>
<!-- ENDIF -->

<!-- Аналогичные блоки для других переводимых полей (ram, ssd, screen_size, gpu, warranty, equipment) -->
<!-- ENDIF -->
  

Обратите внимание: для каждого типа поля мы используем соответствующий индивидуальный тег. Мультиязычные поля показываем только для input и textarea, так как для остальных типов перевод либо не требуется, либо задаётся через языковые файлы.

Шаг 3. Отображение на странице товара (market.tpl) с вкладками

Теперь организуем вывод характеристик на публичной странице. Мы используем компонент Bootstrap Tabs, чтобы разделить информацию на вкладки: «Характеристики», «Описание», «Файлы и гарантия», «Дополнительно». Для каждого типа поля применяем подходящий способ отображения.

<!-- IF {PHP|cot_plugin_active('xtradbrowmarket')} -->
<div class="card mb-4">
    <div class="card-header">
        <h4>О товаре</h4>
    </div>
    <div class="card-body">
        <ul class="nav nav-tabs" id="productTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab">Характеристики</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="desc-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">Описание</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="files-tab" data-bs-toggle="tab" data-bs-target="#files" type="button" role="tab">Файлы и гарантия</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="extra-tab" data-bs-toggle="tab" data-bs-target="#extra" type="button" role="tab">Дополнительно</button>
            </li>
        </ul>

        <div class="tab-content p-3 border border-top-0 rounded-bottom">

            <!-- Вкладка Характеристики -->
            <div class="tab-pane fade show active" id="specs" role="tabpanel">
                <div class="row">
                    <!-- Процессор (input) -->
                    <!-- IF {MARKET_XTRA_PROCESSOR} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_PROCESSOR_TITLE}:</strong>
                        <span>{MARKET_XTRA_PROCESSOR}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- ОЗУ (input) -->
                    <!-- IF {MARKET_XTRA_RAM} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_RAM_TITLE}:</strong>
                        <span>{MARKET_XTRA_RAM}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- SSD (input) -->
                    <!-- IF {MARKET_XTRA_SSD} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_SSD_TITLE}:</strong>
                        <span>{MARKET_XTRA_SSD}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Диагональ (input) -->
                    <!-- IF {MARKET_XTRA_SCREEN_SIZE} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_SCREEN_SIZE_TITLE}:</strong>
                        <span>{MARKET_XTRA_SCREEN_SIZE}"</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Разрешение (select) -->
                    <!-- IF {MARKET_XTRA_SCREEN_RESOLUTION} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_SCREEN_RESOLUTION_TITLE}:</strong>
                        <span>{MARKET_XTRA_SCREEN_RESOLUTION}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Тип матрицы (select) -->
                    <!-- IF {MARKET_XTRA_MATRIX_TYPE} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_MATRIX_TYPE_TITLE}:</strong>
                        <span>{MARKET_XTRA_MATRIX_TYPE}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Видеокарта (input) -->
                    <!-- IF {MARKET_XTRA_GPU} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_GPU_TITLE}:</strong>
                        <span>{MARKET_XTRA_GPU}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Вес (double) -->
                    <!-- IF {MARKET_XTRA_WEIGHT} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_WEIGHT_TITLE}:</strong>
                        <span>{MARKET_XTRA_WEIGHT} кг</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- ОС (select) -->
                    <!-- IF {MARKET_XTRA_OS} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_OS_TITLE}:</strong>
                        <span>{MARKET_XTRA_OS}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Год выпуска (datetime) -->
                    <!-- IF {MARKET_XTRA_YEAR_OF_ISSUE} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_YEAR_OF_ISSUE_TITLE}:</strong>
                        <span>{MARKET_XTRA_YEAR_OF_ISSUE_VALUE|cot_date('Y', $this)}</span>
                    </div>
                    <!-- ENDIF -->
                    <!-- Состояние батареи (range) -->
                    <!-- IF {MARKET_XTRA_BATTERY_HEALTH} -->
                    <div class="col-md-6 mb-3">
                        <strong>{MARKET_XTRA_BATTERY_HEALTH_TITLE}:</strong>
                        <div class="progress mt-1" style="height:20px;">
                            <div class="progress-bar bg-success" role="progressbar"
                                 style="width:{MARKET_XTRA_BATTERY_HEALTH_VALUE}%;"
                                 aria-valuenow="{MARKET_XTRA_BATTERY_HEALTH_VALUE}" aria-valuemin="0" aria-valuemax="100">
                                {MARKET_XTRA_BATTERY_HEALTH_VALUE}%
                            </div>
                        </div>
                    </div>
                    <!-- ENDIF -->
                </div>
            </div>

            <!-- Вкладка Описание -->
            <div class="tab-pane fade" id="description" role="tabpanel">
                <!-- IF {MARKET_XTRA_EQUIPMENT} -->
                <div>{MARKET_XTRA_EQUIPMENT}</div>
                <!-- ELSE -->
                <p>Описание отсутствует.</p>
                <!-- ENDIF -->
            </div>

            <!-- Вкладка Файлы и гарантия -->
            <div class="tab-pane fade" id="files" role="tabpanel">
                <!-- Гарантия (input) -->
                <!-- IF {MARKET_XTRA_WARRANTY} -->
                <div class="mb-3">
                    <strong>{MARKET_XTRA_WARRANTY_TITLE}:</strong>
                    <span>{MARKET_XTRA_WARRANTY}</span>
                </div>
                <!-- ENDIF -->
                <!-- Файл инструкции (file) -->
                <!-- IF {MARKET_XTRA_INSTRUCTION_FILE} -->
                <div class="mb-3">
                    <strong>{MARKET_XTRA_INSTRUCTION_FILE_TITLE}:</strong>
                    <a href="{PHP.cfg.mainurl}/datas/exflds/xtradbrowmarket/{MARKET_XTRA_INSTRUCTION_FILE}" target="_blank">
                        Скачать инструкцию
                    </a>
                </div>
                <!-- ENDIF -->
            </div>

            <!-- Вкладка Дополнительно -->
            <div class="tab-pane fade" id="extra" role="tabpanel">
                <!-- Функции (checklistbox) -->
                <!-- IF {MARKET_XTRA_FEATURES} -->
                <div class="mb-3">
                    <strong>{MARKET_XTRA_FEATURES_TITLE}:</strong>
                    <ul>
                        <!-- Значения checklistbox разделены запятыми, выводим через разделитель -->
                        <li>{MARKET_XTRA_FEATURES}</li>
                    </ul>
                </div>
                <!-- ENDIF -->
                <!-- Наличие веб‑камеры (checkbox) -->
                <!-- IF {MARKET_XTRA_HAS_WEBCAM} -->
                <div class="mb-3">
                    <strong>{MARKET_XTRA_HAS_WEBCAM_TITLE}:</strong>
                    <!-- IF {MARKET_XTRA_HAS_WEBCAM_VALUE} == '1' -->
                    <span class="text-success">Да</span>
                    <!-- ELSE -->
                    <span class="text-danger">Нет</span>
                    <!-- ENDIF -->
                </div>
                <!-- ENDIF -->
            </div>

        </div>
    </div>
</div>
<!-- ENDIF -->
  

Здесь для каждого типа поля подобран подходящий способ отображения: текстовые поля выводятся как обычный текст, select показывает переведённое значение, datetime форматируется через cot_date, range отображается в виде прогресс-бара, file формирует ссылку на скачивание, checklistbox отображает список, checkbox показывает состояние с иконкой.

Мультиязычность характеристик

Для полей типа input и textarea (процессор, ОЗУ, комплектация и т.д.) плагин автоматически подставит перевод, если он был введён администратором в соответствующем языковом поле. Теги вроде {MARKET_XTRA_PROCESSOR} уже содержат значение на нужном языке. Для select, radio, checklistbox, checkbox перевод задаётся через языковые файлы, как обычно.

Пример фрагмента языкового файла xtradbrowmarket.ru.lang.php:

$L['screen_resolution_1920x1080'] = '1920×1080 (Full HD)';
$L['screen_resolution_2560x1440'] = '2560×1440 (QHD)';
$L['screen_resolution_3840x2160'] = '3840×2160 (4K UHD)';
$L['matrix_type_IPS'] = 'IPS';
$L['matrix_type_OLED'] = 'OLED';
$L['matrix_type_TN'] = 'TN';
$L['features_bluetooth'] = 'Bluetooth';
$L['features_wifi6'] = 'Wi‑Fi 6';
$L['features_backlight'] = 'Подсветка клавиатуры';
$L['features_fingerprint'] = 'Сканер отпечатков';
$L['has_webcam_1'] = 'Есть';
$L['has_webcam_0'] = 'Нет';
  

Для английской версии (xtradbrowmarket.en.lang.php) добавляем аналогичные строки с переводом.

SEO‑выгоды модульного описания

Используя экстраполя для мета‑тегов (через header.tags), вы можете динамически формировать заголовки и описания страниц. Например:

<title>{HEADER_TITLE} – ноутбук с {MARKET_HEADER_XTRA_PROCESSOR}, {MARKET_HEADER_XTRA_RAM} | {MARKET_HEADER_XTRA_SCREEN_SIZE}"</title>
  

Это даёт уникальные, насыщенные ключевыми словами мета‑данные для каждого товара, что положительно сказывается на поисковом ранжировании.

Заключение

Плагин xtradbrowmarket версии 3.0.0 с поддержкой мультиязычности открывает широкие возможности для создания детализированных, хорошо структурированных карточек товаров. На примере ноутбуков мы показали, как спроектировать поля, организовать форму редактирования, вывести характеристики в удобных вкладках и обеспечить автоматический перевод. Точно такой же подход применим к любой другой категории товаров – от смартфонов до автомобилей.

Вся эта гибкость достигается без правки ядра Cotonti, исключительно настройкой экстраполей и шаблонов. Полная документация по плагину доступна восновном README.

Поддержка по типам полей и их использованию