Switching Between List and Grid View in Coveo Atomic Search

This article describes how to create a custom component to switch between list and grid view for your Coveo Atomic search results.

Coveo doesn't offer a built-in toggle component to switch between list and grid layouts. However, you can achieve this functionality using JavaScript (JS) and Cascading Style Sheets (CSS).

Here's a step-by-step guide:Define Result Templates: Create two separate result list templates, one for grid view and another for list view.

Assign Class Names: Assign appropriate class names to your <atomic-result-list> components. For example, use "list-view" for the list view template and "grid-view" for the grid view template.

Create a Custom Button Component: Develop a custom component that displays buttons for switching between list and grid views.

Implement Button Functionality: Use the onclick attribute for each button to trigger a JavaScript function when clicked. Inside the function, target the relevant <atomic-result-list> element using document.querySelector with the class name you assigned earlier (e.g., list_view = document.querySelector(".list-view")).

Show/Hide Views with CSS: When the "List" button is clicked, set the display style of the list_view element to "block" (visible) and grid_view element to "none" (hidden) using:
JavaScript
list_view.style.display = "block";
grid_view.style.display = "none";

Implement similar logic for the grid button, showing the grid view and hiding the list view.

Set Default View: Include logic to display the desired default view (list or grid) on initial page load.
Benefits: Users can switch between list and grid layouts based on their preference.
Improved user experience by providing more control over the search results display.