Extrafields Market Custom i18n для модуля “Market” плагин Cotonti

Плагины “Custom Extrafields Pages” и “Extrafields Market Custom” - похожи, но у последнего есть свои особенности и дополнительные преимущества, а поэтому тут обсуждаем именно для модуля товаров.

Описание плагина, инструкция, исходный код все в свободном доступе по ссылкам уже расположены в этой теме. 

Extrafields Market Custom i18n — это не просто маленький набор инструментов, а точный хаб, позволяющий разместить именно то, что нужно, и именно там, где нужно — интегрируя метаданные или любой контент в систему через по-настоящему простой вывод экстраполей — это лишь верхушка айсберга. Но когда вы начинаете использовать этот плагин для построения «модульных описаний товаров» — да ещё и сразу с языковыми переводами — это по-настоящему поражает. Во-первых, это интересно, а во-вторых, поисковые системы реагируют на это, как кошка на валерьянку, при правильном SEO-подходе.

Плагин в маркетплейсе расширений для Cotonti CMF

Плагин скачать в мои разработках на GitHub

Поддержка и вопросы чисто по экстраполям в Cotonti CMF

Для разработчиков API Extrafields

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

Здесь представлен готовый пример шаблона market.tpl, в котором динамически создаем модульное описание товара при помощи экстраполей Cotonti и конкретно с использованием плагина xtradbrowmarket.

<!-- 
  Шаблон страницы товара market.tpl 
  Использует плагин xtradbrowmarket для модульного описания товаров.
  Каждый блок снабжён комментариями, поясняющими назначение и тип экстраполя.
  Предполагается, что плагин xtradbrowmarket установлен и активен.
-->

<!-- Проверяем, активен ли плагин xtradbrowmarket -->
<!-- IF {PHP|cot_plugin_active('xtradbrowmarket')} -->

<div class="container my-5">

  <!-- Заголовок товара (стандартный тег модуля Market) -->
  <h1 class="mb-3">{MARKET_TITLE}</h1>
  
  <!-- Краткие ключевые параметры (комбинация нескольких экстраполей) -->
  <p class="lead">
    <!-- Поле ab_volt (select) + ab_capacity (select) + wheel_size (select) + max_speed (range) + range_km (inputint) -->
    {MARKET_XTRA_MOTOR_POWER}W • 
    {MARKET_XTRA_AB_VOLT} {MARKET_XTRA_AB_CAPACITY} • 
    {MARKET_XTRA_WHEEL_SIZE}×4.0 • 
    до {MARKET_XTRA_MAX_SPEED} км/ч • 
    до {MARKET_XTRA_RANGE_KM} км
  </p>

  <!-- Карточка с вкладками Bootstrap -->
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-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="dimensions-tab" data-bs-toggle="tab" data-bs-target="#dimensions" type="button" role="tab">Габариты и геометрия</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features" type="button" role="tab">Особенности</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq" type="button" role="tab">FAQ</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="delivery-tab" data-bs-toggle="tab" data-bs-target="#delivery" type="button" role="tab">Доставка и оплата</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="service-tab" data-bs-toggle="tab" data-bs-target="#service" type="button" role="tab">Гарантия и сервис</button>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content" id="productTabsContent">
        
        <!-- ========== Вкладка Характеристики ========== -->
        <div class="tab-pane fade show active" id="specs" role="tabpanel">
          <div class="row">
            
            <!-- Аккумулятор: комбинация двух полей select (вольтаж + ёмкость) -->
            <!-- IF {MARKET_XTRA_AB_VOLT} OR {MARKET_XTRA_AB_CAPACITY} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_AB_VOLT_TITLE}:</strong> 
              <span>⚡ {MARKET_XTRA_AB_VOLT} 🔋 {MARKET_XTRA_AB_CAPACITY}</span>
            </div>
            <!-- ENDIF -->

            <!-- Мощность двигателя (inputint) -->
            <!-- IF {MARKET_XTRA_MOTOR_POWER} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_MOTOR_POWER_TITLE}:</strong> <span>{MARKET_XTRA_MOTOR_POWER} Вт</span>
            </div>
            <!-- ENDIF -->

            <!-- Максимальная скорость (range) – отображаем значение с прогресс-баром -->
            <!-- IF {MARKET_XTRA_MAX_SPEED} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_MAX_SPEED_TITLE}:</strong>
              <div class="progress mt-1" style="height:20px;">
                <!-- 
                  Процент вычисляется как (значение / максимальное_значение_диапазона)*100.
                  Здесь максимальное значение диапазона = 80 (задано в параметрах поля range).
                  Для простоты используется статический процент (рассчитывается вручную при вёрстке).
                  В реальном шаблоне можно вычислить через PHP-фильтр или оставить статику.
                -->
                <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" 
                     aria-valuenow="{MARKET_XTRA_MAX_SPEED_VALUE}" aria-valuemin="0" aria-valuemax="80">
                  {MARKET_XTRA_MAX_SPEED} км/ч
                </div>
              </div>
            </div>
            <!-- ENDIF -->

            <!-- Запас хода (inputint) -->
            <!-- IF {MARKET_XTRA_RANGE_KM} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_RANGE_KM_TITLE}:</strong> <span>до {MARKET_XTRA_RANGE_KM} км</span>
            </div>
            <!-- ENDIF -->

            <!-- Диаметр колёс (select) -->
            <!-- IF {MARKET_XTRA_WHEEL_SIZE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_WHEEL_SIZE_TITLE}:</strong> <span>{MARKET_XTRA_WHEEL_SIZE} × 4.0</span>
            </div>
            <!-- ENDIF -->

            <!-- Тормоза (select) -->
            <!-- IF {MARKET_XTRA_BRAKES_TYPE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_BRAKES_TYPE_TITLE}:</strong> <span>{MARKET_XTRA_BRAKES_TYPE}</span>
            </div>
            <!-- ENDIF -->

            <!-- Амортизация (select) -->
            <!-- IF {MARKET_XTRA_SUSPENSION_TYPE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_SUSPENSION_TYPE_TITLE}:</strong> <span>{MARKET_XTRA_SUSPENSION_TYPE}</span>
            </div>
            <!-- ENDIF -->

            <!-- Тип привода (select) -->
            <!-- IF {MARKET_XTRA_DRIVE_TYPE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_DRIVE_TYPE_TITLE}:</strong> <span>{MARKET_XTRA_DRIVE_TYPE}</span>
            </div>
            <!-- ENDIF -->

            <!-- Тип двигателя (select) -->
            <!-- IF {MARKET_XTRA_MOTOR_TYPE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_MOTOR_TYPE_TITLE}:</strong> <span>{MARKET_XTRA_MOTOR_TYPE}</span>
            </div>
            <!-- ENDIF -->

            <!-- Материал рамы (select) -->
            <!-- IF {MARKET_XTRA_FRAME_MATERIAL} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_FRAME_MATERIAL_TITLE}:</strong> <span>{MARKET_XTRA_FRAME_MATERIAL}</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 -->

            <!-- Максимальная нагрузка (inputint) -->
            <!-- IF {MARKET_XTRA_MAX_LOAD} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_MAX_LOAD_TITLE}:</strong> <span>до {MARKET_XTRA_MAX_LOAD} кг</span>
            </div>
            <!-- ENDIF -->

            <!-- Основные цвета (checklistbox) – выводим как список -->
            <!-- IF {MARKET_XTRA_COLORS} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_COLORS_TITLE}:</strong>
              <ul class="list-unstyled">
                <!-- Значения checklistbox разделены запятыми, здесь показан пример статического списка.
                     В реальности можно разбить строку через PHP-фильтр или вывести как {MARKET_XTRA_COLORS}. -->
                <li>⚫ Чёрный</li>
                <li>🔵 Синий</li>
              </ul>
            </div>
            <!-- ENDIF -->

            <!-- Особенности модификации (checklistbox) – динамический вывод строки с разделителями -->
            <!-- IF {MARKET_XTRA_FEATURES} -->
            <div class="col-12 mb-3">
              <strong>{MARKET_XTRA_FEATURES_TITLE}:</strong>
              <p>{MARKET_XTRA_FEATURES}</p>
            </div>
            <!-- ENDIF -->

            <!-- Трансмиссия (select или input) -->
            <!-- IF {MARKET_XTRA_TRANSMISSION} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_TRANSMISSION_TITLE}:</strong> <span>{MARKET_XTRA_TRANSMISSION}</span>
            </div>
            <!-- ENDIF -->

            <!-- Дисплей (input) -->
            <!-- IF {MARKET_XTRA_DISPLAY_TYPE} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_DISPLAY_TYPE_TITLE}:</strong> <span>{MARKET_XTRA_DISPLAY_TYPE}</span>
            </div>
            <!-- ENDIF -->

            <!-- Наличие фары (checkbox) -->
            <!-- IF {MARKET_XTRA_HEADLIGHT} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_HEADLIGHT_TITLE}:</strong>
              <!-- IF {MARKET_XTRA_HEADLIGHT_VALUE} == '1' -->
              <span class="text-success">✓ LED передняя + задний стоп-сигнал</span>
              <!-- ELSE -->
              <span class="text-danger">✗ отсутствует</span>
              <!-- ENDIF -->
            </div>
            <!-- ENDIF -->

            <!-- Гарантия (input) -->
            <!-- IF {MARKET_XTRA_WARRANTY} -->
            <div class="col-md-6 mb-3">
              <strong>{MARKET_XTRA_WARRANTY_TITLE}:</strong> <span>{MARKET_XTRA_WARRANTY}</span>
            </div>
            <!-- ENDIF -->

          </div>
        </div>

        <!-- ========== Вкладка Описание и конструкция ========== -->
        <div class="tab-pane fade" id="description" role="tabpanel">
          <!-- Полное описание (textarea) -->
          <!-- IF {MARKET_XTRA_FULL_DESCRIPTION} -->
          <h5>{MARKET_XTRA_FULL_DESCRIPTION_TITLE}</h5>
          <div>{MARKET_XTRA_FULL_DESCRIPTION}</div>
          <!-- ELSE -->
          <p>Описание отсутствует.</p>
          <!-- ENDIF -->
        </div>

        <!-- ========== Вкладка Габариты и геометрия ========== -->
        <div class="tab-pane fade" id="dimensions" role="tabpanel">
          <!-- Габариты (textarea) – можно вывести одной строкой или таблицей -->
          <!-- IF {MARKET_XTRA_DIMENSIONS} -->
          <div>{MARKET_XTRA_DIMENSIONS}</div>
          <!-- ELSE -->
          <p>Габариты не указаны.</p>
          <!-- ENDIF -->
        </div>

        <!-- ========== Вкладка Особенности ========== -->
        <div class="tab-pane fade" id="features" role="tabpanel">
          <div class="row">
            <!-- Комплектация (textarea) -->
            <!-- IF {MARKET_XTRA_EQUIPMENT} -->
            <div class="col-md-6 mb-3">
              <h5>{MARKET_XTRA_EQUIPMENT_TITLE}</h5>
              <div>{MARKET_XTRA_EQUIPMENT}</div>
            </div>
            <!-- ENDIF -->

            <!-- Инструменты для сборки (textarea) -->
            <!-- IF {MARKET_XTRA_TOOLS_ASSEMBLY} -->
            <div class="col-md-6 mb-3">
              <h5>{MARKET_XTRA_TOOLS_ASSEMBLY_TITLE}</h5>
              <div>{MARKET_XTRA_TOOLS_ASSEMBLY}</div>
            </div>
            <!-- ENDIF -->

            <!-- Правила обкатки (textarea) -->
            <!-- IF {MARKET_XTRA_RUN_IN_RULES} -->
            <div class="col-md-6 mb-3">
              <h5>{MARKET_XTRA_RUN_IN_RULES_TITLE}</h5>
              <div>{MARKET_XTRA_RUN_IN_RULES}</div>
            </div>
            <!-- ENDIF -->

            <!-- Уход за аккумулятором (textarea) -->
            <!-- IF {MARKET_XTRA_BATTERY_CARE} -->
            <div class="col-md-6 mb-3">
              <h5>{MARKET_XTRA_BATTERY_CARE_TITLE}</h5>
              <div>{MARKET_XTRA_BATTERY_CARE}</div>
            </div>
            <!-- ENDIF -->
          </div>
        </div>

        <!-- ========== Вкладка FAQ ========== -->
        <div class="tab-pane fade" id="faq" role="tabpanel">
          <div class="accordion" id="faqAccordion">
            <!-- Вопрос 1 (input + textarea) -->
            <!-- IF {MARKET_XTRA_FAQ_ITEM1_Q} AND {MARKET_XTRA_FAQ_ITEM1_A} -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading1">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true">
                  {MARKET_XTRA_FAQ_ITEM1_Q}
                </button>
              </h2>
              <div id="faqCollapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  {MARKET_XTRA_FAQ_ITEM1_A}
                </div>
              </div>
            </div>
            <!-- ENDIF -->

            <!-- Вопрос 2 (аналогично) -->
            <!-- IF {MARKET_XTRA_FAQ_ITEM2_Q} AND {MARKET_XTRA_FAQ_ITEM2_A} -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading2">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2">
                  {MARKET_XTRA_FAQ_ITEM2_Q}
                </button>
              </h2>
              <div id="faqCollapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  {MARKET_XTRA_FAQ_ITEM2_A}
                </div>
              </div>
            </div>
            <!-- ENDIF -->

            <!-- Вопрос 3 -->
            <!-- IF {MARKET_XTRA_FAQ_ITEM3_Q} AND {MARKET_XTRA_FAQ_ITEM3_A} -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading3">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3">
                  {MARKET_XTRA_FAQ_ITEM3_Q}
                </button>
              </h2>
              <div id="faqCollapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  {MARKET_XTRA_FAQ_ITEM3_A}
                </div>
              </div>
            </div>
            <!-- ENDIF -->
          </div>
        </div>

        <!-- ========== Вкладка Доставка и оплата ========== -->
        <div class="tab-pane fade" id="delivery" role="tabpanel">
          <!-- Доставка (textarea) -->
          <!-- IF {MARKET_XTRA_DELIVERY_INFO} -->
          <h5>Доставка</h5>
          <div>{MARKET_XTRA_DELIVERY_INFO}</div>
          <!-- ENDIF -->

          <!-- Оплата (textarea) -->
          <!-- IF {MARKET_XTRA_PAYMENT_INFO} -->
          <h5>Оплата</h5>
          <div>{MARKET_XTRA_PAYMENT_INFO}</div>
          <!-- ENDIF -->
        </div>

        <!-- ========== Вкладка Гарантия и сервис ========== -->
        <div class="tab-pane fade" id="service" role="tabpanel">
          <!-- Полная гарантия (input/textarea) -->
          <!-- IF {MARKET_XTRA_WARRANTY_FULL} -->
          <h5>Гарантийные обязательства</h5>
          <p>{MARKET_XTRA_WARRANTY_FULL}</p>
          <!-- ENDIF -->

          <!-- Сервис (textarea) -->
          <!-- IF {MARKET_XTRA_SERVICE_INFO} -->
          <h5>Сервисное обслуживание</h5>
          <div>{MARKET_XTRA_SERVICE_INFO}</div>
          <!-- ENDIF -->
        </div>

      </div>
    </div>
  </div>
</div>

<!-- ENDIF -->  <!-- конец проверки активности плагина -->

Русский текст внутри примера для наглядности, - в реальности же использовать строки локализации темы/плагина/модуля

#568 webitproff: 
 

Здесь представлен готовый пример шаблона market.tpl, в котором динамически создаем модульное описание товара при помощи экстраполей Cotonti и конкретно с использованием плагина xtradbrowmarket

и в исходном коде, было бы примерно вот так: 

<!-- Подключение Bootstrap 5 (CDN) для стилей и скриптов вкладок -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- 
  Пример построен на данных реального товара: фэтбайк Crosser E‑CODE PRO.
  Все блоки, значения и вкладки демонстрируют, как экстраполя xtradbrowmarket 
  превращаются в модульное описание с вкладками, прогресс-барами, списками и т.д.
  Комментарии внутри HTML показывают, какое поле xtradbrowmarket используется.
-->

<div class="container my-5">

  <!-- Название товара (обычно берётся из основного модуля Market) -->
  <h1 class="mb-3">Электрофэтбайк Crosser E‑CODE PRO (2026)</h1>
  <p class="lead">1500W • 60V 20Ah • 20″×4.0 • до 60 км/ч • до 80 км, двухместный</p>

  <!-- Карточка с вкладками -->
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-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="dimensions-tab" data-bs-toggle="tab" data-bs-target="#dimensions" type="button" role="tab">Габариты и геометрия</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features" type="button" role="tab">Особенности</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq" type="button" role="tab">FAQ</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="delivery-tab" data-bs-toggle="tab" data-bs-target="#delivery" type="button" role="tab">Доставка и оплата</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="service-tab" data-bs-toggle="tab" data-bs-target="#service" type="button" role="tab">Гарантия и сервис</button>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content" id="productTabsContent">
        
        <!-- ========== Вкладка Характеристики ========== -->
        <div class="tab-pane fade show active" id="specs" role="tabpanel">
          <div class="row">
            
            <!-- Комбинация двух select: вольтаж + ёмкость -->
            <!-- Поле xtradbrowmarket: ab_volt (select: 36V,48V,60V,72V) -->
            <!-- Поле xtradbrowmarket: ab_capacity (select: 15Ah,16Ah,17Ah,18Ah,19Ah,20Ah) -->
            <!-- В шаблоне market.edit.tpl они выводятся отдельно, а здесь объединены -->
            <div class="col-md-6 mb-3">
              <strong>Аккумулятор:</strong> 
              <span>⚡ 60V 🔋 20Ah</span>
            </div>

            <!-- Поле xtradbrowmarket: motor_power (inputint) – мощность двигателя -->
            <div class="col-md-6 mb-3">
              <strong>Мощность двигателя:</strong> <span>1500 Вт</span>
            </div>

            <!-- Поле xtradbrowmarket: max_speed (range) – максимальная скорость, показываем прогресс-баром -->
            <div class="col-md-6 mb-3">
              <strong>Макс. скорость:</strong>
              <div class="progress mt-1" style="height:20px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="80">
                  60 км/ч (75%)
                </div>
              </div>
            </div>

            <!-- Поле xtradbrowmarket: range_km (inputint) – запас хода -->
            <div class="col-md-6 mb-3">
              <strong>Запас хода:</strong> <span>до 80 км</span>
            </div>

            <!-- Поле xtradbrowmarket: wheel_size (select: 20",24",26",27.5",29") или input -->
            <div class="col-md-6 mb-3">
              <strong>Диаметр колёс:</strong> <span>20″ × 4.0</span>
            </div>

            <!-- Поле xtradbrowmarket: brakes_type (select: Гидравлические дисковые, Механические дисковые, V‑brake) -->
            <div class="col-md-6 mb-3">
              <strong>Тормоза:</strong> <span>Гидравлические дисковые</span>
            </div>

            <!-- Поле xtradbrowmarket: suspension_type (select: Передняя, Задняя, Двухподвес) -->
            <div class="col-md-6 mb-3">
              <strong>Амортизация:</strong> <span>Двухподвес (передняя + задняя)</span>
            </div>

            <!-- Поле xtradbrowmarket: drive_type (select: Задний привод, Передний привод, Полный привод) -->
            <div class="col-md-6 mb-3">
              <strong>Тип привода:</strong> <span>Задний привод</span>
            </div>

            <!-- Поле xtradbrowmarket: motor_type (select: Редукторный (Geared), Прямой привод (Direct Drive)) -->
            <div class="col-md-6 mb-3">
              <strong>Тип двигателя:</strong> <span>Редукторный (Geared)</span>
            </div>

            <!-- Поле xtradbrowmarket: frame_material (select: Сталь, Алюминий, Карбон) -->
            <div class="col-md-6 mb-3">
              <strong>Материал рамы:</strong> <span>Алюминиевый сплав</span>
            </div>

            <!-- Поле xtradbrowmarket: weight (double) – вес -->
            <div class="col-md-6 mb-3">
              <strong>Вес:</strong> <span>40 кг</span>
            </div>

            <!-- Поле xtradbrowmarket: max_load (inputint) – максимальная нагрузка -->
            <div class="col-md-6 mb-3">
              <strong>Макс. нагрузка:</strong> <span>до 150 кг</span>
            </div>

            <!-- Поле xtradbrowmarket: colors (checklistbox: Чёрный, Синий) -->
            <div class="col-md-6 mb-3">
              <strong>Цвета:</strong>
              <ul class="list-unstyled">
                <li>⚫ Чёрный</li>
                <li>🔵 Синий</li>
              </ul>
            </div>

            <!-- Поле xtradbrowmarket: features (checklistbox) – Особенности модификации -->
            <div class="col-12 mb-3">
              <strong>Особенности модификации:</strong>
              <ul>
                <li>Цифровой дисплей</li>
                <li>Двойная дисковая тормозная система</li>
                <li>Фиксированное сиденье (мотоциклетного типа)</li>
                <li>Передняя фара</li>
                <li>Подножка</li>
                <li>Мото дизайн</li>
                <li>Крылья (брызговики)</li>
                <li>Подножки для пассажира</li>
                <li>Переключатель скоростей задний</li>
                <li>Съёмный аккумулятор</li>
                <li>Спидометр</li>
                <li>Ручка газа (поворотная)</li>
              </ul>
            </div>

            <!-- Поле xtradbrowmarket: transmission (select) – трансмиссия -->
            <div class="col-md-6 mb-3">
              <strong>Трансмиссия:</strong> <span>Shimano 7 скоростей</span>
            </div>

            <!-- Поле xtradbrowmarket: display_type (select или input) – тип дисплея -->
            <div class="col-md-6 mb-3">
              <strong>Дисплей:</strong> <span>Цветной LCD</span>
            </div>

            <!-- Поле xtradbrowmarket: headlight (checkbox) – наличие фары -->
            <div class="col-md-6 mb-3">
              <strong>Фара:</strong> <span class="text-success">✓ LED передняя + задний стоп-сигнал</span>
            </div>

            <!-- Поле xtradbrowmarket: warranty (input) – гарантия -->
            <div class="col-md-6 mb-3">
              <strong>Гарантия:</strong> <span>12 месяцев (рама/двигатель), 6 мес. (электроника), 3 мес. (аккумулятор)</span>
            </div>

          </div>
        </div>

        <!-- ========== Вкладка Описание и конструкция ========== -->
        <div class="tab-pane fade" id="description" role="tabpanel">
          <!-- Поле xtradbrowmarket: full_description (textarea) -->
          <h5>Общее описание</h5>
          <p>
            Фэтбайк Crosser E‑CODE PRO (Кроссер И‑КОД Про) 2026 — мощный электровелосипед премиум‑класса с двигателем 1500 Вт, литиевой батареей 60V 20Ah и стильным дизайном. Модель подходит как для ежедневных городских поездок, так и для загородных маршрутов. Широкие колёса, гидравлические дисковые тормоза и качественная подвеска обеспечивают комфорт и безопасность даже на неровных дорогах. Фэтбайк спроектирован для движения в условиях городского трафика и по мягким грунтам (песок, грязь, лесные дороги).
          </p>

          <h5>Конструкция</h5>
          <p>
            Рама выполнена из высокопрочного алюминиевого сплава, что снижает вес и увеличивает жёсткость. Двойная амортизация: спереди – длинноходная мото‑вилка перевёрнутого типа, сзади – маятниковая подвеска с двумя регулируемыми пружинно‑гидравлическими амортизаторами. Утолщённое цельное сиденье мотоциклетного типа с мягким наполнителем позволяет комфортно ездить вдвоём. Металлический кожух спереди защищает контроллер и проводку, а большая LED‑фара с защитной решёткой и задний стоп‑сигнал повышают безопасность.
          </p>
        </div>

        <!-- ========== Вкладка Габариты и геометрия ========== -->
        <div class="tab-pane fade" id="dimensions" role="tabpanel">
          <!-- Поле xtradbrowmarket: dimensions (textarea) или несколько input -->
          <table class="table">
            <tbody>
              <tr><td>Транспортировочные габариты (в коробке)</td><td>172 × 33 × 64 см</td></tr>
              <tr><td>Длина байка в рабочем состоянии</td><td>~172–175 см</td></tr>
              <tr><td>Высота рулевой стойки (от земли до грипс)</td><td>118 см</td></tr>
              <tr><td>Высота по седлу (мотоциклетное, фиксированное)</td><td>76 см</td></tr>
              <tr><td>Диаметр колёс (с учётом покрышек)</td><td>20″ (внешний диаметр ~508 мм)</td></tr>
              <tr><td>Ширина покрышек (Fat Tires)</td><td>4.0″ (ок. 10 см)</td></tr>
              <tr><td>Размер рамы</td><td>One Size (165–190 см рост райдера)</td></tr>
            </tbody>
          </table>
        </div>

        <!-- ========== Вкладка Особенности ========== -->
        <div class="tab-pane fade" id="features" role="tabpanel">
          <div class="row">
            <!-- Поле xtradbrowmarket: equipment (textarea) -->
            <div class="col-md-6 mb-3">
              <h5>Комплектация</h5>
              <ul>
                <li>Электровелосипед</li>
                <li>Зарядное устройство 60V</li>
                <li>Набор инструментов</li>
                <li>Инструкция пользователя</li>
                <li>Зеркало заднего вида</li>
                <li>Звонок</li>
              </ul>
            </div>

            <!-- Поле xtradbrowmarket: tools_assembly (textarea) – инструменты для сборки -->
            <div class="col-md-6 mb-3">
              <h5>Инструменты для финальной сборки из коробки</h5>
              <ul>
                <li>Набор шестигранных ключей (4, 5, 6 мм)</li>
                <li>Рожковый ключ на 15 мм</li>
                <li>Рожковый ключ на 10 мм</li>
                <li>Крестовая отвёртка (PH2)</li>
                <li>Насос с манометром (ниппель Schrader)</li>
                <li>Кусачки или канцелярский нож</li>
              </ul>
            </div>

            <!-- Поле xtradbrowmarket: run_in_rules (textarea) – правила обкатки -->
            <div class="col-md-6 mb-3">
              <h5>Правила обкатки</h5>
              <p>Первые 50–100 км:</p>
              <ul>
                <li>10–15 плавных остановок со скорости 20 км/ч для притирки тормозов</li>
                <li>Проверка натяжения спиц после 30–50 км</li>
                <li>Протяжка резьбовых соединений через неделю</li>
                <li>Щадящий режим для мотора (помощь педалями на подъёмах)</li>
              </ul>
            </div>

            <!-- Поле xtradbrowmarket: battery_care (textarea) – уход за аккумулятором -->
            <div class="col-md-6 mb-3">
              <h5>Уход за аккумулятором</h5>
              <ul>
                <li>Первая зарядка до 100%, затем ещё 1–2 часа для балансировки</li>
                <li>Избегайте глубокого разряда (ставьте на зарядку при 15–20%)</li>
                <li>Заряжайте при комнатной температуре (+15°C … +25°C)</li>
                <li>При длительном хранении – заряд 40–60%</li>
                <li>Вставляйте штекер в аккумулятор до включения в розетку</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- ========== Вкладка FAQ ========== -->
        <div class="tab-pane fade" id="faq" role="tabpanel">
          <div class="accordion" id="faqAccordion">
            <!-- Поле xtradbrowmarket: faq_item1_q / faq_item1_a (input / textarea) -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading1">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse1" aria-expanded="true">
                  Какая гарантия на электровелосипед?
                </button>
              </h2>
              <div id="faqCollapse1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  Гарантия на этот фэтбайк — 12 месяцев на раму и электромотор, 6 месяцев на электронику, 3 месяца на аккумулятор. При правильной эксплуатации батарея прослужит 3-4 года с заявленными характеристиками.
                </div>
              </div>
            </div>

            <!-- Поле xtradbrowmarket: faq_item2_q / faq_item2_a -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading2">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse2">
                  Нужны ли права на фэтбайк в Украине?
                </button>
              </h2>
              <div id="faqCollapse2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  Для управления электровелосипедом с мощностью до 3000 Вт в Украине водительское удостоверение не требуется. Рекомендуется соблюдать правила дорожного движения и использовать защитный шлем.
                </div>
              </div>
            </div>

            <!-- Поле xtradbrowmarket: faq_item3_q / faq_item3_a -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="faqHeading3">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse3">
                  Сколько времени занимает зарядка?
                </button>
              </h2>
              <div id="faqCollapse3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                <div class="accordion-body">
                  Полная зарядка штатным зарядным устройством 60V занимает 6–7 часов.
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- ========== Вкладка Доставка и оплата ========== -->
        <div class="tab-pane fade" id="delivery" role="tabpanel">
          <!-- Поле xtradbrowmarket: delivery_info (textarea) -->
          <h5>Доставка</h5>
          <p>Бесплатная доставка по Москве и области. В регионы — транспортной компанией СДЭК, Boxberry, Почта России. Стоимость рассчитывается при оформлении заказа.</p>

          <!-- Поле xtradbrowmarket: payment_info (textarea) -->
          <h5>Оплата</h5>
          <p>Наличными курьеру, банковской картой на сайте, электронными деньгами (ЮMoney, QIWI), безналичный расчёт для юридических лиц.</p>
        </div>

        <!-- ========== Вкладка Гарантия и сервис ========== -->
        <div class="tab-pane fade" id="service" role="tabpanel">
          <!-- Поле xtradbrowmarket: warranty_full (input или textarea) -->
          <h5>Гарантийные обязательства</h5>
          <p>Гарантия: 12 месяцев на раму и двигатель, 6 месяцев на электронику, 3 месяца на аккумулятор. При падении ёмкости батареи ниже 70% в течение гарантийного срока – замена.</p>

          <!-- Поле xtradbrowmarket: service_info (textarea) -->
          <h5>Сервисное обслуживание</h5>
          <p>Более 50 авторизованных сервисных центров по всей России. Бесплатное ТО при пробеге 500 км и 2000 км. Рекомендуется проверка натяжения спиц, тормозов и затяжки резьбы после первых 100 км.</p>
        </div>

      </div>
    </div>
  </div>
</div>

теперь я думаю видно, экстраполя это паувэр 💪🫠