Zoeken

Totaal zoekresultaten filteren op 10, 20 of 50 op zoek resultaat pagina.

Stef van Doorn
Stef van Doorn
  • Bijgewerkt

In dit artikel leer je hoe je een filter kunt maken waarmee bezoekers van je Zendesk Help Center kunnen kiezen hoeveel zoekresultaten ze per pagina willen zien: 10, 20, of 50. Deze functionaliteit is gebruiksvriendelijk en maakt gebruik van HTML, CSS, en JavaScript. We leggen stap voor stap uit hoe je dit implementeert.

 

1. HTML: Dropdown en Navigatieknoppen

Plaats de onderstaande HTML in de zoekresultatenpagina. Dit kan in de "search_results.hbs" sectie van de Zendesk Guide-customization interface.

<div class="results-per-page">
<label for="resultsPerPage">Resultaten per pagina</label>
<select id="resultsPerPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>

Deze code voegt een dropdownmenu toe waarmee gebruikers kunnen kiezen hoeveel zoekresultaten ze willen zien.

2. CSS: Stijling van de Dropdown

Voeg de volgende CSS toe aan je style.css bestand of de CSS-sectie in Zendesk Guide:

.results-per-page {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}

label {
font-size: 16px;
}

select {
padding: 5px 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}

3. JavaScript: Functionaliteit toevoegen

Voeg de onderstaande JavaScript toe aan de JavaScript-sectie in Zendesk Guide (te vinden onder "Customize Design" > "Edit Code" > "script.js"):

document.addEventListener("DOMContentLoaded", () => {
const resultsPerPageSelect = document.getElementById("resultsPerPage");
let currentPage = 1; // Start altijd bij pagina 1

// Functie om de dropdown te synchroniseren met de URL-parameters
function syncDropdown() {
const searchParams = new URLSearchParams(window.location.search);
const resultsPerPage = searchParams.get("per_page");

if (resultsPerPage) {
resultsPerPageSelect.value = resultsPerPage; // Stel de actieve waarde in
}
}

// Functie om URL bij te werken en resultaten te herladen
function updateResults() {
const resultsPerPage = resultsPerPageSelect.value;
const searchParams = new URLSearchParams(window.location.search);
searchParams.set("page", currentPage); // Zorg dat je op de juiste pagina blijft
searchParams.set("per_page", resultsPerPage);

// Update URL en herlaad de pagina
window.location.search = searchParams.toString();
}

// Event listener voor dropdown wijzigingen
resultsPerPageSelect.addEventListener("change", () => {
currentPage = 1; // Reset naar eerste pagina bij wijziging
updateResults();
});

// Synchroniseer dropdown bij het laden van de pagina
syncDropdown();
});

 

4. Hoe het werkt

  1. Dropdown-synchronisatie met URL: De waarde van de dropdown wordt gesynchroniseerd met de URL-parameter per_page, zodat de actieve waarde altijd correct blijft na het herladen van de pagina.

  2. Herladen van zoekresultaten: Bij elke wijziging in de dropdown wordt de URL bijgewerkt met de nieuwe waarde, en de pagina wordt opnieuw geladen met de juiste hoeveelheid zoekresultaten.

  3. Gebruiksvriendelijkheid: De dropdown onthoudt de geselecteerde waarde, zodat gebruikers niet opnieuw hoeven te kiezen na een herlaad.

5. Testen

  1. Selecteer "20" in de dropdown en controleer of de pagina opnieuw laadt met 20 resultaten per pagina.
  2. Selecteer "50" en herhaal het proces.
  3. Probeer terug te schakelen naar "10" en controleer of alles werkt zoals verwacht.

Met deze stappen heb je een eenvoudig te gebruiken filter voor zoekresultaten in Zendesk Guide. Het verbetert de gebruikerservaring en geeft bezoekers meer controle over hoe ze informatie vinden in je Help Center. Laat het weten als je vragen hebt of ergens tegenaan loopt! šŸŽ‰