Coveo: Resolved issue with coveo not rendering on sidebar AND header

Author: lamATnginx

assets/js/coveo.js

@@ -36,6 +36,7 @@ async function atomicCoveo() {
   /* Initialize the interfaces with credentials */
   const searchPageInterface = document.querySelector('#search-v2');
   const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
 
   if (searchPageInterface) {
     await searchPageInterface.initialize({
@@ -53,21 +54,41 @@ async function atomicCoveo() {
     await searchPageInterface.executeFirstSearch();
   }
 
-  /* Initialize the header searchbar*/
-  await searchBarHeader.initialize({
-    accessToken: token,
-    organizationId: org_id,
-    analytics: { analyticsMode: 'legacy' },
-    preprocessRequest: (request) => {
-      const body = JSON.parse(request.body);
-      body.q = `<@- ${body.q} -@>`;
-      request.body = JSON.stringify(body);
+  /* Initialize the header searchbar */
+  if (searchBarHeader) {
+    await searchBarHeader.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
 
-      return request;
-    },
-  });
+        return request;
+      },
+    });
 
-  await searchBarHeader.executeFirstSearch();
+    await searchBarHeader.executeFirstSearch();
+  }
+
+  /* Initialize the sidebar searchbar */
+  if (searchBarSidebar) {
+    await searchBarSidebar.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
+
+        return request;
+      },
+    });
+
+    await searchBarSidebar.executeFirstSearch();
+  }
 }
 
 document.addEventListener('DOMContentLoaded', async () => {

layouts/partials/coveo-atomic-search.html

@@ -1,5 +1,6 @@
 {{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
-<atomic-search-interface id="search-standalone-header">
+{{ $id := .id | default "search-standalone-header"}}
+<atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
     </atomic-search-box>
 </atomic-search-interface>

layouts/partials/header.html

@@ -80,7 +80,7 @@
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
       <div class="header__search">
         <!-- Standalone search box. -->
-        {{ partial "coveo-atomic-search.html" }}
+        {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
       </div>
     {{ end }}
 

layouts/partials/sidebar-v2.html

@@ -14,7 +14,7 @@
     </div>
     <div class="sidebar__search">
       <!-- Standalone search box. -->
-      {{ partial "coveo-atomic-search.html" }}
+      {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
     </div>
     <div class="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>