Access Headless through Quantic

This is for:

The Quantic library uses Coveo Headless to interface with the Coveo Platform. For advanced customizations not possible in Quantic components, you can leverage the Headless library directly through Quantic. This article provides an example meant to help you do so.

The following is the JavaScript file of an example Quantic component that wraps the Headless context controller to pass custom context.

// setContext.js
import { LightningElement, api } from 'lwc';
import { registerComponentForInit, initializeWithHeadless } from 'c/quanticHeadlessLoader'; 
 
export default class MyCustomContextComponent extends LightningElement {
  @api engineId = 'my-search-page'; 
 
  contextController; 
 
  connectedCallback() { 
    registerComponentForInit(this, this.engineId);
  }
 
  renderedCallback() { 
    initializeWithHeadless(this, this.engineId, this.initialize);
  }
 
  initialize = (engine) => {
    this.contextController = CoveoHeadless.buildContext(engine); 
    this.contextController.set({ 
      ageGroup: '30-45',
      interests: ['sports', 'camping', 'electronics']
    });
  }
}

	Two functions you’ll need to connect your component with Coveo Headless.
	Define the Headless engine ID property and assign it a default value. The `@api` decorator lets you expose that parameter publicly, making it accessible by parent components. In the end, the engine ID used by your `setContext` component must be the same as the one used by the components whose context you want to modify.
	The variable you’ll use as a context controller.
	You must define this callback and the following one when wrapping Headless components to connect your components with the Headless state. The `registerComponentForInit` function registers your component for future initialization using the specified engine.
	The `initializeWithHeadless` callback will execute your `initialize` function after the engine instance is created. This reliably sets the context before your interface sends a query or logs an event.
	The Headless `buildContext` method returns a context controller attached to your Headless engine.
	Set the target context with your controller.

Once included in the target pages, this component passes custom context when making search requests and logging usage analytics events.

// ...
"context": {
  "ageGroup":"30-45",
  "interests" :["sports","camping","electronics"]
  },
// ...

Leading practice

Since the Coveo Quantic components wrap Headless components, you can have a look at the Quantic components themselves to see more examples.