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

Новые хуки¶

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 - инвертирует цвета для темной темы.

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