Vue.js cart for 1C-Bitrix with optimistic updates

Vue.js cart for 1C-Bitrix with optimistic updates

The standard Bitrix cart component sale.basket.basket performs a full page reload every time a product quantity is changed or removed. On mobile devices, this results in a laggy experience—the screen flickers, context is lost, and conversion drops by 20–30%. We encountered this in an electronics e-commerce project with a catalog of 50,000 products; after implementing a Vue cart with optimistic updates, cart abandonment halved.

A Vue cart with Pinia store and optimistic updates solves this: all changes appear instantly, while server synchronization runs asynchronously in the background. The user immediately sees the updated total and quantity without waiting for the server response. If a request fails, changes are automatically rolled back. This provides responsiveness comparable to SPA-class applications.

Why replace the standard cart with Vue.js?

Key reasons—response speed and minimal data load. The standard component re-renders the entire cart block, including header and footer, on every action. A Vue cart updates only the changed element using a virtual DOM. In tests on a catalog of 10,000 products, the response time for adding a product dropped from 1.2 seconds to 200 milliseconds—six times faster. Additionally, server load decreases: instead of a full cart reload, only one AJAX request with the changed field is sent.

How to integrate Vue cart with Bitrix?

For frontend-backend data synchronization, we use the sale module. Main methods:

// Add product $basket = \Bitrix\Sale\Basket::create(SITE_ID); $item = $basket->createItem('catalog', $productId); $item->setFields(['QUANTITY' => 1, 'CURRENCY' => 'RUB']); $basket->save(); // AJAX endpoints POST /basket/add { productId, quantity, properties } POST /basket/update { itemId, quantity } POST /basket/remove { itemId } GET /basket — get current cart state 

REST API is also available for cloud projects: sale.basketitem.add, sale.basketitem.update, sale.basketitem.delete. We use these methods in combination with OAuth authorization, which is especially convenient for mobile apps and headless implementations.

Architecture of Vue cart components

The component structure is organized so each module handles its part of the UX:

CartApp.vue — root component, initializes Pinia store ├── CartDrawer.vue — side panel (slide-over) with product list ├── CartIcon.vue — header cart icon with instant counter ├── CartItem.vue — product row: photo, name, quantity, price, remove ├── CartSummary.vue — total amount, promo code, checkout button └── EmptyCart.vue — placeholder with invitation to continue shopping 

Using Pinia store ensures the cart state is stored in one place and accessible from any component without props:

export const useCartStore = defineStore('cart', { state: () => ({ items: [], totalPrice: 0, discounts: [], isLoading: false, }), getters: { itemCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0), }, actions: { async addItem(productId, quantity = 1) { // optimistic update this.items.push({ productId, quantity, pending: true }); try { const result = await cartApi.add(productId, quantity); this.syncFromServer(result.basket); } catch { this.items = this.items.filter(i => !i.pending); } } } }); 

How to synchronize cart between tabs?

A common issue: a user opens the store in two tabs, adds a product in one—the cart in the other becomes outdated. We solve this using the BroadcastChannel API:

const channel = new BroadcastChannel('cart-sync'); channel.onmessage = (e) => { if (e.data.type === 'CART_UPDATED') cartStore.fetchCart(); }; // On every cart change: channel.postMessage({ type: 'CART_UPDATED' }); 

This mechanism is supported by all modern browsers and requires no additional libraries. An alternative approach uses localStorage with the storage event, but BroadcastChannel is more reliable and faster.

Case study: electronics store with 50,000 products

The client complained about low conversion on mobile: 40% of users abandoned the cart after adding the first product because of delays. The standard Bitrix component reloaded the header cart block on each add, causing a visible 1–2 second lag on an average smartphone. We implemented a Vue cart with CartIcon (counter updates instantly via Pinia) and CartDrawer (slide-over without reload). After deployment:

• Response time when adding a product decreased from 1.2 s to 180 ms (6.7 times faster).
• Cart abandonment dropped by 52%.
• Checkout conversion increased by 18%.

The code was covered with unit tests using Vitest, allowing quick changes without risk of breaking existing logic.

What is included in the work?

1. Analysis of the current cart implementation and identification of bottlenecks.
2. Design of Vue component architecture and Pinia store.
3. Development of API endpoints on the Bitrix side (PHP).
4. Frontend-backend integration via AJAX or REST.
5. Writing unit and integration tests.
6. Documentation for use and component configuration.
7. Training the team for support and modifications.

Timelines

Pricing is individual after analyzing your project. Get a consultation—contact us to discuss details and timelines. We provide a warranty on all work and offer post-launch support.

Why trust development to certified specialists?

Our team includes certified Bitrix developers with 8+ years of experience. We have completed dozens of projects integrating Vue.js into the 1C-Bitrix ecosystem. Each implementation goes through a full testing cycle and code review. We use proven patterns: Vue.js, Pinia, tagged caching, unit testing. We guarantee the cart will work stably even under high load. Order development now and get a modern cart that will boost your store's conversion.