Remove Ajax from the selection of items from the filter and remake the button in CS-Cart

In CS-Cart the filter is implemented in such a way that if you select at least one item in it, filtering immediately takes place. If there are a lot of goods in the store or hosting is not powerful enough, then all this takes quite a long time to get the desired result + an extra load, as with each choice there is an appeal to the database. This article will describe how to make it so that when you select an item in the standard filter, filtering does not occur immediately, but it works when you press a button.

First of all, you need to copy the JavaScript file of the standard filter to your module, in which we will change the filtering method. This is necessary so that when updating the engine, nothing disappears.
Take file product_filters.js in folder js/tygh/ and copy to your module folder js/addons/your_module/product_filters.js
Further in this file we find the function function setHandler()

var tempfilterarr=''; // Create a variable in which the set of selected items for the filter will be stored.
function setHandler() {
	$(_.doc).on('change', '.cm-product-filters-checkbox', function () {
		if (no_trigger) {
			return false;

		var self = $(this);
		var container = self.parents('.cm-product-filters');

		//return getProducts($.attachToUrl(base_url, 'features_hash=' + generateHash(container)), self); - Delete

		tempfilterarr=$.attachToUrl(base_url, 'features_hash=' + generateHash(container)), self; // Add to our variable selected items in the filter

// Next, we write the processing by pressing the button to apply the filter
$('body').on('click','#gul-catalog-filter-submit',function(){ // The selector can be any
	$(this).html('Show'); // Change the button text, it is necessary to restore the button to its original state
	if(tempfilterarr!='') // If there is at least one selected item in the filter, the selected items in the filter are passed to the function for filtering.
		return getProducts(tempfilterarr);
	else{ // If more than one item is not selected, then the button changes the text temporarily.
		$(this).html('No filter selected');
		var but=$(this);
		setTimeout(function() { but.html('Show'); }, 3000);

And finally, we just need to replace the connection of the standard filter script to ours and make a button. All this is done in a file templates/blocks/product_filters/original.tpl
Change line {script src="js/tygh/product_filters.js"} on {script src="js/addons/your_module/product_filters.js"} .
In block <div class="ty-product-filters__tools clearfix"> before the filter reset button we insert our button <div id="gul-catalog-filter-submit">Show</div>.

That's all, it remains only to register styles for the button.


If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email

By submitting the form, you agree to our privacy policy