Как изменить модуль, чтобы он работал с адаптивной панелью администратора

Пользователи просили о возможности администрировать магазин на CS-Cart с мобильных устройств. Поэтому мы сделали модуль Адаптивная панель администратора [Beta], который добавили в версию 4.7.3. Если ваш модуль как-то меняет панель администратора, то эта инструкция поможет добавить в него поддержку адаптивности.

Важно

Пока мы добавили адаптивность именно в виде модуля, который не установлен по умолчанию. Так у разработчиков будет время исправить свои модули. Но со временем адаптивность станет частью ядра CS-Cart.

Основные изменения

  • Теперь стили разбиты на отдельные файлы, которые находятся в директории css/tygh. Файл styles.less используется как index-файл и просто импортирует less-файлы в себя. В директории css/tygh также есть под-директории со стилями:

    • icons/ — стили, отвечающие за описание иконок и пиктограмм;

    • modals/ — стили, связанные с pop-up и modal-окнами;

    • navbars/ — стили навигационного и мобильного меню панели администратора;

    • pages/ — специальные стили для определённых страниц панели администратора;

    • responsive/ — стили с медиа-запросами;

      Примечание

      Мы планируем отказываться от вынесения медиа-запросов в отдельный файл. Поэтому в будущем стили из responsive/ будут вынесены в соответствующие файлы.

    • ui_base/ — стили базовых компонентов интерфейса (т.н. изолированные компоненты);

    • utils/ — утилитарные стили и стили комплексных компонентов интерфейса.

  • Добавлен конфигурационный файл config.less (находится рядом со styles.less). Мы постепенно переносим LESS-переменные в config.less и создаём там новые. В конфигурационном файле можно узнать, какие используются переменные.

  • Функция для проверки ширины экрана в JS. В версии 4.7.3 появилась глобальная функция matchScreenSize().

Какие элементы затронуты?

  • Таблицы. Именно в правке таблиц заключается большая часть адаптации модуля к новой панели администратора.
  • Заголовки. Теперь первая часть названия страницы или всплывающего окна будет скрываться на мобильных устройствах.
  • Боковая панель (sidebar). На мобильных устройствах боковая панель по умолчанию скрыта и открывается сбоку при необходимости. Если там была необычная верстка, её придется адаптировать.
  • Мобильное меню. Меню тоже адаптируется; с ним делать ничего не нужно, обратная совместимость сохранена.

Как проходит адаптация?

Заголовки обычных страниц

Например, у нас есть страница редактирования товара. Её заголовок: “Editing product: My Product” (на русском языке это будет “Редактирование товара: Мой товар”).

В мобильной верстке заголовок должен выглядеть так: “My Product”. То есть отбрасывается первая часть названия, обозначающая действие, которое мы выполняем на странице. Чтобы внедрить адаптивность заголовков:

  1. Находим в шаблоне заголовок обычной страницы. Он задается при подключении mainbox.tpl:

    {include file="common/mainbox.tpl"  title=$title ... }
    
  2. Вы можете оставить $title (название страницы) для обратной совместимости, но следует добавить две новые переменные для нужного поведения. А именно:

    {include file="common/mainbox.tpl"
       title_start=$title_start
       title_end=$title_end ... }
    

    Следовательно, логика такая:

    $title_start = "Edit product"
    $title_end = "My Product"
    

Заголовки pop-up окон

Действия точно такие же, как и для обычных страниц. Единственное отличие заключается в том, что pop-up-окно подключается в:

{include file="common/popupbox.tpl" ... }

Таблицы

Допустим, до адаптации у нас есть такая таблица:

<table width="100%" class="table table-middle">
   <thead>
       <tr>
           <th>Column1</th>
           <th>Column2</th>
       </tr>
   </thead>
   <!-- body below -->
   <tr>
       <td>Content1</td>
       <td>Content2</td>
   </tr>
</table>

Сделаем её адаптивной. Для этого:

  1. Оборачиваем таблицу в обёртку, которая добавляет нужное поведение:

    <div class="table-responsive-wrapper">
      <table> <!-- Table Content --> </table>
    </div>
    
  2. Тегу <table> добавляем класс table-responsive:

    <div class="table-responsive-wrapper">
      <table class="... table-responsive">
        <!-- Table Content -->
      </table>
    </div>
    
  3. Ячейкам таблицы присваиваем data-атрибут, обозначающий их заголовок (data-th):

    <td data-th="Column title">...</td>
    
  4. В итоге получаем таблицу, которая умеет адаптироваться:

    <div class="table-responsive-wrapper">
       <table width="100%" class="table table-middle table-responsive">
           <thead>
               <tr>
                   <th>Column1 (will hide on mobile devices)</th>
                   <th>Column2</th>
                   <th>Column3</th>
               </tr>
           </thead>
           <!-- body below -->
           <tr>
               <td class="nowrap left mobile-hide">Content1</td>
               <td class="nowrap" data-th="Column2">Content2</td>
               <td class="nowrap right" data-th="Column3">Content3</td>
           </tr>
       </table>
    </div>
    

Новая функция в core.js

В CS-Cart 4.7.3 в core.js появилась функция $.matchScreenSize для проверки текущей ширины экрана в JS. Используется она вот так:

if ($.matchScreenSize(['xs', 'xs-large'])) { ... }

В данном примере вернется true, если у тега <body> имеется класс 'screen--xs' или 'screen--xs-large'.

Список возможных селекторов:

'screen--xs':       [0, 350],
'screen--xs-large': [350, 480],
'screen--sm':       [481, 768],
'screen--sm-large': [768, 1024],
'screen--md':       [1024, 1280],
'screen--md-large': [1280, 1440],
'screen--lg':       [1440, 1920],
'screen--uhd':      [1920, 9999]

Большое обновление CS-Cart уже здесь Попробуйте новую панель администратора с темной темой