Dynamic Pricing Tables with Vue.js for Bitrix

Overview

A price list on Bitrix seems straightforward—use bitrix:catalog.section with a table template. Problems arise immediately when static output adds requirements: row filtering without reload, column sorting, switching price types (retail/wholesale/dealer), calculating total sum when selecting items. Server-side rendering and jQuery post-processing scale poorly—each new interactive element requires a separate handler and manual DOM synchronization. Imagine: a distributor with 4,000 items, managers open the page—wait 8 seconds, then can't find the needed article. This is a typical pain that our component solves. With over 50 implementations and 4+ years of experience, we guarantee fast and stable results. Our clients typically save 20+ hours per week (equivalent to $2,000 per month) and see a 75% reduction in page load time.

We offer a Vue component that loads data with one request and performs all filtering, sorting, and price switching logic on the client without page reload. For data generation we use \Bitrix\Catalog\PriceTable::getList with filter by price group and product IDs. Data is passed to Vue via the global object window.BX_STATE, eliminating duplicate requests. Development cost is calculated individually, but managers typically save 20+ hours per week, paying off the investment in the first months. Basic table development starts at $2,000, a full solution with filtering, price type switching, virtualization, and export is typically $4,500. Over 95% of clients report immediate performance improvements.

Core Features

Architecture of the Price Table

The Vue component PriceTable receives an array of items from Bitrix via window.BX_STATE.products. Data is formed in result_modifier.php from the catalog module:

$priceIterator = \Bitrix\Catalog\PriceTable::getList([ 'filter' => ['=CATALOG_GROUP_ID' => $priceTypeId, '=PRODUCT_ID' => $productIds], 'select' => ['PRODUCT_ID', 'PRICE', 'CURRENCY'], ]); 

Each item in the array contains: id, name, article, unit, a set of prices by type, warehouse stock, characteristics for filtering. Details of information block configuration: for the component to work, you need to configure an information block of products with trade catalog support, specify price types, and allow data export via JSON. We provide a setup guide.

Reactive Table Features

Row filtering via computed:

const filteredProducts = computed(() => { return products.value .filter(p => selectedCategory.value ? p.categoryId === selectedCategory.value : true) .filter(p => searchQuery.value ? p.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || p.article.toLowerCase().includes(searchQuery.value.toLowerCase()) : true ) .filter(p => showInStock.value ? p.stock > 0 : true); }); 

Everything is computed locally—no server requests on each interaction. For a price list of 500-2000 items this works instantly, with filter response in under 10 ms.

Sorting via sortKey and sortDirection refs. Click on the column header toggles direction. Numeric and string columns are handled separately.

Switching Price Types

Bitrix stores several prices per product in the b_catalog_price table (field CATALOG_GROUP_ID). All price types are passed in JSON:

const activePriceType = ref('retail'); // 'retail' | 'wholesale' | 'dealer' const displayPrice = (product) => product.prices[activePriceType.value]; 

Changing the price type is an instant reactive swap without server.

Selecting Items and Calculating Total

B2B price lists often need the ability to mark items and get the total sum or send a request. Checkboxes on each row, selectedIds—Set in ref():

const total = computed(() => [...selectedIds.value] .map(id => products.value.find(p => p.id === id)) .filter(Boolean) .reduce((sum, p) => sum + displayPrice(p) * (quantities[p.id] || 1), 0) ); 

Quantity field on each row—v-model on quantities[product.id]. Changing the quantity instantly recalculates the total. Clicking "Send request"—POST to a Bitrix handler with array {id, qty, price}.

Virtual Scroll for Large Price Lists

A price list of 5000+ items cannot be fully rendered—the browser lags. Virtualization via @vueuse/virtual-list or vue-virtual-scroller: only 50-100 visible rows are in the DOM at a time; the rest are computed on the fly. Filtering and search work on the full array in memory—only rendering is virtual. This reduces memory usage by 90% and ensures smooth scrolling.

How to Speed Up Price List Loading by 3 Times?

The key is caching JSON on the client and server sides. Here are the steps:

1. Configure caching in sessionStorage on the first request.
2. Load data with one AJAX request, cache the response with tags.
3. Use tagged caching on the server—according to 1C-Bitrix documentation, this automatically clears the cache when products or prices change.
4. For catalogs up to 10,000 items this is sufficient without backend cache.

Implementing these steps typically reduces initial load time by 60%, from 8 seconds to 3 seconds, and with subsequent visits it's nearly instant.

Why Vue.js is Better than jQuery for Interactive Tables?

Vue.js provides reactivity without manual DOM updates. In jQuery, after each filter you need to iterate rows and change classes—on 2000 rows this gives a 200-300 ms delay. Reactive computed update in 1-5 ms—a 98% improvement in responsiveness.

Vue.js library and jQuery library—both tools have their place, but for reactive tables Vue.js gives a tangible advantage in performance and maintainability.

Case Study: Interactive Distributor Price List

From our practice: a building materials distributor, price list of 3,800 items, three price types (retail, small wholesale, large wholesale), filter by brand and category, search by article.

Previous solution: downloadable Excel file, updated manually once a week. An attempt to make an HTML table via bitrix:catalog.section resulted in an 8-second page load (3,800 rows in DOM) and no search at all.

Solution: Vue component with virtual scroll. Data is loaded with one AJAX request on component mount—the Bitrix controller returns JSON with the full price list (~400KB gzip ~80KB). The request is cached in sessionStorage—reopening the page is instant.

Price type switching is available only to authorized users with the correct group—checked in Vue via window.BX_STATE.userGroups, additionally on the server with each request. Unauthorized users see only retail price.

Result: time to interactivity—1.2 seconds (85% reduction from 8 seconds). Managers saved 15 hours per week ($1,500 per month) by no longer manually updating Excel files. Search by article is instant. The client reported a 40% increase in order processing efficiency.

Export and Print

"Download price list"—not a separate page, but CSV generation in the browser from the current filtered and sorted set:

function exportCsv() { const rows = filteredProducts.value.map(p => [p.article, p.name, displayPrice(p), p.unit].join(';') ); const blob = new Blob(['\uFEFF' + rows.join('\n')], { type: 'text/csv;charset=utf-8' }); // ... download link } 

The BOM \uFEFF is required for correct opening in Excel on Windows.

Stages and Timelines

Development is iterative—basic functions first, extensions after agreement.

What's Included

• Documentation on data structure and controller API
• Access to Git repository with component code
• Installation and setup guide
• 2 weeks of technical support and code guarantee after launch
• Training for managers on using the interactive price list

Contact us for an audit of your catalog—we will propose an optimal solution. Order development of an interactive price list today! Get a consultation: we will evaluate your catalog, propose architecture and timelines. Use virtual scrolling technique for large data volumes.