RU EN

Basket and Checkout on One Page in 1C-Bitrix

7 min read
The standard 1C-Bitrix ordering flow usually separates the basket from checkout. Users manage their basket first, then go to a separate form to choose delivery and payment options and enter their contact details.

For some projects, it is more convenient to put everything on one page: products, quantities, coupons, delivery, payment and contact details.

Avoid modifying Bitrix core files so that system updates do not overwrite your changes.

This article uses standard 1C-Bitrix components with their templates overridden inside the website template.

What Needs to Be Done

The goal is a single checkout page where:

  • The basket is displayed;
  • Product quantities can be changed;
  • Products can be removed;
  • Coupons work;
  • Checkout is visible immediately;
  • The product list is not duplicated;
  • The gifts block is not displayed;
  • All checkout sections are expanded from the start;
  • Standard components do not need to be modified in /bitrix/components/.

Place the Basket and Checkout on the Same Page

For example, on the page:


/personal/cart/
Add two standard components:

  • bitrix:sale.basket.basket — the basket;
  • bitrix:sale.order.ajax — checkout.
Use a separate basket template, for example:


basket
For checkout:


order
The basket component handles:

  • The product list;
  • Quantity changes;
  • Removing items;
  • Coupons.
The checkout component handles:

  • Customer details;
  • Location;
  • Delivery;
  • Payment;
  • The order total;
  • Order creation.

The BASKET_WITH_ORDER_INTEGRATION Parameter

The following parameter allows the basket and checkout to work together:


BASKET_WITH_ORDER_INTEGRATION
With the value:


Y
The basket template recognises that the checkout component is present on the same page.

In this mode, the basket does not need to show its own totals block and checkout button. That part of the interface is handled by sale.order.ajax.

You can pass the parameter directly in the component call:


"BASKET_WITH_ORDER_INTEGRATION" => "Y",
However, if the parameter is absent from the component template's visual settings, it is easy to lose it when editing the page through the admin panel later.

It is therefore more convenient to add it to the basket template settings.

Add BASKET_WITH_ORDER_INTEGRATION to .parameters.php

The file is located in the website template:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/.parameters.php
Add the parameter:


$arTemplateParameters["BASKET_WITH_ORDER_INTEGRATION"] = [
    "PARENT" => "BASE",
    "NAME" => GetMessage("SBB_PARAM_BASKET_WITH_ORDER_INTEGRATION"),
    "TYPE" => "CHECKBOX",
    "DEFAULT" => "Y",
    "REFRESH" => "N",
];
You can now control this option through the component settings.

Add a language message for the parameter label in:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/lang/ru/.parameters.php
For example:


$MESS["SBB_PARAM_BASKET_WITH_ORDER_INTEGRATION"] =
    "Интеграция корзины с оформлением заказа";
The standard Bitrix component itself remains unchanged.

All modifications are confined to the website template.

Remove the Gifts Block from the Basket

If your online store does not use gifts, the standard basket template contains unnecessary functionality.

Remove the related code from your own basket template:


USE_GIFTS
In particular, you can remove:

  • Gift parameter initialisation;
  • Rendering of the component bitrix:sale.products.gift.basket;
  • Gift blocks in the TOP and BOTTOM positions;
  • Unused language messages;
  • CSS used only by gifts.
This makes the template noticeably smaller and stops unused CSS from loading on the page.

Remove the Duplicate Product List from sale.order.ajax

Putting the basket and checkout on one page creates another issue.

The component sale.basket.basket already displays the products, while sale.order.ajax also renders its own order item list by default.

The user therefore sees the products twice.

Remove the duplicate basket block from your own checkout template.

Remove the blocks in template.php responsible for rendering:


BASKET ITEMS BLOCK
And the logic for the parameter:


BASKET_POSITION
You can also remove parameters that are no longer used:

  • BASKET_POSITION;
  • SHOW_BASKET_HEADERS;
  • PRODUCT_COLUMNS_HIDDEN;
  • Other unused product list display parameters.
Then remove CSS for the product table, SKU blocks and other elements that no longer appear in the template.

Keep bx-soa-basket

The basket container must not be removed entirely from the sale.order.ajax template.

The standard checkout JavaScript expects the following element to exist:


#bx-soa-basket
If it is deleted completely, order_ajax.js may access a missing DOM element and cause an error.

You can remove the product rendering, but must retain a compatible hidden container.

This preserves the component's standard JavaScript behaviour without duplicating the product list.

Expand All Checkout Sections Immediately

By default, the component sale.order.ajax behaves as a step-by-step form.

The user proceeds through:

  1. Location.
  2. Delivery.
  3. Payment.
  4. Contact details.
  5. Order confirmation.
‘Back’, ‘Next’ and edit links are used to move between steps.

If checkout should appear entirely on one page, modify this behaviour in your own copy of:


order_ajax.js

Which order_ajax.js Functions Need Changing?

This implementation changes four functions.

  • editSection — the section is always treated as active;
  • changeVisibleContent — all sections remain expanded;
  • changeVisibleSection — section contents are always visible;
  • getBlockFooter — ‘Back’ and ‘Next’ buttons are not displayed.
The ‘Edit’ links are also hidden, while the main place-order button remains available on the page.

The form then behaves as a single long checkout form rather than a step-by-step wizard.

Skip this stage if you want to keep the standard step-by-step behaviour.

Remove Unnecessary Styles

After removing HTML blocks, some of the standard CSS is no longer needed.

You can remove styles used exclusively by:

  • Gifts;
  • The duplicate product table;
  • SKU blocks within checkout;
  • Step navigation buttons;
  • Step editing links;
  • Step transition animations.
This is optional for functionality, but keeps the template cleaner and reduces potential style conflicts.

Changed File Structure

All modifications are inside the website template.

Example structure:

File Changes
sale.basket.basket/basket/.parameters.php Added BASKET_WITH_ORDER_INTEGRATION
sale.basket.basket/basket/lang/ru/.parameters.php Added the parameter's language message
sale.basket.basket/basket/template.php Removed the gifts block and configured checkout integration
sale.basket.basket/basket/lang/ru/template.php Removed unused gift language messages
sale.basket.basket/basket/lang/en/template.php Removed unused gift language messages
sale.basket.basket/basket/style.css Removed gift block styles
sale.order.ajax/order/template.php Removed the duplicate product list while retaining the container for JavaScript compatibility
sale.order.ajax/order/.parameters.php Removed parameters related to duplicate basket rendering
sale.order.ajax/order/order_ajax.js Expanded all checkout sections simultaneously
sale.order.ajax/order/style.css Removed unused product and step navigation styles
personal/cart/index.php Placed both components on the page and removed redundant parameters

Where the Templates Should Be Located

All component template files should be inside your own website template:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/
For example:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/
/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.order.ajax/order/
Files in:


/bitrix/components/
do not need to be changed.

This is the standard mechanism for overriding component templates in 1C-Bitrix.

Why You Should Avoid Modifying the Core

Changes made directly to a standard component, for example in:


/bitrix/components/bitrix/sale.order.ajax/
Or:


/bitrix/components/bitrix/sale.basket.basket/
may be overwritten during a product update.

Using your own template in /local/ allows the Bitrix core to be updated while keeping your templates separate.

Implementation Principles

The solution follows these principles:

  • Standard Bitrix components remain unchanged;
  • All modifications are located in /local/templates/;
  • The basket and checkout work on one page;
  • Integration uses BASKET_WITH_ORDER_INTEGRATION;
  • The duplicate product list is removed;
  • Compatibility is maintained by keeping the container #bx-soa-basket;
  • Unused gifts and styles are removed;
  • All checkout sections can be expanded immediately if needed.

Implementation Order

If you implement this yourself, the sequence can be:

  1. Copy the sale.basket.basket template into the website template.
  2. Copy the sale.order.ajax template into the website template.
  3. Place both components on the basket page.
  4. Enable BASKET_WITH_ORDER_INTEGRATION.
  5. Add the parameter to the basket template's .parameters.php.
  6. Remove the unused gifts block.
  7. Remove the duplicate product list from sale.order.ajax.
  8. Keep #bx-soa-basket for JavaScript compatibility.
  9. If required, modify order_ajax.js to expand all sections.
  10. Remove unused CSS.
  11. Test the basket, coupons, delivery, payment and order creation.

What to Test After the Changes

Test the complete checkout flow:

  • Changing product quantities;
  • Removing a product;
  • Recalculating the subtotal;
  • Applying coupons;
  • Selecting a location;
  • Recalculating delivery costs;
  • Changing the delivery service;
  • Selecting a payment system;
  • Required order properties;
  • Recalculating the final total;
  • Creating an order;
  • Page behaviour after AJAX redraws.
Check JavaScript carefully after removing standard HTML blocks. The component sale.order.ajax contains extensive client-side logic that may access template elements by ID or class.

Make a Backup Before Installation

If the basket or checkout templates have already been customised, do not simply replace them with ready-made files.

Compare the changes first and transfer the required sections manually.

Before starting, back up the current templates:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/
/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.order.ajax/

Summary

The basket and checkout can be combined on one page in 1C-Bitrix without modifying the core.

Use the standard components:

  • bitrix:sale.basket.basket;
  • bitrix:sale.order.ajax.
And make the necessary changes in copies of their templates within the website template.


The parameter BASKET_WITH_ORDER_INTEGRATION connects the basket to checkout. Template changes remove duplicate elements and, if needed, turn step-by-step checkout into a single form.


Users then have one page where they can review their basket and place an order immediately, while the standard 1C-Bitrix files remain untouched.
Back to blog