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.Atomic framework does not support Coveo JSUI-specific events.
Previously, Coveo's JSUI library provided the flexibility to customize the search behavior based on business requirements by using event handlers like buildingQuery, deferredQuerySuccess, doneBuildingQuery, and duringQuery. Now Coveo has an updated Atomic framework, which is easier and more flexible to build the search interface, but at the same time, it's not providing the same features as JSUI to handle the events to customize the search behavior. Any suggestions or workarounds to achieve how we are using the deferredQuerySuccess to modify the field values before the search initialization.
