Linear filtering block – allows users to select multi-level classifications and associated labels to quickly and accurately find products
The linear filtering block is a new function block added by the WEB theme park according to the suggestions and needs of many customers. In this block, the first option can manually choose to use multiple high-level classifications, the second option will automatically call its second level classification, the third option will call the third level classification, and so on.
When the last option is reached, you can link the labels associated with the classification selected in the previous option, so that you can implement multi-level association selection of classification+labels for precise filtering.
This function block is particularly suitable for enterprises with a large number of product segments, so that you can carefully classify products into multiple levels, and add auxiliary labels to each product. You can accurately filter products through linear classification level association selection+association labels.
This block can also be linked with the main list of categories and the article call block. Ajax does not refresh to get the filtering results, and the results can be obtained without turning pages and waiting.
As shown below:
The actual effect can be found at: https://block.themepark.com.cn/supersimpletravel/category/guonei/
Setting of linear filter blocks
After inserting, we can start to select the following categories:
As can be seen from the above figure, classification is selected in a hierarchical manner. Generally speaking, if a higher level classification is selected, its subcategories can be automatically called. Then, if our classification level is 3 levels, we only need to select the first level classification here, and subsequent levels will be automatically called.
Now we have three levels of classification, so we need to add three classification selectors:
It can be seen that by clicking the Add button, three classification options have been added. At last, there is a label option selector that comes with it by default (because labels have no hierarchy and are associated with classifications, there is only one that does not need to be added)
Then you can set the style, icon and text of the block as follows:
Now, after selecting the category and label options, click the button to jump to the corresponding website list address and view the results.
Two ways of AJAX without refreshing results
1. Associate with the article calling module in the page
First, after inserting the filter module, the next module will insert an article calling module immediately
It can be seen from the upper layer level. There should be no paragraphs or other blocks between the two modules. They must be placed next to each other.
Then turn on the option of linear filter block, and turn on the option of ajax to refresh the following article list:
In this way, we can use linear filtering to associate the following article call blocks.
The article block can be added to the next page without refreshing, so that the entire filtering and viewing can be viewed directly on one page without refreshing
As shown in the following figure, find the loading settings in the title options of the article block, select the second page or change the way, and set the button to achieve this.
For the effect in the page, see the demo: https://block.themepark.com.cn/supersimpletravel
2. There is no refresh result for AJAX using linear list in classified directory
The category directory cannot be edited directly with the block editor, so we need to add a block template to attach to the header of the category.
First, go to the block template and create a template named: Product Linear Filtering Header Template (name can be filled in by yourself)
Switch to Initialize appearance , select full screen mode without animation, and turn on block mode
Then switch back to the setting and insert the block. For the sake of beauty, add a block of graphics and text on the linear screening block, and release it after completion.
Then enter the category directory and edit the top-level category (if all its subcategories are default options, they will inherit the style settings of the top-level category, so you only need to edit the top-level category, and the subcategories will inherit, without setting one by one)
After mounting here, we can see in the classification:
Linear filtering is added to the classification list. You can also enable more page turning functions of ajax loading, so that the filtering results will not be lost due to page turning.
Enter Topic Options - Default Filter and List Options Last:
Fill in and load more button text here, submit and save it
The effect is as follows:
The effect of classification is visible. Please visit: https://block.themepark.com.cn/supersimpletravel/category/guonei/
