Layered navigation en filters optimaliseren in Magento 2

Layered Navigation in Magento 2

Layered navigation (filters) helpt klanten producten te vinden door te filteren op attributen.

Basis configuratie

Attribuut filterable maken

Stores > Attributes > Product

Open attribuut

Storefront Properties:

- Use in Layered Navigation: Filterable (with results)

- Use in Search Results Layered Navigation: Yes

Filter locatie

Filters verschijnen in:

• Categoriepagina's (sidebar)
• Zoekresultaten

Anchor Categories

Wat is anchor?

Een anchor category toont producten van alle subcategorieën en maakt filtering mogelijk.

Instellen

Catalog > Categories

Open categorie

Display Settings:

- Is Anchor: Yes

Zonder anchor

• Alleen producten direct in die categorie
• Geen layered navigation

Filter configuratie

Prijs filter

Stores > Configuration > Catalog > Catalog > Layered Navigation

• Display Product Count: Yes/No
• Price Navigation Step Calculation: Automatic of Manual

Automatic price steps

Magento berekent automatisch prijsranges op basis van producten.

Manual price steps

Definieer zelf de ranges:

• Default Price Navigation Step: 10

Swatch filters

Visual Swatches

Kleuren en afbeeldingen als filter:

Attribuut input type: Visual Swatch

Use in Layered Navigation: Yes

Swatches configureren in Manage Options

Text Swatches

Tekst buttons als filter:

Input type: Text Swatch

Korte tekst per optie (S, M, L)

Filter volgorde

Attribuut positie

De volgorde van filters wordt bepaald door:

Position in attribuutset

Of via extensie customization

Sorteren

Stores > Attributes > Attribute Set

Open je set

Sleep attributen in gewenste volgorde in hun groep

Standaard filter opties

Prijs

Altijd beschikbaar als filter.

Categorie

In anchor categories kunnen subcategorieën als filter dienen.

Custom attributen

Alle attributen met "Use in Layered Navigation" = Yes.

Multi-select filters

Standaard gedrag

Klikken op filter optie = direct filteren.

Ajax filters (extensies)

Voor multi-select zonder page reload:

• Amasty Layered Navigation
• Mageplaza Layered Navigation
• Mirasvit Layered Navigation

Deze extensies bieden:

• Checkbox multi-select
• Ajax page update
• Price slider
• Rating filter
• Stock filter

Stock status filter

Standaard

Niet beschikbaar als filter.

Toevoegen (extensie)

Met layered navigation extensies kun je filteren op:

• In Stock only
• Include Out of Stock

Performance overwegingen

Indexing

Layered navigation gebruikt de catalog_product_index tabellen.

Veel attributen = tragere filters

Beperk filterable attributen tot wat klanten echt gebruiken.

Flat catalog (deprecated)

Vroeger gebruikt voor performance, nu minder relevant.

SEO voor gefilterde pagina's

Probleem

Gefilterde URLs kunnen duplicate content creëren:

• /schoenen
• /schoenen?color=zwart
• /schoenen?color=zwart&size=42

Oplossingen

Canonical tags:

Stores > Configuration > Catalog > Catalog > Search Engine Optimization

• Use Canonical Link Meta Tag for Categories: Yes

Noindex gefilterde pagina's:

Via robots meta tag of extensie.

URL rewrites voor filters:

Sommige extensies creëren SEO-vriendelijke URLs:

/schoenen/zwart/maat-42

Mobile optimalisatie

Collapsible filters

Op mobiel worden filters vaak in een off-canvas menu getoond.

Filter count

Beperk zichtbare filters op mobiel. Minder is meer.

Customization opties

Via extensies

• Filter icons
• Filter tooltips
• Custom filter types
• Rating stars filter
• New/Sale badges filter

Via theme

Layout XML aanpassingen voor filter positioning en styling.

Troubleshooting

Filters tonen niet

Checklist:

Attribuut "Use in Layered Navigation" = Yes

Categorie "Is Anchor" = Yes

Producten hebben waarden voor dat attribuut

Reindex: bin/magento indexer:reindex

Cache flush

Verkeerde counts

Reindex catalog_product_index:

``bash

bin/magento indexer:reindex catalog_product_index

``

Filter toont alle opties

"Filterable (with results)" toont alleen opties met producten.

"Filterable (no results)" toont alles.

Best practices

Relevante filters

Bied alleen filters die zinvol zijn:

• Kleding: Kleur, Maat, Merk
• Elektronica: Merk, Prijs, Features

Logische volgorde

Belangrijkste filters bovenaan:

Categorie

Prijs

Merk

Specifieke attributen

Duidelijke labels

Gebruik klantgerichte labels, niet technische termen.

Test de UX

Test filtering vanuit klantperspectief:

• Is het logisch?
• Vinden ze wat ze zoeken?
• Werkt het op mobiel?