In this step, you will need to add the Cludo scripts generated from the search configuration into your MVC templates. The scripts you will be implementing include:
- Form ID - Attaches search functionality to a form
- CSS file - Basic styling for search added to the <head> of templates or pages you'd like search on
- Cludo search results (In-line template only) - Injects Cludo's results to the search results page, and should be added to the search results page
- Determine all templates/pages from which search will need to be available
- In-Line templates: Create a Search Results page on which to display search results
Step 1: Generate the specified template in Search Configurations
In this step, you will generate the scripts for your search engine on your MyCludo dashboard.
1. Go to your MyCludo dashboard. Select the specific engine you'd like to pull the implementation script for.
2. Go to Settings > Search Configurations.
Pick between the Inline and Overlay template and select Next.
The inline template will send a user to a new page for the search engine results. In the next step, set the design of the search page.
- No Categories: The search results will be displayed with the relevant pages for a search query
- Categories: The search results will be displayed with the relevant pages for a search query and sort them by the specified categories.
- Categories + Images: The search results will be displayed with the relevant pages for a search query and sort them by the specified categories and images.
Next, set up the configuration of the search.
- Search box: Enter the form ID of your search form. If you have trouble finding the ID of your search form, feel free to submit a support ticket and we can help!
- Search Results URL: Enter the URL in which the search results will appear
The last step of the setup is to implement the code and script onto your website. Simply copy and paste the code and script in the specified locations and you’re all set!
The overlay template will configure the search results page to overlay on top of the existing content on the page.
After selecting the overlay template set the design of the search. You can enter the hex code or use the color picker.
In step 3, you will set the configuration for the search.
- Create a search box for me: Cludo will set the search box in the top right corner or the top left corner.
- Use an existing search box: Enter the form ID of your search form.
Step 2: Add the scripts to your Sitefinity templates
Please note: The exact code you will add will differ from this example based on your unique customerId, engineId, and searchUrl, as well as on the template, language, and categories you chose in Step 1.
Implementation for all pages to search from
To implement the search, go to Design > Page Templates and select the templates you'd like to install Cludo search on. If you are implementing with pages, follow these steps for all pages you'd like to install the search on.
Cludo Code Step 1: Used the Embed Code widget to drop in the code for your search form in your Master and Mobile Master templates, or in every page where you want your search bar to appear:
Cludo Code Step 2: Include a link to the Cludo CSS stylesheet in the head tag of your Master and Mobile Master templates, or in the head tag of every page in which you want your search bar to appear:
Search Results Page-Specific
Go to Pages in your Sitefinity menu.
Cludo Code Step 4: Select the page created for your search results. Use the Embed Code widget to drop the <div> tags for your search results on the page where you want to display your search results:
Step 3: Test your Cludo site search!