Search Boxes

These examples are based on the default theme.

Search box in upper right of header

Viewlet: plone.searchbox code found in

/Plone/portal_view_customizations/zope.interface.interface-plone.searchbox

----------------

Portlet search box

This is particularly worth customizing because the default placement of the search field and search button on the same line runs afoul of the bounding box of the portlet.

Modifying the Portlet TTW (Through the Web)

This is not the preferred method. See below for the preferred method using a Theme Product. The Search portlet code can be found in the ZMI at

/Plone/portal_view_customizations/zope.interface.interface-search.pt

view name
search.pt
registered for interface
zope.interface.Interface
registered for request type
zope.publisher.interfaces.browser.IDefaultBrowserLayer
template file
plone.app.portlets.portlets/search.pt
zcml file
plone.app.portlets.portlets/configure.zcml

----------------------

Modifying the Search Portlet using a Theme Product

Martin Aspelli has the definitive solution in Professional Plone Development, page 134. Excerpted here:

Portlets

Finally, we will customize the view of the search portlet, which we will use in the
left-hand side column to display a search box. In configure.zcml, we have:

<configure
    xmlns="http://namespaces.zope.org/zope"
    xmlns:browser="http://namespaces.zope.org/browser"
    xmlns:plone="http://namespaces.plone.org/plone"
    i18n_domain="optilux.theme">

<include package="plone.app.portlets" />
...
<plone:portletRenderer
    portlet="plone.app.portlets.portlets.search.ISearchPortlet"
    layer=".interfaces.IThemeSpecific"    
    template="templates/search_portlet.pt"
/>
</configure>

We have to make sure that we include the plone XML namespace as well as the more common zope and browser ones. We also include the plone.app.portlets package, to make sure that its ZCML directives are processed before the new renderer is defined. This is because the <plone:portletRenderer /> directive makes use of the initial portlet registration to provide some defaults for the new renderer. This saves a lot of typing, and reduces the chance of subtle errors.

For regular browser views and viewlets—which are architecturally simpler—it is not necessary to ensure that the original registration is processed before the customization.
The <plone:portletRenderer /> directive references a portlet by its interface. All of Plone's standard portlets are found plone.app.portlets.portlets. As before, we specify a layer, and then reference a template.

Unlike the <browser:page /> and <browser:viewlet /> directives, we will actually get the original portlet renderer class if we do not specify a class directly. This
is available to the template using the implicit variable view. The template,
search_portlet.pt, is based on search.pt in plone.app.portlets.portlets, and looks like this:

<snip> You can get a copy of the search.pt and modify it as you need </snip>

Modifying the Search Portlet through the web

The template for the Search Portlet is stored here in the ZMI:

/portal_view_customizations/zope.interface.interface-search.pt

It utilizes livesearch.js which is stored here:

/portal_skins/ecma_script/livesearch.js

References:

Practical Plone 3, Clark et al, page 382

Prodessional Plone Development, Martin Aspelli, page 134

Document Actions

Print this