Skip to main content

General Operation

Single Page Application

The Acsell Product Filters plugin carries out filtering operations in the browser. The plugin JavaScript in the browser (“browser JS” used below as shorthand) is given information about the products so that it can do the filtering. Therefore the browser JS knows which products to load, based on the filter options that are chosen.

The information for the products is heavily encoded so consists mostly of numeric data. This adds to the overall HTML page size but it compresses extremely well through gzip – to better than 10% of the original size. Even for the 10K product page in the demo shop the compressed data is only the same as a couple of medium JPGs.

A limited number of products are provided in the page based on the normal WooCommerce page loading (the plugin works best if this is the normal WooCommerce pagination). The browser JS extracts the HTML for the products loaded by default, but the HTML for other products has to be requested from the server.

The browser JS provides its own product lazy load using a Show More button or rewriting of the pagination controls, to implement essentially a Single Page Application to display the filtered products. As only the browser JS knows which products are to be displayed, lazy product loading or pagination provided by WooCommerce or the theme cannot be used.

Product HTML

An Ajax (XHR – XMLHttpRequest) call is used to request the HTML for any product that is needed. While waiting for the HTML, placeholder HTML is inserted. The browser JS caches the product HTML so if the HTML is already present the products can be shown immediately. This could be the case if changing a filter.

The Ajax call is handled by a special implementation of Ajax in the plugin server code, so the result can be cached in the server or browser cache. The call includes version information for each product, so if a product is edited, and the archive page is updated, the new product version number will be embedded in the Ajax call, meaning that new data will be returned (punching through the cache).

The browser JS requests product HTML in anticipation of user action. For example, when the Show More button is displayed, the HTML for the next block of products is requested. Then when Show More is clicked the products can immediately be put into the page.

Hooks

Acsell Product Filters include customisation hooks. Some of these are used internally for theme compatibility, with internally-developed files loaded depending on which theme is in use.

However, if a custom theme is used then the functionality may need further modification. In that case the hooks may be used.

Some additional hooks are provided to change the behaviour, e.g. to override on which pages filtering is shown.