Fast Simon

1. Create a page for displaying search results

Create a page and add this shortcode

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;
  }
}

Add the following code to Template >> JavaScript to make the categories and subcategories on a filtered search result, refresh and link to the correct CMS page.

<script>
document.addEventListener('DOMContentLoaded', function() {
const $main = document.querySelector('#fast-simon-serp-app');

setTimeout(() => {
const shadowRoot = $main.shadowRoot;

// Add a click event listener to the parent .category-items element
shadowRoot.addEventListener('click', function(event) {
const target = event.target;

// Check if the clicked element is an <a> element inside .category-items
if (target.matches('.category-items a')) {
console.log('%cPage refreshed!', 'color: pink; font-weight: bold;');
location.reload();
}
});
}, 1000); // Seconds to wait before the script is fired. In milliseconds
});
</script>