ДА
Выравнивание кнопок и контролов количества
Блок / ID: .t-store__card-sd005 (каталог товаров с кастомной сеткой)
12.07.2026 12:39
2
улучшение
улучшение
улучшение
улучшение
улучшение
готово
готово
готово
Проблема (в прошлой версии):
В карточках товаров кнопки «В корзину» и контролы количества вели себя нестабильно: имели разную ширину, «прыгали» по вертикали, а логика управления количеством зависела от хрупких костылей. Это ломало ритм сетки каталога и портило UX, особенно при быстрой прокрутке и на мобильных.
Ключевые болевые точки:
  • Нестабильная ширина кнопок: нативные кнопки Tilda не всегда занимали всю ширину карточки, из‑за чего в ряду появлялись визуальные «дыры» и разный вес элементов.
  • Вертикальное смещение: без принудительного выравнивания кнопки в карточках с разной высотой контента «уезжали» вверх/вниз, нарушая ритм сетки.
  • Гонка классов и мерцание: часть карточек не имела нужного класса, из‑за чего выпадала из общей логики. Приходилось использовать агрессивные setInterval, которые давали мерцание и лишнюю нагрузку на главный поток.
  • Хрупкая логика контролов количества: управление количеством и его отрисовка были завязаны на переопределение нативной функции t_store_addProductQuantity. Это создавало риск конфликтов при обновлениях Tilda и усложняло отладку.
  • Избыточные селекторы и !important: в CSS было много дублирующихся правил под разные типы блоков (t778, t776, t786 и т. д.) — это делало код трудноподдерживаемым.
LET'S GO!
Решение (новая версия):
Внедрили более структурированную и предсказуемую реализацию: стабилизировали ширину и вертикальное выравнивание через CSS, улучшили надёжность перехвата появления карточек и сделали логику контролов количества более прозрачной.
Что конкретно улучшено:
  • Структурированный JS вместо «голых» таймеров: вместо слепого setInterval добавили MutationObserver для отслеживания появления новых карточек — это снижает лишнюю нагрузку и убирает мерцание. Таймер оставлен как «страховка» с редким интервалом (1.5 сек), а не как основной механизм.
  • Нормализация ширины через CSS + JS‑страховка: ширина кнопок и полей количества задаётся через CSS, а JS‑функция normalizeButtonsInCard служит страховкой на случай, если CSS не применился вовремя (например, при динамической подгрузке).
  • Стабильное вертикальное выравнивание: кнопки прижимаются к низу карточки через margin-top: auto у контейнера .sd005-btns-wrapper — это надёжно работает даже при разной высоте контента и не зависит от табличной верстки.
  • Более аккуратное переопределение логики количества: функция overrideQuantityFunction явно оборачивает логику Tilda, сохраняя нативные механизмы и добавляя только кастомную разметку контролов.
  • Модульность и читаемость: код разбит на понятные функции (markCards, normalizeButtonsInCard, initObserver и т. п.) с константами наверху — это упрощает поддержку и внесение правок в будущем.
В результате сетка каталога стала предсказуемой: кнопки всегда на одной линии, ширина одинаковая, контролы количества появляются корректно, а риск конфликтов с обновлениями Tilda снижен.
Комментарий разработчика:
Новая версия делает выравнивание кнопок и контролов количества более надёжным: ширина задаётся через CSS, вертикальное прижатие — через margin-top: auto, а появление карточек отслеживается через MutationObserver. Таймер оставлен только как редкая страховка. Логика контролов количества аккуратно встроена в нативную функцию Tilda. Код структурирован на отдельные функции, константы вынесены наверх — это упрощает поддержку и снижает риск конфликтов при будущих обновлениях платформы.
Made on
Tilda