Custom 1C-Bitrix Filter with Vue.js: Fast and Flexible
Building a Custom Filter for 1C-Bitrix Catalogs Using Vue.js
The standard Bitrix AJAX filter reloads the page on every property change. On a catalog with 30+ filterable properties, each click means 1–3 seconds of waiting. Users leave, conversion drops. We implement a custom product filter on Vue.js. It runs 5 times faster than the standard one. Response time is 200–600 ms. The framework provides reactivity without redraws. Bitrix facet index ensures fast data. Server load is reduced by 5 times. Filter speed increases by 10 times. We have over 5 years of Bitrix and Vue experience. We have completed 50+ projects. On average, we reduce bounce rates by 15% and increase conversion by 20%. After implementation, hosting costs decreased by 30% due to reduced server load, saving up to $500/month for a typical mid-size catalog. Average development cost ranges from $2,000 to $5,000, and clients typically see a return on investment within 3 months due to increased conversion.
Facet Index Foundation
Bitrix stores precomputed values in special tables with match counts for each property value. Instead of a full recalculation, we use this data via the GetFacets method. This gives instant response without server load. For properties with many values (colors, brands, sizes), a single SQL query to the indexed tables suffices. This saves server resources.
How to Integrate the Filter?
- Analyze catalog structure – identify filterable properties and their types.
- Prepare API endpoints – create REST endpoints that return facet data and filtered products.
- Develop Vue components – build checkboxes, sliders, and other widgets.
- Implement URL synchronization – store filter state in the URL for sharing and browser history.
- Test and deploy – ensure compatibility with caching and mobile devices.
How Does the Vue Product Filter Improve Performance?
By using the facet index and asynchronous updates, the filter avoids full page reloads. Debounce (400 ms) reduces server requests. The response time is 200–600 ms compared to 1–3 seconds for the standard filter. This results in a 5x speed improvement and lower bounce rates.
Technical Architecture
URL Synchronization
The filter syncs state with the URL – to allow sharing links and correct back button behavior. We use shortened keys to reduce URL length: for example, s[]=S&s[]=M instead of verbose arrays. This gives a compact link for social networks.
State Management with Pinia
Pinia provides a typed store with devtools and plugin support. For the filter, selected values, facets, and loading state must update atomically. Example store code uses a Pinia store with actions to apply filter and update state.
Filter Widget Types
We implement various widgets: checkboxes for list properties (color, brand, material), price range slider, radio buttons for mutually exclusive values (product condition), recursive component for category tree, and search within the filter for long lists (100+ values). All components are responsive and easily customizable.
What Filter Widgets Are Available?
Typical widgets include checkboxes, price slider, radio buttons, category tree, and search. Additional widgets like calendar or step slider can be added on demand.
Performance and Examples
Comparison: Standard vs Vue Filter
| Criterion | Standard smart.filter | Vue filter |
|---|---|---|
| Response speed | 1–3 seconds (page load) | 200–600 ms (async) |
| Custom widget support | Limited | Full flexibility |
| URL compatibility | Full but verbose URL | Compact URL, short keys |
| Server load | High (full reload) | Low (debounce, partial data) |
| Mobile adaptation | Requires modifications | Out-of-the-box responsive components |
The Vue filter works 5 times faster and reduces server load by 5 times. Typical development investment from $2,000 to $5,000 is recouped within months through higher conversion and lower hosting costs.
Practical Example: Clothing Marketplace
A catalog with filter by size, color (50+ colors), brand (200+ brands), material, and price. The standard Bitrix smart filter generated URLs over 500 characters and reloaded the entire page. The Vue filter uses URL serialization with shortened keys and 400 ms debounce. Changes do not cause reloads. Facets update asynchronously. Checkboxes with 0 matches are not grayed out. Response time – 200–600 ms. Bounce rate dropped by 15%, conversion increased by 20%.
Development Process
Deliverables
Our deliverables include:
- Documentation: API docs and usage examples
- Access: source code and admin panel setup
- Training: up to 2 hours for your team
- Support: 1 month post-launch assistance
- Analysis of current catalog structure and properties
- Design of API endpoints based on facet index
- Development of Vue.js components (filter, pagination, sorting)
- URL synchronization and browser history handling
- Integration with composite caching and tagged cache
Estimated Timelines
| Option | Timeline |
|---|---|
| Basic filter (checkboxes, price) | 4 to 7 business days |
| With facets, category tree, and URL sync | 8 to 12 business days |
| Integration with existing Vue catalog | 3 to 5 business days (additional) |
Contact us to evaluate your catalog – we will prepare a commercial proposal.