Адаптация существующих модулей и тем под CS-Cart 4.18.2

Изменения в ядре

Добавлены пакеты google/auth, firebase/php-jwt, psr/cache.

Важно

Не используйте их, они будут удалены в ближайшем будущем.

Изменения в хуках

Новые хуки

  1. Изменяет параметры запроса перед выбором городов местоположения магазина:

    fn_set_hook('get_store_location_cities', $params, $condition);
    
  2. Выполняется перед возвратом данных запроса:

    fn_set_hook('rus_online_cache_register_receipt_request_json_post', $this, $result, $receipt);
    

Изменения в стилях

Использование цветовых переменных вместо цветов

Использование жестко запрограммированных цветов устарело. Используйте цветовые переменные CSS. Например:

  • Вместо #fff используйте var(--cs-content-background) для цвета фона.
  • Вместо #2d2d2d используйте var(--cs-text-color) для цвета текста.
  • Вместо #fff используйте var(--cs-text-inverse-color) для инвертированого цвета текста.
  • Вместо #1d9ff8 используйте var(--cs-btn-primary-background) для основного фона кнопки.
  • Вместо #d80954 используйте var(--cs-error-text) для цвета текста ошибки.
  • Вместо rgba(0, 0, 0, 0.1) используйте var(--cs-shadow10-color) для тени.

Полный список переменных см. в design/backend/css/less_to_css_vars.less. Для темной темы требуются цветовые переменные. Проверьте свои модули в светлой и темной админ панели.

Устаревшие стили Less

Стили Less устарели и больше не будут поддерживаться в будущем. Вместо этого используйте собственные стили CSS. Например:

  1. Не используйте переменные Less. Используйте собственные переменные CSS. Например:
    • Вместо @mainColor используйте var(--cs-main-color).
    • Вместо @media (min-width: @TabletBreakpoint + 1px) { ... } используйте @media (min-width: 768px) { ... }.
    • Вместо -@iconSize; используйте ~"calc(var(--cs-icon-size) * -1)".
  2. Не используйте миксины Less. Описывайте свойства явно. Например:
    • Вместо .transition(all 200ms); используйте transition: all 200ms;.
    • Вместо .display-flex(); используйте display: flex;.
  3. Не используйте правила Less Intendered. Описывайте селекторы явно. Например:
    • Вместо a { opacity: 0.8; &:hover { opacity: 1; } } используйте a { opacity: 0.8; } a:hover { opacity: 1; }.
    • Вместо .block { padding: 10px; @media (min-width: 768px) { padding: 20px; } } используйте .block { padding: 10px; } @media (min-width: 768px) { .block { padding: 20px; } }.
  4. Не используйте функции Less. Используйте похожие цвета и значения свойств. Например:
    • Вместо spin(desaturate(lighten(@textColor, 30%), 25%), -15%); используйте var(--cs-text-muted-color);.
    • Вместо darken(@btnBorder, 3%) используйте var(--cs-shadow15-color).
    • Вместо lighten(@textColor, 38%); используйте var(--cs-text-muted-color);.
    • Вместо round(@baseLineHeight / 1.5385) используйте 13px;.
  5. НО используйте экранирование для функций Less, которые похожи на функции CSS. Пример:
    • Вместо calc(100% - 5px) используйте ~"calc(100% - 5px)".

Новые классы CSS

cs-dark-theme-invert - инвертирует цвета для темной темы.

Удаленные переменные стилей

UI

  1. @isControlGroupHidden.
  2. Вместо @spinnerSize используйте 24px.
  3. Вместо @spinnerBorderWidth используйте 3px.
  4. Вместо @spinnerBlockSize используйте 52px.
  5. Вместо @uiDialogTitlebarCloseWidth используйте var(--cs-ui-dialog-titlebar-close-width).
  6. Вместо @uiDialogTitlebarCloseHeight используйте var(--cs-ui-dialog-titlebar-close-height).
  7. Вместо @global_individual_secondary используйте var(--cs-global-individual-secondary).
  8. Вместо @global_individual_active_background используйте var(--cs-global-individual-active-background).
  9. Вместо @global_individual_active_border используйте var(--cs-global-individual-active-border).
  10. Вместо @global_individual_disabled используйте var(--cs-global-individual-disabled).
  11. Вместо @global_individual_secondary_disabled используйте var(--cs-global-individual-secondary-disabled).
  12. Вместо @global_individual_active_background_disabled используйте var(--cs-global-individual-active-background-disabled).
  13. Вместо @global_individual_active_border_disabled используйте var(--cs-global-individual-active-border-disabled).
  14. Вместо @button-color используйте #fff.
  15. Вместо @button-opacity-on-hover используйте 0.75.
  16. Вместо @header-height используйте 40px.
  17. Вместо @button-width используйте 45px.
  18. Вместо @button-indent используйте 10px.
  19. Вместо @img-indent используйте 10px.
  20. Вместо @arrow-size используйте 60px.

Панель управления (Dashboard)

  1. Вместо @dashboardBorderColor используйте var(--cs-dashboard-border-color).
  2. Вместо @dashboardBorderColor используйте var(--cs-dashboard-border-color).
  3. Вместо @dashboardPrimaryColor используйте var(--cs-dashboard-primary-color).
  4. Вместо @dashboardSecondaryColor используйте var(--cs-dashboard-secondary-color).

Модули и Центр обновлений

  1. Вместо @darkTransparentMainColor используйте var(--cs-shadow10-color).
  2. Вместо @lightTextIconColor используйте var(--cs-text-inverse-color).
  3. Вместо @darkTextIconColor используйте var(--cs-form-actions-background).
  4. @middleTextIconColor.

Настройки уведомлений

  1. Вместо @editor-spacing используйте 16px.
  2. Вместо @editor-width используйте 500px.
  3. Вместо @editor-footer-border-color используйте #eee.
  4. Вместо @editor-padding используйте 17px.

Менеджер блоков

  1. Вместо @BlockManagerGrid используйте var(--cs-block-manager-grid).
  2. Вместо @BlockManagerGrid12Col используйте var(--cs-block-manager-grid12-col).
  3. Вместо @BlockManagerGrid16Col используйте var(--cs-block-manager-grid16-col).
  4. Вместо @BlockManagerIconsSprite используйте var(--cs-block-manager-icons-sprite).
  5. Вместо @BlockManagerOpenHand используйте var(--cs-block-manager-open-hand).
  6. Вместо @BlockManagerClosedHand используйте var(--cs-block-manager-closed-hand).
  7. Вместо @bm-block-border используйте var(--bm-block-border).
  8. @bm-block-hover-color.
  9. Вместо @bm-block-hover-border используйте var(--bm-block-hover-border).
  10. @bm-block-hover-shadow.
  11. Вместо @bm-block-hover-bg используйте var(--bm-block-hover-bg).
  12. Вместо @bm-block-grabbing-shadow используйте var(--bm-block-grabbing-shadow).
  13. Вместо @bm-block-menu используйте var(--bm-block-menu).
  14. Вместо @bm-block-menu-arrow используйте var(--bm-block-menu-arrow).
  15. @bm-border.
  16. Вместо @bm-border-radius используйте var(--bm-border-radius).
  17. Вместо @bm-icon-size используйте var(--bm-icon-size).
  18. Вместо @bm-icon используйте var(--bm-icon).

Модуль “Премодерация данных продавца”

  1. Вместо @editColor используйте var(--cs-vendor-data-premoderation-edit-color).
  2. @editBackground.

Модуль “Мобильное приложение”

  1. Вместо @backgoundColor используйте var(--cs-mobile-app-backgound-color).

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