Using Search Widget Templates

The default search widgets views are useful, but your site’s widgets likely need a specific design. You can choose from one of the available widget templates or create a new one. See Styling Widgets with Widget Templates for general information about creating templates for a widget’s display.

From each widget’s configuration, choose a template from the Display Template field. Available templates were created specifically for the widget you’re configuring, and are visible in the Global site or the current site at Site Menu (Site Menu) → DesignTemplatesWidget Templates.

From Instance Settings you can change the default template for a widget. When you add the widget to a page, it defaults to the configured template. Doing this requires getting the widget template’s key from the template editor.

You can set the default widget template in the instance scope and override it in the widget scope.

There are several out-of-the-box templates you can choose.

Using the Out-of-the-Box Templates

You can use the out-of-the-box widget templates as-is or as inspiration for creating your own widget template. Here’s a preview, so you can see which one works best for you.

Custom Filter

The Default template:

The default custom filter layout.

The Compact Layout template:

The compact custom filter layout.

The Default template:

The default search bar layout.

The Left Aligned Icon Layout template:

The left aligned search bar layout.

Note

The Left Aligned Icon Layout template does not support search bar suggestions.

Search Facets

A Default template is available for all search facet widgets:

The default search facet layout.

The Compact Layout template is available for all but the Modified Facet widget:

The compact search facet layout.

The Label Layout template is available for all but the Modified Facet widget:

The label search facet layout template.

The Cloud Layout template is available for the Tag Facet and Category Facet widgets:

The cloud search facet layout.

The Vocabulary Layout template is available for the Category Facet widget:

The vocabulary layout is available for the Category Facet widget.

The Radio Layout template is available for the Modified Facet:

The radio layout is available for the Modified Facet widget.

Search Results

The List Layout template is the default:

The default search results layout.

The Card Layout:

The card search results layout.

The Compact Layout:

The compact search results layout.

Similar Results

The Compact Layout template is the default:

The compact similar results layout.

The List Layout template:

The list similar results layout.

The Card Layout template:

The card similar results layout.

Creating a Search Widget Template

  1. Go to the site where you want to use the template.

    Note

    The out-of-the-box widget templates appear in the Global site. You can do the same or add yours to a specific site.

  2. Open SiteDesignTemplates.

  3. Click the Widget Templates tab.

  4. Click NewMore.

  5. From the list of widgets, choose the widget your template should target.

    Note

    The first listing for Search Results Template targets the Search Results widget, while the second listing with the same name targets the Commerce Search Results widget.

  6. Using the editor’s predefined variables, create your template using FreeMarker.

  7. Click Save when finished, or Save and Continue to save your progress and continue working.

Once saved, you can select the template from the widget configuration.

You can accelerate template development by copying an existing template and modifying it as needed:

  1. Go to the Global site. Click Select Site (Go to Site) → My SitesGlobal.

  2. Open SiteDesignTemplates.

  3. Click the Widget Templates tab.

  4. Search for the title of the template to copy. For example, search for compact to start with the Compact Layout template.

  5. Find the entry for the widget you want, then click Actions (Actions) → Make a Copy.

    You can copy an existing template.

  6. Using the editor’s predefined variables and your own FreeMarker, create the template.

    Use the editor to create the template.

  7. Click Save when finished, or Save and Continue to save your progress and continue working.

Once saved, you can select the template from the widget configuration.

Example: Extending the Search Results Widget’s Compact Layout Template

This example extends the Compact Layout template to include the last modified date of the result:

  1. In the Global site’s menu, open SiteDesignTemplates and click the Widget Templates tab.

  2. Search for compact, then click Actions (Actions) → Make a Copy for the Search Results Template.

  3. Name it Compact with Details.

  4. Your copy appears in the list with the others, so click Compact with Details to begin editing.

  5. Replace the template’s list item block (the code from <li> to </li>) with this code:

    <li class="c-mb-3 c-mt-3">
       <a class="link-primary single-link" href="${entry.getViewURL()}">
          ${entry.getHighlightedTitle()}
       </a>
       <details class="text-2">
          <summary>Details...</summary>
          <p class ="c-mb-0 c-mt-0">
             Last modified:<em>${entry.getModifiedDateString()?keep_before(",")}</em>
          </p>
          <#if entry.getModifiedByUserName()?has_content>
             <p class ="c-mb-0 c-mt-0">
                Edited by: <em>${entry.getModifiedByUserName()}</em>
             </p>
          </#if>
       </details>
    </li>
    
  6. Click Save.

It's convenient to start with a copy of an existing template.

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy