Fast Simon

1. Create a page for displaying search results

Create a page and add this shortcode

[[fast-simon-search-result]]

2. Enable Fast Simon integration & Sync products

After you enter all information, you can hit the Sync All Products button for the initial syncing. After that, every time you create/update/delete a product, CMS Max will automatically sync that product to Fast Simon, you don't need to do it manually.

After the sync is finished, you will get an email from Fast Simon.

You can also check the sync progress in your Fast Simon dashboard at: https://dashboard.instantsearchplus.com/settings

Note: You must enable the REST API from Fast Simon dashboard to see the API Key.

3. Test if the search result page works

Add the ?q={search prompt} to the page URL we created in step 1. For example: https://master.cmsmax.com/search-results?q=tie.

Then visit the page to see the result.

4. Optional: Add an instant search bar in the header (For the frontend team).

Here is an example of /custom/view/partials/header-search-form.blade.php

<div class="header__search-form">
    <x-fast-simon.instant-search/>
</div>

You can also customize that instant-search component by overriding the slot:

<div class="header__search-form">
    <x-fast-simon.instant-search>
      // Custom code goes here
      <x-fast-simon.search-bar label="Search" placeholder="What are you looking for?" name="search"/>
    </x-fast-simon.instant-search>
</div>

Make the search bar visible when it's still focused so the user can click the suggestion section.

In resources/assets/saas/custom/_header_search_form.scss

&:hover > .form-group > input,
&:active > .form-group > input,
&:focus-within > .form-group > input {
  @include media-breakpoint-up(xl) {
    width: 230px;
    visibility: visible;
  }
}