NeuroAgent

How to Get Smart Filter Parameters in Product Catalog

Learn how to get selected smart filter parameters in product catalogs through JavaScript API, URL parameters, and platform events. Complete guide for developers.

#catalog-development#javascript-api-filters#magento-2-api#product-filtering#sapui5-smartfilterbar#smart-filter-catalog#url-filtering-parameters

How to get selected smart filter parameters in a product catalog?

I’m developing my own product catalog with a standard smart filter implemented. The issue is that I can’t extract the user’s selected filtering parameters to use in a database query for retrieving the corresponding products.

Could you please advise how to access the selected smart filter parameters? If possible, please provide a link to official documentation that describes this functionality in detail.

NeuroAgent

Accessing Smart Filter Parameters in Product Catalogs

In a product catalog, selected smart filter parameters can be obtained through several methods depending on the platform and technology used. The main approaches include accessing filter state through JavaScript API, URL parameters, and platform system events.

Table of Contents

Main Methods for Accessing Filter Parameters

Selected smart filter parameters can be extracted in several ways:

  1. Through platform events - most platforms provide events that trigger when filter states change
  2. Direct access to state - through filter component APIs
  3. URL parameters - filters are often saved in URLs to enable sharing results
  4. Global state - in modern frameworks, filter state may be stored in a central repository

For most systems, the key event is beforeRebindTable or similar, which allows access to current filter parameters before sending a request.

Access Through JavaScript API and Events

In SAPUI5 and similar frameworks, access to selected smart filter parameters is achieved through component methods:

javascript
// Getting access to the smart filter component
var oSmartFilter = this.getView().byId("smartFilterBar");

// Getting current filter values
var aFilterValues = oSmartFilter.getFilters();
var oFilterData = oSmartFilter.getFilterData();

// Handling event before table rebind
onBeforeRebindTable: function(oEvent) {
    var oParams = oEvent.getParameter("parameters");
    var aFilter = oParams.filters;
    
    // Here you can get all selected parameters
    aFilter.forEach(function(oFilter) {
        console.log("Field: " + oFilter.sPath);
        console.log("Value: " + oFilter.oValue);
        console.log("Condition type: " + oFilter.sOperator);
    });
}

For AG Grid, access to selected filter values is through the grid API:

javascript
// Getting active filters
const filters = gridApi.getFilterModel();
const selectedFilters = gridApi.getFilterInstance('columnId').getFilterValues();

Using URL Parameters

Many systems save filter state in URL parameters, making it easy to access selected values:

javascript
// Parsing URL parameters
function getUrlParameters() {
    const sPageURL = window.location.search.substring(1);
    const sURLVariables = sPageURL.split('&');
    const oParameters = {};
    
    for (let i = 0; i < sURLVariables.length; i++) {
        const sParameterName = sURLVariables[i].split('=');
        oParameters[sParameterName[0]] = decodeURIComponent(sParameterName[1]);
    }
    
    return oParameters;
}

// Example usage for Magento API
var searchCriteria = {
    filter_groups: [{
        filters: [{
            field: "name",
            value: getUrlParameters().search,
            condition_type: "like"
        }]
    }]
};

Working with Different Platforms

SAPUI5/SmartFilterBar

In SAPUI5, access to smart filter parameters is done using the SmartFilterBar component. Main methods:

javascript
// Getting a specific filter control
var oControl = oSmartFilterBar.getControlByKey("fieldName");

// Getting all selected values
var mSelectedValues = oSmartFilterBar.getFilterData();

// Handling initialization event
filterInitialize: function() {
    var oControl = this.getView().byId("smartFilterBar").getControlByKey("Dogovor");
    oControl.attachValueHelpRequest(this.onValueHelpRequest, this);
}

Magento 2 API

For Magento 2, SearchCriteria with filter parameters is used:

javascript
// Example request with filters
GET /rest/V1/products?searchCriteria[filter_groups][0][filters][0][field]=name&
searchCriteria[filter_groups][0][filters][0][value]=bag&
searchCriteria[filter_groups][0][filters][0][condition_type]=like

Adobe Experience Platform

In Adobe Experience Platform, filters are passed as query parameters:

javascript
// Example filtering by creation date
curl -g -X GET 'https://yourdomain.commercelayer.io/api/skus?filter[q][created_at_gt]=2018-01-01&filter[q][created_at_lt]=2018-01-31' \
-H 'Accept: application/vnd.api+json' \
-H 'Authorization: Bearer your-access-token'

commercetools

In commercetools, filters are formulated through search parameters:

javascript
// Example product filtering
GET /product-projections/search?filter=variants.price:range(100 to 500)&filter=categories.id:("cat1","cat2")

Official Documentation

  1. SAPUI5 SmartFilterBar Documentation - official documentation for the SmartFilterBar component in SAPUI5

  2. Adobe Experience Platform Catalog Filtering - comprehensive guide to filtering data in Adobe Experience Platform

  3. Magento 2 API SearchCriteria - documentation on using SearchCriteria in Magento 2 API

  4. commercetools Product Search - documentation on product search and filtering in commercetools

  5. BigCommerce API Filtering - guide to filtering in BigCommerce API

  6. Akeneo API Filtering - documentation on filtering attributes in Akeneo

Practical Implementation Examples

Example 1: Complete filter workflow in SAPUI5

javascript
onInit: function() {
    // Binding event handler
    this.byId("smartFilterBar").attachBeforeRebindTable(this.onBeforeRebindTable, this);
},

onBeforeRebindTable: function(oEvent) {
    var oParameters = oEvent.getParameter("parameters");
    var aFilters = oParameters.filters;
    
    // Forming backend parameters
    var mBackendFilters = this.convertFiltersToBackendFormat(aFilters);
    
    // Sending API request
    this.loadFilteredProducts(mBackendFilters);
},

convertFiltersToBackendFormat: function(aFilters) {
    return aFilters.map(function(oFilter) {
        return {
            field: oFilter.sPath,
            value: oFilter.oValue,
            operator: this.getBackendOperator(oFilter.sOperator)
        };
    }.bind(this));
},

getBackendOperator: function(sOperator) {
    var mOperators = {
        "EQ": "equals",
        "NE": "notEquals",
        "GT": "greaterThan",
        "GE": "greaterOrEquals",
        "LT": "lessThan",
        "LE": "lessOrEquals",
        "Contains": "contains",
        "StartsWith": "startsWith",
        "EndsWith": "endsWith"
    };
    return mOperators[sOperator] || sOperator;
}

Example 2: Working with URL parameters

javascript
// Utility for working with URL parameters
class UrlFilterManager {
    constructor() {
        this.filters = this.parseUrlFilters();
    }
    
    parseUrlFilters() {
        const params = new URLSearchParams(window.location.search);
        const filters = {};
        
        for (const [key, value] of params) {
            if (key.startsWith('filter_')) {
                const fieldName = key.replace('filter_', '');
                filters[fieldName] = value;
            }
        }
        
        return filters;
    }
    
    getFilterValue(sFieldName) {
        return this.filters[sFieldName] || null;
    }
    
    buildFilterQuery() {
        return Object.entries(this.filters)
            .map(([field, value]) => `${field}=${encodeURIComponent(value)}`)
            .join('&');
    }
}

// Usage in component
var oFilterManager = new UrlFilterManager();

// Getting filter value by field name
var sSearchValue = oFilterManager.getFilterValue('search');
var nPriceFrom = oFilterManager.getFilterValue('price_from');

Example 3: Integration with REST API

javascript
// Service for working with filters and API
class FilterService {
    constructor(sApiUrl) {
        this.apiUrl = sApiUrl;
    }
    
    // Getting filtered products
    getFilteredProducts(aFilters) {
        var sFilterQuery = this.buildFilterQuery(aFilters);
        return fetch(`${this.apiUrl}/products?${sFilterQuery}`)
            .then(response => response.json())
            .then(data => data.items);
    }
    
    // Building query string
    buildFilterQuery(aFilters) {
        return aFilters.map(oFilter => {
            var sValue = this.encodeFilterValue(oFilter.value, oFilter.operator);
            return `filter[${oFilter.field}][${oFilter.operator}]=${sValue}`;
        }).join('&');
    }
    
    // Encoding values based on operator
    encodeFilterValue(vValue, sOperator) {
        if (sOperator === 'in' || sOperator === 'nin') {
            return Array.isArray(vValue) ? vValue.join(',') : vValue;
        }
        return encodeURIComponent(vValue);
    }
}

Conclusion

To obtain selected smart filter parameters in a product catalog:

  1. Use platform events - such as beforeRebindTable in SAPUI5 to access the current filter state

  2. Work with URL parameters - most modern systems save filter state in URLs to enable sharing results

  3. Use direct API methods - call filter component methods to get currently selected values

  4. Refer to official documentation - each platform has its specific implementation, so it’s important to study the documentation for the specific system

The choice of method depends on the platform used, application architecture, and performance requirements. For complex scenarios, it’s recommended to combine several approaches to ensure reliable filter system operation.

Sources

  1. SAPUI5 SmartFilterBar Documentation
  2. Adobe Experience Platform Catalog Filtering
  3. Magento 2 API SearchCriteria
  4. commercetools Product Search
  5. BigCommerce API Filtering
  6. Akeneo API Filtering
  7. Stack Overflow - SAPUI5 SmartFilterBar
  8. AG Grid Filter Documentation
  9. JetSmartFilters Documentation
  10. CommerceLayer Filtering Documentation
How to implement a custom smart filter for a product catalog from scratch?How to optimize filtering performance in large product catalogs?How to save filter states between user sessions?How to integrate filters with different e-commerce platforms?How to handle complex filtering conditions (ranges, multiple selection)?How to add visual progress indicators when applying filters?
Ask NeuroAgent