Стандартный компонент sale.order.ajax в Bitrix CMS использует пошаговое оформление заказа, где пользователь последовательно заполняет информацию. Однако иногда требуется отобразить все поля сразу — например, для удобства редактирования или адаптации под мобильные устройства.
В этой статье разберём, как:
✔ Раскрыть все блоки (доставка, оплата, пользовательские данные)
✔ Убрать лишние кнопки ("Далее", "Назад", "Изменить")
✔ Оптимизировать UX (адаптация, валидация, анимации)
1. Основные изменения в order_ajax.js
1.1. Разрешаем редактирование всех блоков
В файле order_ajax.js найдите код, отвечающий за скрытие блоков, и закомментируйте его:
/*
if (this.activeSectionId !== this.regionBlockNode.id)
this.editFadeRegionContent(this.regionBlockNode.querySelector('.bx-soa-section-content'));
if (this.activeSectionId != this.propsBlockNode.id)
this.editFadePropsContent(this.propsBlockNode.querySelector('.bx-soa-section-content'));
*/Что это даёт?
-
Поля "Регион" и "Пользователь" будут доступны для редактирования сразу.
1.2. Убираем кнопки "Далее" и "Назад"
Найдите блок с кнопками навигации и закомментируйте его:
/*
node.appendChild(
BX.create('DIV', {
props: {className: 'row bx-soa-more'},
children: [
BX.create('DIV', {
props: {className: 'bx-soa-more-btn col-xs-12'},
children: buttons
})
]
})
);
*/Зачем это нужно?
-
Упрощает интерфейс, если шаги не требуются.
1.3. Принудительно раскрываем все секции
Замените условие проверки активности секции:
// Было:
var active = section.id == this.activeSectionId;
// Стало:
var active = true; Результат:
-
Все блоки (доставка, оплата, свойства) будут развёрнуты сразу.
1.4. Отключаем клики по заголовкам
Удалите обработчики событий для заголовков:
/*
BX.unbindAll(titleNode);
if (this.result.SHOW_AUTH) {
BX.bind(titleNode, 'click', BX.delegate(function(){
this.animateScrollTo(this.authBlockNode);
this.addAnimationEffect(this.authBlockNode, 'bx-step-good');
}, this));
} else {
BX.bind(titleNode, 'click', BX.proxy(this.showByClick, this));
editButton = titleNode.querySelector('.bx-soa-editstep');
editButton && BX.bind(editButton, 'click', BX.proxy(this.showByClick, this));
}
*/Почему это важно?
-
Пользователь не сможет случайно свернуть блоки.
1.5. Удаляем кнопки "Изменить"
Добавьте в конец функции editOrder:
var editSteps = this.orderBlockNode.querySelectorAll('.bx-soa-editstep'), i;
for (i in editSteps) {
if (editSteps.hasOwnProperty(i)) {
BX.remove(editSteps[i]);
}
} Эффект:
-
Чистый интерфейс без лишних элементов.
2. Дополнительные улучшения
2.1. Адаптивный дизайн
Добавьте в CSS:
@media (max-width: 768px) {
.bx-soa-section {
margin-bottom: 15px;
padding: 10px;
}
} Зачем?
-
Лучшее отображение на мобильных устройствах.
2.2. Плавное раскрытие блоков
Добавьте анимацию:
BX.animate({
node: sectionNode,
duration: 500,
start: { height: 0 },
finish: { height: sectionNode.scrollHeight }
}); Польза:
-
Более плавный UX.
2.3. Валидация формы
Проверяем поля перед отправкой:
BX.addCustomEvent('onAjaxSuccess', function() {
if (!validateForm()) {
BX.onCustomEvent('onAjaxFailure');
}
}); Важно:
-
Предотвращает отправку неверных данных.
3. Альтернативные методы
3.1. Через CSS
Можно просто принудительно показать блоки:
.bx-soa-section-content {
display: block !important;
height: auto !important;
opacity: 1 !important;
} 3.2. Через события Bitrix
BX.addCustomEvent('onBeforeOrderAjaxInitialize', function(ajax) {
ajax.params.INITIALIZE = 'Y';
}); Заключение
Теперь у вас есть:
- Полностью раскрытые блоки оформления заказа
- Упрощённый интерфейс без лишних кнопок
- Адаптивный и плавный UX
Рекомендация: Перед внедрением протестируйте изменения на тестовой версии сайта.
Документация Bitrix:
Готово! Ваша форма заказа теперь удобнее для пользователей.
