Как нужно, как можно и как нельзя делать Front-end разработчику в CS-Cart

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

LESS:

• Есть набор переменных и условий встроенных в ядро. Следует их использовать по назначению. Примеры:
  1. Текст "в наличии" который нужно оформить зелёненьким цветов — это не #00ff00, а @in_stock
  2. Цвет текста мы не задаём через HEX, а так же используем переменные зашитые в цветосхемы. В данном случае нам нужна переменная @font. Если же где-то текст немного светлее или темнее то затемняем/высветляем через less функцию darken(*переменная с цветом*, n%) или lighten(*переменная с цветом*, n%)
  3. Если где-то нужно использовать полупрозрачный фон, например, основной кнопки, то мы не зашивает цвет в стилях, а используем less функцию fade. Пример: fade(@primary_button, n%).

  4. Закругляем углы через миксин .rounded_corners(n);. В настройках платформы есть галочка "Скруглить углы". Этот миксин учитывает эту настройку как раз.

     Мы не используем этот миксин только в случаях, если нам 100% всегда нужен круг (например, мы оформляем кастомный <input type="radio">).

  5. Стили пишем следующим образом:

     .selector {
         border: 1px;
     }

     То есть селектор и открывающая скобка на одной строке через пробел, табуляция в 4 пробела (настроить именно пробелы), закрывающая скобка на отдельной строке.

  Подробнее тут: https://lesscss.org/functions/#color-operations

  Полный список доступных переменных лежит в design/themes/*используемая тема*/styles/data/file.less (в любом less файле в этой папке).

• Если нам нужно задать уникальное оформление какому-то одному блоку или секции, то задаём свой класс этому блоку через макеты. И всё оформление заворачиваем в селектор с этим классом. Например: нам нужно сделать секцию с заголовком плавающей и с фоном. Не нужно так делать если мы оформляем подобным образом все заголовки на сайте (потому что тогда нам нужно будет прокинуть этот класс на все заголовки).

В CS-Cart используется шаблонизатор Smarty и язык стилей LESS. Они позволяют нам вести разработку более гибко.

Что позволяет Smarty:

• {capture name="my_capture"}{/capture} — это парный Smarty тег. Всё содержимое внутри будет сохранено в переменную и будет отображено на экран когда мы вызовем отображение через {$smarty.capture.my_capture nofilter}.

  Атрибут name можно задавать с любым значением, но он обязателен.

  Подробнее тут https://www.smarty.net/docs/en...

• {foreach $items as $item}{/foreach} — это парный Smarty тег. Пробегает циклом по переменной (массиву или объекту) $items, каждый элемент будет записан в $item.

  Подробнее тут https://www.smarty.net/docs/en...

• Если Вы не знаете что лежит в какой-то переменной, то можно легко узнать отпечатав её на экран. Для этого в любом месте в шаблоне добавляем {fn_print_r($var_name)}, где "var_name" — название нужной нам переменной.

Что позволяет LESS:

• Использование переменных. Подробнее тут https://lesscss.org/features/#...
• Использование миксинов и примитивных условий. Подробнее тут https://lesscss.org/features/#...

LESS:

• Никогда не добавляем "от себя" переменные в файл цветосхемы. В противном случае при переключении темы сломается сайт. Новые переменные добавляем в своём файле стилей.
• Стараемся не дублировать стили. Если мы оформляем сетку товаров и размер текста у цены одинаковый и в блоках и в категориях, то нужно найти общий класс родительский и задать размер сразу и там и там.
• Никогда не оформляем стилями ширину у элементов скроллера. Их считает скрипт.
• Зашивать статическую ширину — очень плохо. Не надо так. Применимо только для всяких кнопочек, выезжающих панелек и тп. Лучше манипулировать шириной через flex или grid.

В общем о вёрстке:

• Нельзя оформлять стилями классы начинающиеся на cm-. Это функциональные классы (то есть на классы cm- мы вешаем скрипты. Оформляем мы либо свои кастомные классы либо классы ty-. Исключением являются только случаи когда мы не можем навесить свой класс и ty- классов на элементе нет.
• Все классы в платформе обычно имеют логические названия. Если на родительском элементе есть класс .b-top (т.е. border-top). То не нужно от этого класса строить оформление списка товаров. Где-то там, вероятно будет что-то в духе .ty-grid-list или .ty-compact-list.
• Никогда никакой текстовый контент нельзя запихивать в псевдоэлементы before и after. Иконки и другие графические элементы можно.