THIS IS ARCHIVED DOCUMENTATION

SmartSnippetQuestionsList (Deprecated)

The SmartSnippetQuestionsList controller allows to manage additional queries for which a SmartSnippet model can provide relevant excerpts.

Methods

collapse

Collapse the specified snippet suggestion.

Parameters

expand

Expand the specified snippet suggestion.

Parameters

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () ⇒ void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

The state of the SmartSnippetQuestionsList controller.

Properties

Initialize

buildSmartSnippetQuestionsList

Creates a SmartSnippetQuestionsList controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns SmartSnippetQuestionsList

QuestionAnswerDocumentIdentifier

Properties

  • contentIdKey: string

    The content identifier key. Typically, permanentid or urihash.

  • contentIdValue: string

    The content identifier value.

SmartSnippetRelatedQuestion

Properties

  • answer: string

    The answer, or snippet, related to the question.

    This can contain HTML markup, depending on the source of the answer.

  • documentId: QuestionAnswerDocumentIdentifier

    The index identifier for the document that provided the answer.

  • expanded: boolean

    Determines if the snippet is currently expanded.

  • question: string

    The question related to the smart snippet.

Unsubscribe

Call signatures

  • (): void

Example Implementation

smart-snippet-questions-list.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {SmartSnippetQuestionsList as HeadlessSmartSnippetQuestionsList} from '@coveo/headless';
 
interface SmartSnippetQuestionsListProps {
  controller: HeadlessSmartSnippetQuestionsList;
}
 
export const SmartSnippetQuestionsList: FunctionComponent<SmartSnippetQuestionsListProps> =
  (props) => {
    const {controller} = props;
    const [state, setState] = useState(controller.state);
 
    useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
    const {questions} = state;
 
    if (questions.length === 0) {
      return <div>Sorry, no related questions found</div>;
    }
 
    return (
      <div style={{textAlign: 'left'}}>
        People also ask:
        <dl>
          {questions.map((question) => {
            return (
              <>
                <dt>{question.question}</dt>
                <dd>
                  <div
                    style={{display: question.expanded ? 'block' : 'none'}}
                    dangerouslySetInnerHTML={{__html: question.answer}}
                  ></div>
                  <button
                    style={{display: question.expanded ? 'none' : 'block'}}
                    onClick={() => controller.expand(question.documentId)}
                  >
                    Show answer
                  </button>
                  <button
                    style={{display: question.expanded ? 'block' : 'none'}}
                    onClick={() => controller.collapse(question.documentId)}
                  >
                    Hide answer
                  </button>
                </dd>
              </>
            );
          })}
        </dl>
      </div>
    );
  };
 
// usage
 
/**
 * ```tsx
 * const controller = buildSmartSnippetQuestionsList(engine);
 *
 * <SmartSnippetQuestionsList controller={controller} />;
 * ```
 */

Associated Engines

The SmartSnippetQuestionsList controller is available in the following engine: