Важно:
-
Резервное копирование: Перед любыми изменениями обязательно сделайте полный бэкап сайта и базы данных.
-
Путь к шаблонам: Все кастомизации компонентов лучше делать, копируя их шаблоны в ваш собственный шаблон сайта (например,
/local/templates/ваш_шаблон_сайта/components/bitrix/sale.order.ajax/ваш_шаблон/или для компонентов Аспро/local/templates/ваш_шаблон_сайта/components/aspro/form.order/ваш_шаблон/). Не редактируйте системные шаблоны напрямую. -
Аспро: Решения Аспро часто используют свои обертки над стандартными компонентами или сильно кастомизированные шаблоны. Поэтому нужно будет найти именно тот шаблон, который используется на вашем сайте. Используйте режим правки и смотрите параметры компонента, чтобы узнать его имя и текущий шаблон.
Шаг 1: Настройка в административной части Битрикса
Это основа, без которой кастомизация шаблонов может не дать нужного эффекта или привести к ошибкам.
-
Способы доставки:
-
Перейдите в
Магазин > Настройки > Службы доставки. -
Деактивируйте все существующие службы доставки.
-
Создайте одну фиктивную службу доставки, например, “Самовывоз” или “Без доставки”. Установите для нее нулевую стоимость. Сделайте ее единственной активной.
-
Убедитесь, что эта служба доставки не требует указания адреса (в ее настройках).
-
Платежные системы:
-
Перейдите в
Магазин > Настройки > Платежные системы. -
Деактивируйте все существующие платежные системы.
-
Создайте одну фиктивную платежную систему, например, “Оплата при получении” или “Согласование с менеджером”. Сделайте ее единственной активной.
-
Свойства заказа:
-
Перейдите в
Магазин > Настройки > Свойства заказа > Список свойств. -
Найдите свойства, отвечающие за адрес (например,
LOCATION(Местоположение),ADDRESS(Адрес доставки),ZIP(Индекс) и т.д.). -
Для каждого из этих свойств:
-
Снимите галочку “Обязательное”.
-
Можно также снять галочку “Используется в профилях”, если не планируете сохранять адреса.
-
Убедитесь, что они не привязаны к единственной активной службе доставки как обязательные.
-
Обязательные поля: Убедитесь, что ФИО, Телефон, Email остаются обязательными для идентификации клиента и связи с ним.
Шаг 2: Кастомизация шаблона компонента корзины
Компонент корзины в Аспро Лайтшоп обычно aspro:basket.lite или стандартный bitrix:sale.basket.basket.
-
Найдите шаблон: Включите режим правки на странице корзины, наведите на область корзины, нажмите “шестеренку” и выберите “Редактировать шаблон компонента”. Скопируйте его в свой шаблон сайта.
-
Упрощение:
-
В файле
template.php(илиbasket_items.php, в зависимости от структуры шаблона) найдите и удалите или закомментируйте блоки, которые не нужны (например, поле для ввода купона, если оно не используется). -
Основная цель здесь – оставить только список товаров, возможность изменить количество, и кнопку “Оформить заказ”.
Шаг 3: Кастомизация шаблона компонента оформления заказа
Это самый важный шаг. Компонент обычно bitrix:sale.order.ajax, но Аспро может использовать свою обертку (например, aspro:form.order или aspro:oneclickbuy для покупки в 1 клик, если вы ее используете, но для полноценного заказа это sale.order.ajax).
-
Найдите и скопируйте шаблон: Аналогично шагу 2, найдите и скопируйте шаблон компонента оформления заказа в свой шаблон сайта. У Аспро он может называться
v2,new,aspro_corpи т.д. -
Редактирование
template.php(и связанных файловprops.php,paysystem.php,delivery.phpи т.д., если они есть): -
Скрытие выбора доставки:
-
Найдите блок, отвечающий за вывод списка служб доставки. Обычно это цикл по
$arResult["DELIVERY"]. Этот блок нужно либо полностью закомментировать (<!-- ... -->для HTML,/* ... */или//для PHP), либо скрыть через CSS (display: none;). -
Так как у нас только одна активная служба доставки, система должна автоматически ее подставить.
-
Скрытие выбора оплаты:
-
Аналогично найдите блок, отвечающий за вывод платежных систем (обычно цикл по
$arResult["PAY_SYSTEM"]). Закомментируйте или скройте его. -
Система должна автоматически подставить единственную активную платежную систему.
-
Скрытие полей адреса:
-
Найдите блок, где выводятся свойства заказа (часто это файл
props.phpилиprops_format.php, подключаемый вtemplate.php). -
В цикле вывода свойств
$arResult["ORDER_PROP"]["USER_PROPS_Y"](илиUSER_PROPS_N) добавьте условие, чтобы не выводить поля адреса. Например, по их коду (CODE):php Скопировать
Закрыть блок
<?foreach ($arResult["ORDER_PROP"]["USER_PROPS_Y"] as $arProp) {
// Пропускаем ненужные свойства
if (in_array($arProp["CODE"], ["LOCATION", "ADDRESS", "ZIP", "F_ADDRESS", /* другие коды адреса */])) {
continue;
}
// Дальше идет код вывода свойства
?>
<?= $arProp["NAME"] ?>
<? if ($arProp["TYPE"] == "TEXT"): ?>
" value="<?= $arProp["VALUE"] ?>">
<? endif; ?>
<?/* ... другие типы полей ... */?>
<?
}?>
-
Вам нужно будет определить точные
CODEсвойств, которые отвечают за адрес в вашей системе. -
Убедитесь, что поля ФИО, Email, Телефон выводятся и остаются обязательными.
-
Скрытие блока с местоположением (если используется стандартный выбор):
-
Часто есть отдельный блок для выбора местоположения (компонент
sale.location.selector.searchилиsale.ajax.locations). Его тоже нужно найти и скрыть/закомментировать. -
Удаление лишних шагов (если шаблон многошаговый):
-
Если шаблон оформления заказа разбит на шаги (регион, доставка, оплата, покупатель), вам нужно будет “слить” все в один шаг, оставив только нужные поля (ФИО, Телефон, Email) и итоговую информацию о заказе. Это более сложная переделка структуры
template.php. -
CSS для скрытия: Если какие-то элементы сложно удалить из PHP-логики, можно использовать CSS. В файле
style.css(илиtemplate_styles.css) вашего скопированного шаблона компонента или в основном файле стилей сайта добавьте правила:
css Скопировать
Закрыть блок
/* Примерные селекторы, их нужно будет уточнить для вашего шаблона Аспро */
.bx-soa-section-location, /* Блок местоположения */
.bx-soa-delivery, /* Блок доставки */
.bx-soa-paysystem, /* Блок оплаты */
.bx-soa-pp-field-container[data-property-id="ID_СВОЙСТВА_АДРЕСА"], /* Конкретное поле адреса */
#bx-soa-orderSave button[data-save-button="true"] /* Возможно, нужно будет перестилизовать кнопку */
{
display: none !important; /* !important может понадобиться для перекрытия стилей Аспро */
}
/* Если есть табы/шаги, их тоже скрыть, оставив активным нужный */
.bx-soa-nav-item[data-id="delivery"],
.bx-soa-nav-item[data-id="payment"] {
display: none !important;
}
Используйте инструменты разработчика в браузере (F12), чтобы найти правильные CSS-селекторы для скрываемых блоков.
Шаг 4: Тестирование
-
Проверьте весь процесс: добавление товара в корзину, переход к оформлению, заполнение минимальных данных (ФИО, телефон, email), отправка заказа.
-
Убедитесь, что заказ корректно создается в административной части (
Магазин > Заказы) с единственной фиктивной службой доставки и оплаты. -
Проверьте, что не возникает ошибок JavaScript.
Возможные проблемы и нюансы с Аспро:
-
Сложная структура шаблонов: Шаблоны Аспро могут быть очень объемными и включать множество файлов. Придется внимательно разбираться.
-
JavaScript: Аспро активно использует JS для динамики на странице оформления. Простое удаление HTML-блоков может нарушить работу JS. Возможно, придется также править JS-файлы или аккуратно скрывать блоки через CSS, чтобы JS не “спотыкался”.
-
Обновления решения: При обновлении решения Аспро ваши кастомизации в системных папках могут быть затерты. Поэтому всегда копируйте шаблоны в
/local/templates/. -
Настройки Аспро: Проверьте настройки самого решения Аспро (обычно в
Административная панель -> Аспро -> Аспро: Лайтшоп -> Настройки -> ...). Иногда там могут быть опции, позволяющие упростить оформление без глубокого копания в коде (например, отключить выбор местоположения или упрощенный режим заказа).
Альтернатива (более простая, но менее гибкая): Покупка в 1 клик
Если вам нужна совсем минимальная форма (например, только имя и телефон), то в Аспро обычно есть функционал “Покупка в 1 клик”. Он уже значительно проще. Вы можете попробовать настроить его и использовать как основной способ оформления, если это подходит под ваши задачи. Но это будет не полноценная корзина, а заказ каждого товара отдельно или всей корзины через упрощенную форму.
Начните с настроек в админке и затем аккуратно переходите к кастомизации шаблонов. Если что-то пойдет не так, вы всегда сможете откатиться к резервной копии или удалить кастомный шаблон, чтобы вернулся стандартный.
Перенести поле “Местоположение” из блока “Покупатель” в блок “Способ доставки” на странице оформления заказа в “Аспро: Лайтшоп” (использующем стандартный компонент bitrix:sale.order.ajax или его кастомизированную версию) потребует кастомизации шаблона компонента.
Важно:
-
Резервное копирование: Перед любыми изменениями обязательно сделайте полный бэкап сайта и базы данных.
-
Не редактируйте системные шаблоны: Скопируйте шаблон компонента в ваш собственный шаблон сайта и работайте с копией.
-
Путь к системным шаблонам:
/bitrix/components/bitrix/sale.order.ajax/templates/ -
Путь к шаблонам Аспро может быть:
/bitrix/templates/aspro_lite/components/bitrix/sale.order.ajax/или/local/templates/aspro_lite/components/bitrix/sale.order.ajax/(если они уже кастомизировали его). -
Ваш кастомный путь:
/local/templates/ваш_шаблон_сайта/components/bitrix/sale.order.ajax/ваш_название_шаблона/
Шаги по переносу:
Шаг 1: Определить и скопировать текущий шаблон компонента
-
Перейдите на страницу оформления заказа на вашем сайте.
-
Включите режим правки Битрикса.
-
Наведите на область оформления заказа, найдите “шестеренку” компонента (обычно это “Комплексный компонент: bitrix:sale.order.ajax” или аналогичное название от Аспро).
-
В параметрах компонента посмотрите, какой шаблон используется (например,
aspro_lite_v2,bootstrap_v4,mainили что-то кастомное). -
Скопируйте папку этого шаблона из его текущего расположения (см. пути выше) в
/local/templates/ваш_шаблон_сайта/components/bitrix/sale.order.ajax/. Если вы хотите создать новый шаблон на основе существующего, дайте папке новое уникальное имя (например,custom_order). -
После копирования выберите этот новый (скопированный) шаблон в настройках компонента на странице оформления заказа.
Шаг 2: Анализ и редактирование файла template.php (и связанных файлов)
Откройте файл template.php в скопированном вами шаблоне. В современных шаблонах sale.order.ajax (особенно у Аспро) логика может быть разбита на несколько подключаемых файлов для каждого блока (например, props_format.php для свойств, delivery.php для доставки, person_type.php для типов плательщика и т.д.).
Вам нужно найти:
-
Код вывода блока “Покупатель” (или “Данные покупателя”):
-
Ищите HTML-разметку, которая оборачивает этот блок. У Аспро это могут быть
divс классами типаbx-soa-section,order-block,props_blockили что-то похожее. -
Внутри этого блока найдите код, отвечающий за вывод свойства “Местоположение”. Это может быть:
-
Явный вызов другого компонента, например,
sale.location.selector.searchилиsale.ajax.locations. -
Цикл по свойствам заказа (
$arResult["ORDER_PROP"]["USER_PROPS_Y"]или подобный), где есть проверка на тип свойстваLOCATIONили на его код (например,LOCATION,SALE_ORDER_LOCATION). -
Подключение отдельного файла, например
location.phpили частиprops.php/props_format.php.
Пример (очень упрощенный, реальный код будет сложнее):
php Скопировать
Закрыть блок
// Внутри блока "Покупатель"
<? foreach ($arResult["ORDER_PROP"]["USER_PROPS_Y"] as $arProp) {
if ($arProp["TYPE"] == "LOCATION") {
// Здесь код вывода поля местоположения
// printLocationProperty($arProp, $arParams); // Может быть вызов функции
// или прямой HTML и вызов компонента
$APPLICATION->IncludeComponent(
"bitrix:sale.ajax.locations",
"ваш_шаблон_локаций", // или .default
array(
// параметры компонента локаций
),
null,
array('HIDE_ICONS' => 'Y')
);
}
// ... другие свойства ...
} ?>
-
Код вывода блока “Способ доставки”:
-
Аналогично, найдите HTML-разметку этого блока (например,
divс классамиbx-soa-delivery,order-delivery-blockи т.п.). -
Обычно этот блок содержит цикл по
$arResult["DELIVERY"]или вызов файлаdelivery.php.
Шаг 3: Перемещение кода
-
Вырежьте код, отвечающий за вывод поля “Местоположение”, из его текущего места в блоке “Покупатель”. Будьте аккуратны, чтобы вырезать весь необходимый HTML и PHP-код, включая открывающие и закрывающие теги.
-
Вставьте этот вырезанный код в начало (или другое подходящее место) блока “Способ доставки”.
Примерная логика:
html Скопировать
Закрыть блок
<!-- Блок "Способ доставки" -->
<!-- Примерный класс -->
... Заголовок блока ...
<!-- ==== СЮДА ВСТАВЛЯЕМ КОД МЕСТОПОЛОЖЕНИЯ ==== -->
<?
// Код вывода местоположения, который вы вырезали
// Например:
// $property = ... найти свойство местоположения из $arResult["ORDER_PROP"]["USER_PROPS_Y"] ...
// if ($property) {
// printLocationProperty($property, $arParams); // Если используется функция
// }
// Или если это был компонент:
/*
$APPLICATION->IncludeComponent(
"bitrix:sale.ajax.locations",
".default", // Укажите правильный шаблон
array(
"AJAX_CALL" => "N",
"COUNTRY_INPUT_NAME" => "COUNTRY_tmp",
"REGION_INPUT_NAME" => "REGION_tmp",
"CITY_INPUT_NAME" => $locationProperty["FIELD_NAME"], // Важно! Имя поля должно соответствовать свойству
"CITY_OUT_LOCATION" => "Y",
"LOCATION_VALUE" => $locationProperty["VALUE"], // Текущее значение
"ORDER_PROPS_ID" => $locationProperty["ID"],
"ONCITYCHANGE" => ($locationProperty["IS_LOCATION"] == "Y" || $locationProperty["IS_LOCATION4TAX"] == "Y") ? "submitForm()" : "",
"SIZE1" => $locationProperty["SIZE1"],
),
null,
array('HIDE_ICONS' => 'Y')
);
*/
?>
<!-- ==== КОНЕЦ ВСТАВКИ КОДА МЕСТОПОЛОЖЕНИЯ ==== -->
<!-- Дальше идет оригинальный код блока доставки -->
<? if (!empty($arResult["DELIVERY"])) {
// ... код вывода служб доставки ...
} ?>
Важно по коду местоположения:
-
Компонент
sale.order.ajaxожидает, что поле местоположения будет иметь определенное имя (input name), чтобы правильно обрабатывать его значение. Обычно это имя берется из$arProp["FIELD_NAME"]для свойства типаLOCATION. Убедитесь, что это имя сохраняется. -
Также важен параметр
ONCITYCHANGE(или аналогичный), который вызывает JavaScript-функциюsubmitForm()илиBX.Sale.OrderAjaxComponent.sendRequest()для обновления данных на странице (включая пересчет стоимости доставки) после смены местоположения.
Шаг 4: Корректировка CSS
После перемещения HTML-блока его внешний вид может измениться, так как он окажется в другом контексте стилей. Откройте файл style.css (или template_styles.css) вашего скопированного шаблона компонента. Используйте инструменты разработчика в браузере (F12), чтобы инспектировать перемещенный блок “Местоположение” и его новые родительские элементы. Добавьте или измените CSS-правила, чтобы поле “Местоположение” выглядело корректно в новом блоке “Способ доставки”. Возможно, потребуется переопределить некоторые отступы, ширину или другие свойства.
Шаг 5: Тестирование JavaScript и логики
Это самый важный этап после правок:
-
Обновление служб доставки: Проверьте, что после выбора или изменения местоположения корректно обновляется список доступных служб доставки и их стоимость. Если этого не происходит, значит, нарушена JS-логика.
-
Убедитесь, что событие
onchange(или аналогичное) на поле местоположения вызывает нужную JS-функцию для обновления (submitForm()илиBX.Sale.OrderAjaxComponent.sendRequest()). -
Проверьте консоль браузера на наличие ошибок JavaScript.
-
Передача данных: Убедитесь, что выбранное местоположение правильно сохраняется при оформлении заказа.
-
Общий вид и адаптивность: Проверьте, как выглядит страница на разных разрешениях экрана.
Если возникли проблемы с JS:
-
Шаблоны Аспро могут иметь свою кастомную JS-логику поверх стандартной. Вам может потребоваться изучить файл
script.jsшаблона компонента, чтобы понять, как он обрабатывает изменения в полях и как инициализирует компоненты (например, компонент выбора местоположения). -
Возможно, JS-код ожидает, что поле местоположения будет находиться в определенном родительском элементе с определенным ID или классом. Если это так, простое HTML-перемещение может это нарушить.
Альтернативный (более сложный) подход, если простое перемещение HTML ломает JS:
Иногда проще не перемещать физически HTML-код, а с помощью JavaScript “перерисовать” или переместить DOM-элемент уже после загрузки страницы. Это потребует более глубоких знаний JS.
Итог:
Начните с аккуратного копирования шаблона и простого перемещения HTML-кода, отвечающего за вывод местоположения. Затем тщательно тестируйте и исправляйте CSS и, при необходимости, JS. Если шаблон сильно кастомизирован Аспро и активно использует JS для рендеринга блоков, задача может оказаться значительно сложнее и потребовать отладки JS-кода.
Ищете надежного партнера по веб-разработке и автоматизации? Мы помогаем бизнесу расти с помощью современных технологий, автоматизации процессов и экспертного SEO. Свяжитесь с нами, чтобы обсудить вашу задачу.