How to make your own filters and show them on your site in OpenCart
We continue to publish articles, which are devoted to the OpenCart ecommerce platform.
In the last one “How to add new brands in OpenCart. How to add brands to carousel module” we talked about brands and carousel module. Today we want to share with you some information concerning implementation of the filters.
Ok, let’s start.
Opencart Filter module has appeared from version 220.127.116.11. So, keep in mind, that if you need this module, it would be right to update your site.
What is the reason of using filters in general?
The most important thing of this is usability. Web sites can have hundreds of products with the different range of prices, sizes, colors etc. If a visitor enters your site and sees such variety of products, he/she can be boring of sorting page, scrolling it down and, as a result, be inclined to leave your web resource.
On the other hand, if the user sees filters, he/she can only set some parameters of search by filter (for example, price and size) and find what he/she needs in a quick manner. In this case he/she doesn’t need to scroll all products and see price and size in each of them.
When you install the default OpenCart template for the first time, you can’t see Filters, because you have to create them by yourself.
Well, let we tell you how to do it.
Firstly, you need to install Module Filter.
Installation procedure is the same as for other modules. Go in admin: Modules -> Extensions -> Filter -> Install. In our example, we will add Filter in the left column on category page.
So, choose: Layout: Category, Position: Left.
Ok, the Module is installed, but you can’t see it because it is empty. There are not any filters on your site yet.
Now we are about to create at least one filter (we will create filters by price range and size).
So, go to admin: Catalog -> Filters -> Insert. In the fields we set such price ranges: 0 — 200 $ and 200 — 1000 $ (for sure, you will set your own ranges on your web site).
In the same way create Filter group Size: Catalog -> Filters -> Insert.
Now we have two filters: Price and Size, but, nevertheless, we don’t see them in our FrontEnd.
Next step is to set what filters will be displayed for each category. Or, maybe, for some category we don’t need any of the filters. And the last thing is to add filter and it value to each product.
Go in admin: Catalog -> Categories. In our example, we choose category “Desktops”. Tab “Data”, in the field “Filters” write price range. You don’t need to enter Filter Group Name in this field but Filter Name (begin to enter first letter of the Filter Name and auto complete works). For price, these names are:
- • 0 — 200 $
- • 200 — 1000 $
Also add filter Size.
Now you are able to see Filter module on the page for category “Desktops” on the left column with the title “Refine Search”. It shows that the filters are placed on the site but there are no products with these filters.
Keep in mind to see Filter Module on each category page. You have to add all Filter Names for each category.
You are to add filters to the products at least.
Go to admin: Catalog -> Products, for example, Apple Cinema 30″. Tab “Links”, field “Filters”. Do all procedure in much the same manner as for categories. For this product, we add the following filters:
- • 0 — 200 $
- • Big
So, now we can see the number of the products that are set to current filter on the category page near each Filter Name.
Thus, when we check filter and press button “Refine Search”, we can see products in a quick manner and don’t need to search them across the category page.
Ok, this is all for today.
See you in the next publications.