1. You are here:  
  2. Home
  3. Site Manager's Guide
  4. Search Widgets

This manual is being depreciated. Much of the information here is out of date.

The new Jomres Documentation, updated in 2022, can be found at Jomres.net/documentation.

Search Widgets

Required : Jomres 9.23.0 or later

 

Demo here

 

The Jomres Search widget is a plugin that uses the Jomres search functionality to provide a variety of different layouts of search forms.

These forms can be added to any page using shortcodes like [jomres task="search_widget" params="&search_widget=vertical_dates_stars" ]

 

horizontal dates sleeps

 

The plugin

The Search Widget plugin is a vehicle for delivering a variety of different Jomres template files. This is done for a number of reasons

  • Different search forms can be easily set on your pages, which saves time.
  • You are not limited to (in the case of Joomla) just 4 search modules.
  • All search forms will work on either Joomla or WordPress, there's no need for different plugins for different CMSs
  • They are an excellent way to demonstrate layout for users who are not familiar with Bootstrap's framework.

 

Currently the plugin provides 16 search forms, 8 in horizontal/in-line format and 8 designed for vertical layouts.

Once you have installed the plugin go to Administrator > Jomres > Tools > Shortcodes and in the table tool's search feature type in "search_widget"

You will be shown a number of different short code options that you can use to put a search widget anywhere you want in a page or location.

 

I want X_X_X options, not the defaults, can I do that?

Yes, you can.

Let's say that you want a horizontal form with dates, categories, sleeps and the town inputs. This would require a template called index.html in a directory called horizontal_dates_categories_sleeps_town which doesn't exist. So, we need to make our own, which is really easy.

You can use one of the existing templates as a base to work from. In this example I will copy the index.html from core-plugins/search_widget/horizontal_dates_categories to my custom templates location (See this page for information on custom template location information) and call it horizontal_dates_categories_sleeps_town.html

Now that I have a file to use, I will go back to the search_widgets plugin directory and open two more files, the index.html file from the horizontal_dates_sleeps directory and paste the section that deals with showing the sleeps markup :

<div class="form-group col-sm-4">
 <label class="control-label" for="guestnumber">{HGUESTNUMBER}</label>
 <div class="input-group">{GUESTNUMBER}</div>
</div>

and copy that into the override directory /com_jomres/html/horizontal_dates_categories_sleeps_town.html file.

Next I will copy the town markup from the index.html in horizontal_dates_towns

<div class="form-group col-sm-4">
   <label class="control-label sr-only" for="town">{JOMRES_SEARCH_GEO_TOWNSEARCH}</label>
   <div class="input-group">{TOWN}</div>
</div>

and copy that into the override directory /com_jomres/html/horizontal_dates_categories_sleeps_town.html file.

I will need to play around with the markup a little so that the layout looks right, for example you can't use sr_only (Bootstrap markup that makes an element only appear on screen readers) on the Sleeps option because that's too ambiguous, so we need column headers so that it looks right. The end result for the template file's content looks like this :

 

<patTemplate:tmpl name="search">
   <form action="{SUBMITURL}" method="get" name="{FORMNAME}" role="form" class="form-inline">
      <input type="hidden" name="option" value="com_jomres"/>
      {HIDDEN}
<div class="row">
 <div class="col-sm-2">
 <label class="control-label" for="arrivalDate">{HARRIVALDATE}</label>
 </div>
 <div class="col-sm-2">
 <label class="control-label" for="departureDate">{HDEPARTUREDATE}</label>
 </div>
 <div class="col-sm-2">
 <label class="control-label" for="categories">{_JOMRES_PROPERTY_HCATEGORIES}</label>
 </div>
 <div class="col-sm-2">
 <label class="control-label" for="guestnumber">{HGUESTNUMBER}</label>
 </div>
 <div class="col-sm-2">
 <label class="control-label" for="town">{JOMRES_SEARCH_GEO_TOWNSEARCH}</label>
 </div>
 <div class="col-sm-2">
 &nbsp;
 </div>
 </div>
 <div class="row">
 <div class="form-group col-sm-2">

 <div class="input-group">{ARRIVALDATE}</div>
 </div>
 <div class="form-group col-sm-2">

 <div class="input-group">{DEPARTUREDATE}</div>
 </div>
 <div class="form-group col-sm-2">

 <div class="input-group search-form">{CATEGORIES}</div>
 </div>
 <div class="form-group col-sm-2">

 <div class="input-group search-form">{GUESTNUMBER}</div>
 </div>
 <div class="form-group col-sm-2">

 <div class="input-group search-form">{TOWN}</div>
 </div>

 <div class=" col-sm-2">
 {THEBUTTON}
 </div>
 </div>
 </form>

</patTemplate:tmpl>

 

 

Finally, I will need a shortcode to show the new form,

[jomres task="search_widget" params="&template_file=horizontal_dates_categories_sleeps_town" ]  (Wordpress example)

{jomres search_widget &template_file=horizontal_dates_categories_sleeps_town} (Joomla example)

 

The resulting form looks like this :

which is perfect, it's what I was aiming for.

 

Note that I don't need the params="&search_widget=xxxxx" at all because I am sending a custom template file name.

 

 

 

 

Back to Jomres.net