Разработка

Корзина и заказ без никто \ простая корзина в Аспро

Корзина и заказ без никто \ простая корзина в Аспро

Важно:

  • Резервное копирование: Перед любыми изменениями обязательно сделайте полный бэкап сайта и базы данных.

  • Путь к шаблонам: Все кастомизации компонентов лучше делать, копируя их шаблоны в ваш собственный шаблон сайта (например, /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. Свяжитесь с нами, чтобы обсудить вашу задачу.

🚀 Нужна помощь с сайтом на 1С-Битрикс или Аспро?

Я работаю удалённо по всей России и СНГ. Узнайте цены и условия для вашего города:

Все регионы →