Quote query in no result page

[Lucas_Bonetti]

Hello.

I have a client asking if we could quote the search query in the no results page:

Is this something we could do?

Thank you.

[Liz_Frailey]

Hi Lucas,

Yes, this is possible! It will require that you override the theme for the templates > [pageTemplate] > script > verticalresults.hbs and to define your own custom partial for the alternative verticals component. Once you do that, you’ll need to include something like:
<span class="yxt-NoResults-query">{{query}}</span>

Here’s a more detailed example:

1. Run Tools > Jambo Commands > Override Theme and select the templates > [pageLayout] > script > verticalresults.hbs file. You’ll need to repeat this for all page types that you are using in your experience.

   

2. You’ll need to create a new file in the partials directory. Call it something like alternativeverticals-override.hbs.

3. Now you’ll want to override the SDK handblebars for the alternativeverticals layout. Assuming you want to keep the rest of the layout the same, except to update this text, you’ll want to copy and paste this file into the new file you created in step 2.

4. Now you’ll want to tell the verticalresults.hbs file that you shadowed in Step 1 to use the file you created and filled out in step 2 and 3. At the end of the verticalresults.hbs file you created in your top level templates directory in step 1, you’ll want to declare that you want to use this new partial. It should look like this (where the first line copied below was previously the last line in the file):

   {{{ json componentSettings.VerticalResults }}},
   {
     noResults: Object.assign(
       {}, 
       {{{ json componentSettings.VerticalResults.noResults }}},
       {
         template: `{{{read 'partials/alternativeverticals-override'}}}`,
       }
     ), 
   }
   ));
   

5. Using live preview, make sure that “no results” still renders on vertical search (make sure you test a vertical that is using the page layout you overrode in step 1). It should look exactly as it did before - that means you’re doing the right thing!

6. Finally, you are able to edit the text! You can add something like this

     <em class="yxt-AlternativeVerticals-noResultsInfo--emphasized">
         No se ha encontrado algún resultado
     </em>
   en {{currentVerticalLabel}} para <span class="yxt-NoResults-query">{{query}}</span>.
   
   

7. Repeat steps 1 and 4 for all vertical page templates used in your experience.

This is what it should look like when you’re done: