Advanced Layered Navigation For Magento 2

Navigate through Store->Configuration->General ->Locale Options. And here select your desired language under the Locale drop-down option.

For the module translation, in your system navigate via app/code/Webkul/AdvancedLayeredNavigation/i18n. Here, open the file named en_US.CSV to edit.

After opening the file, replace the words after the comma(,) on the right with your translated words.

After the above step, now save the csv file and then upload it to the same folder and the translation is done.

To configure the module settings, navigate through Stores->Configuration->Webkul->Advanced layer Navigation.

Here the admin will configure the settings –

• Filter by Ratings:
  Choose this option as Yes to allow the customers to filter the products according to ratings(customer) else select No.
• Carousel Filter:
  Set this option as Yes to filter by attributes of your choice else select No.
• Background color:
  Set the color for the carousel background.
• Border Color:
  Set the color for the carousel border.
• Image Width:
  Within the carousel, set the image’s width.
• Image Height:
  Within the carousel, set the image’s height.

Create Attribute –

For adding the product attributes, the admin will navigate to Stores > Attributes > Product.

After clicking on the “Product” sub-menu option, it redirects the admin to the Product Attributes page as shown in the image below.

The admin will the attribute listing on the Product Attributes page.

Also, the admin can add a new product by simply clicking on the “Add New Attribute” button as shown below.

On clicking the “Add New Attribute,” will redirect the admin to the New Product Attribute page.

The admin will have to configure the settings under the following tabs-

• Fill in the details for the attribute Properties,
• Then set the Labels under Manage Labels for the attribute, and
• Lastly, set the Storefront Properties for this attribute.

Properties tab

The admin can click on Properties, that opens up the Attribute Properties section.

The admin can fill in the basic settings such as Default Label, Catalog Input, Manage Options details, Advanced Attribute Properties, etc. as shown in the image below.

The next tab is Manage Labels, under which the admin can manage the titles of the attributes, for Default Store View and Test Store View.

The last configuration tab is the Storefront Properties.

The admin can configure the settings such as Use in Search, Visible in Advanced Search, Comparable on Storefront, Use in Layered Navigation, etc. 

Under storefront properties set “Yes” for the “Use in Search“, “Use In layered Navigation” options, and then click the save button to save the configuration.

After saving the attribute, you can search the attribute to check if it’s saved or not.

Now, to add this created attribute into an attribute set, navigate to Stores->Attributes->Attribute Set.

Here, select the attribute set(we have selected the default) in which you want to put this newly created attribute. After this, just drag and drop this attribute under the product settings as shown below in the snapshot.

Here, you can assign the created attribute to the products. To add this attribute to a product, go to the add new product page, and then for the created attribute select the attribute value then save the product after that.

This attribute will be visible on the advanced layered navigation at the front end and you can filter it.

Make Attribute Available for layered Navigation:

The admin can easily provide the customers with the product attributes which can be used for layered navigation.

To do so the admin needs to navigate through Stores->Attribute->Product.

Here, whichever attribute you want to make available for the layered navigation just check that and from the Actions drop-down select Use in Layered Navigation and then select Filterable(with results) and hit the Submit button after that.

At the store frontend, the customers will find the assigned attributes for use in the layered navigation for filtering the products.

Enable Filter by any attribute (Like brands) in the carousel :

To enable this option admin needs to navigate through Advanced Layered Navigation-> Carousel Filter

Note:- Admin can choose only the “Dropdown” type attribute for the carousel filter.

Now, the admin can set the Title, Attribute, Category & Enable the module accordingly from the General tab.

From the Options tab, the admin can set the images for the “values of the attribute” for the carousel as shown in the image and then click on the Save button.

Admin can add the products to the desired category with the appropriate attribute option according to the product.

Now, the customer can see the carousel images to filter the result on the category page.

By selecting the desired attribute (color) from the carousel customer will get the filtered result mapping with the selected attribute.