Use a standalone search box

This is for:

Developer System Administrator

The QuanticStandaloneSearchBox component lets you create a search box that redirects to a main, Quantic-powered search page. It works out of the box and redirects to the Quantic-powered search page of your Salesforce Experience Cloud site (that is, Salesforce Community) by default. Once included in your Experience Cloud site, you can use the Experience Builder to configure it.

Edit the QuanticStandaloneSearchBox through the Experience Builder

In most cases, you’ll want to go further by including that standalone search box component in the header of your Experience Cloud site. That’s only possible with Lightning Aura search box components, so you’ll need to create one that wraps the QuanticStandaloneSearchBox component. This article walks you through the required steps.

  1. Create a new Lightning Aura Component. We recommend doing so through the Salesforce developer console.

  2. Edit the .cmp file to wrap the QuanticStandaloneSearchBox component. Be sure to set the implements option of your Aura component to forceCommunity:searchInterface, so that you can use it in the header of your Experience Cloud site. Also, be sure to set the engineId value to the one used in the target main search page (see Usage).

    <aura:component implements="forceCommunity:searchInterface"> 1
  <aura:attribute name="engineId" 2
                  type="String"
                  access="global" />
  <aura:attribute name="placeholder"
                  type="String"
                  access="global" />
  <aura:attribute name="numberOfSuggestions"
                  type="Integer"
                  access="global" />
  <aura:attribute name="redirectUrl"
                  type="String"
                  access="global" />
  <aura:attribute name="withoutSubmitButton"
                  type="Boolean"
                  access="global" />
  <c:quanticStandaloneSearchBox 3
                  engineId="{!v.engineId}"
                  placeholder="{!v.placeholder}"
                  numberOfSuggestions="{!v.numberOfSuggestions}"
                  withoutSubmitButton="{!v.withoutSubmitButton}"
                  redirectUrl="{!v.redirectUrl}"/>
</aura:component>
    1 As mentioned earlier, this informs your Experience Cloud site that your component should be considered a search box that can be used in your Experience Cloud site header.
    2 We will retrieve the engineId from the Experience Builder, and we do similarly for the other properties below.
    3 Wrap the QuanticStandaloneSearchBox component, setting the target property values. In this example we set the engineId property value, which is required, and four others, which are optional.

  3. In your .design file, expose the target attributes through the Experience Builder, optionally setting default values.

    <design:component>
  <design:attribute name="engineId" label="Engine Id" default="example-search-community"/> 1
  <design:attribute name="placeholder" label="Placeholder"/>
  <design:attribute name="numberOfSuggestions" label="Maximum number of suggestions" default="5"/>
  <design:attribute name="redirectUrl" label="Redirection URL" default="/global-search/%40uri"/>
  <design:attribute name="withoutSubmitButton" label="Display without submit button" default="false"/>
</design:component>
    1 Use the same engineId default value as you do in the target main search page.

  4. Set your custom component as the default Search Component of your Experience Cloud site.

    1. Access the Salesforce Experience Builder.

    2. In the left sidebar, select Theme > Theme Settings.

    3. Under Search Component, in the dropdown menu, select the name of your custom component.

  5. If needed, use the Experience Builder to configure the attributes of your component.

    Edit your custom standalone search box through the Experience Builder