Leveraging Coveo Atomic Framework for Request and Response Manipulation
PreProcessRequestMiddleware: The PreProcessRequestMiddleware provides direct access to requests before responses are received and pages are loaded. This allows for various manipulations, such as modifying request parameters or intercepting actions before execution. For instance, you can log query information for debugging purposes and perform conditional actions based on the query content. Example: preprocessRequest: (request, clientOrigin, metadata) => { const body = JSON.parse(request.body); request.body = JSON.stringify(body); // Reassign the modified body back to request // Execute the first search after preprocessing searchInterface.executeFirstSearch(); return request; // Return the modified request } preprocessSearchResponseMiddleware: The preprocessSearchResponseMiddleware operates after pages have loaded, providing access to search responses. Here, you can manipulate aspects such as total count and relevant data to meet specific requirements. This middleware allows for additional processing of search responses if necessary. Example: preprocessSearchResponseMiddleware: (response) => { // Additional processing of search response if needed return response; // Return the modified response } searchInterface.executeFirstSearch(); }(); Reference Link:https://docs.coveo.com/en/atomic/latest/usage/atomic-modify-requests-responses/#modify-responses By leveraging these middleware options, developers can effectively customize search experiences within the Coveo Atomic framework to align with unique business needs and user expectations.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.
