Quick Search Widget
Quick Search Widget
The default listing search form for rIDX is called the Quick Search Widget or QSW for short. The widget is dynamically generated based upon the MLS market schema for whichever market the widget is associated with in the configuration.
Default Quick Search Widget on the 2012 WordPress theme.
Advanced Options The advanced options portion of the widget opens with a simple jQuery function. A cookie is also used with the function call to keep track of whether the advanced options are open or not. If, as a user, you open the advanced options tab and then refresh the page or leave and come back to the page the website will remember your last setting based upon this option.
The Quick Search Widget with Advanced options open.
Quick Search Widget Field Customization
There are several filters and hooks available to customize the output and functionality of the quick search widget of rIDX.
Quick Search Widget Filters
General Filter
Filters template variables before widget get rendered.
function ridx_quick_search_widget($vars, $args, $instance)
{
var_dump($vars);
var_dump($args);
var_dump($instance);
return $vars;
}
add_filter('ridx_quick_search_widget', 'ridx_quick_search_widget', 10, 3);
Polygon/Location filter
function preset_polygon_field($vars, $widget_id)
{
if (is_front_page())
{
// Polygon ID to Location Label
return array(
'$c40d95047887f90e18504f7766a3c27a' => 'ScotTsdAle'
);
}
return $vars;
}
add_filter('ridx_search_widget_polygon', 'preset_polygon_field', 10, 2);
Price Range Selection List Array Filters
function priceMin($array)
{
return array(10000, 20000, 30000);
}
add_filter('ridx_search_widget_price_min', 'priceMin');
function priceMax($array)
{
return array(40000, 50000, 60000);
}
add_filter('ridx_search_widget_price_max', 'priceMax');
Lease Price for Rentals
function leasePriceMin($array)
{
return array(1000, 2000, 3000);
}
add_filter('ridx_search_widget_lease_price_min', 'leasePriceMin');
function leasePriceMax($array)
{
return array(4000, 5000, 6000);
}
add_filter('ridx_search_widget_lease_price_max', 'leasePriceMax');
Home Size SqFt
function sqFt($array)
{
return array(500, 1000, 1500, 2000);
}
add_filter('ridx_search_widget_sqft', 'sqFt');
Lot Size Acres
function acres($array)
{
return array(500, 1000, 1500, 2000);
}
add_filter('ridx_search_widget_acres', 'acres');
Baths
function baths($array)
{
return array(2, 4, 6, 8);
}
add_filter('ridx_search_widget_baths', 'baths');
Bedrooms Min/Max
function bedsMin($array)
{
return array(2, 4, 6, 8);
}
add_filter('ridx_search_widget_beds_min', 'bedsMin');
function bedsMax($array)
{
return array(12, 14, 16, 18);
}
add_filter('ridx_search_widget_beds_max', 'bedsMax');
Bedrooms filter for Beds-Baths fieldset: ridx_search_widget_beds
Beds field types filter (Default: beds)
function beds_field($type, $choices)
{
$type = 'beds_baths';
return $type;
}
add_filter('ridx_search_widget_beds_field', 'beds_field', 10, 2);
Baths field types filter (Default: baths)
function baths_field($type, $choices)
{
$type = 'baths_range';
return $type;
}
add_filter('ridx_search_widget_baths_field', 'baths_field', 10, 2);
Redefine property types by combining multiples types and giving them new labels.
function property_types($propertyTypes, $market)
{
if (strtolower($market) == 'sandicor')
{
// Combine values and define custom labels
$propertyTypes = array(
'Detached' => 'Houses',
'Rowhome|Townhome|Twinhome' => 'Townhomes'
);
}
return $propertyTypes;
}
add_filter('ridx_search_widget_property_types', 'property_types', 10, 2);
Form Field Filters
Each field within the quick search widget form has a filter, which allows to overwrite every single setting of the field before it gets rendered. Filter Handle ridx_search_form_field_ + {field name, which is the name attribute} Default field settings that can be altered:
$fieldSettings = array(
'type' => 'text', // Field Type
'name' => false, // Field Name
'label' => false, // Field Label
'labelAfterField' => false, // Label to be rendered after the field
'atts' => array(), // Field Attributes
'before' => false, // Before fieldset
'after' => false, // After fieldset
'beforeField' => false, // Before the field
'afterField' => false, // After the field
'value' => false, // Field value
'currentValue' => null, // Currently selected value
'isArray' => false, // Field is an array (appends [] to field name)
);
Removing a field: Use filter hook: ridx_search_form_field_ + {field name}
Example: This will remove the Location field with name “polygon” (you can see it in HTML markup)
function remove_polygon_field($vars)
{
return;
}
add_filter('ridx_search_form_field_polygon', 'remove_polygon_field');
Change the Label for Keyword Field
function ridx_modify_keyword_label($vars)
{
$vars['label'] = 'Your Custom Message <span class="idx-icon-info"></span>';
return $vars;
}
add_filter('ridx_search_form_field_keyword', 'ridx_modify_keyword_label', 10);
Sample QSW Placeholder Filters
Bedroom Field Custom Placeholder
/**
* Changes the placeholder text on the QSW Bedroom Field
*
* @param $fieldSettings
* @return mixed
*/
function hji_qsw_bedrooms_placeholder( $fieldSettings ) {
$fieldSettings['atts']['placeholder'] = 'Bedrooms';
return $fieldSettings;
}
add_filter( 'ridx_search_form_field_beds', 'hji_qsw_bedrooms_placeholder' );
Bathroom Field Custom Placeholder
/**
* Changes the placeholder text on the QSW Bathroom Field
*
* @param $fieldSettings
* @return mixed
*/
function hji_qsw_bathrooms_placeholder( $fieldSettings ) {
$fieldSettings['atts']['placeholder'] = 'Bathrooms';
return $fieldSettings;
}
add_filter( 'ridx_search_form_field_baths', 'hji_qsw_bathrooms_placeholder' );
Price (min and max) Field Custom Placeholder
/**
* Changes the placeholder text on the QSW Price Fields
*
* @param $fieldSettings
* @return mixed
*/
function hji_qsw_pricemin_placeholder( $fieldSettings ) {
$fieldSettings['atts']['placeholder'] = $fieldSettings['label'];
return $fieldSettings;
}
add_filter( 'ridx_search_form_field_listPrice', 'hji_qsw_pricemin_placeholder' );
Quick Search Form Filter
Filter handle: ridx_search_form_ + {listing type: residential|rental|multifamily|land|commercial}
$defaultFormSettings = array(
'id' => 'sm-quick-search-' . $listingType,
'name' => 'sm-quick-search',
'classes' => false,
'atts' => false,
'action' => $this->_form_action($instance),
'mainFields' => $mainFields,
'advancedFields' => $advancedFields,
'doSettings' => $this->_search_btn_field($instance, $listingType),
'widgetInstance' => $instance
);
There is no easy way of selecting from available fields that can be added/removed. At least not at this time. While you can remove existing fields, because they are already pre-defined, you can’t add another one as easy. If you really need to add an extra field, you can define one and push into an array of fields for selected form. Here are a couple of working examples. [ https://gist.github.com/maxchirkov/f56b30fbf785c86dda78]
function add_extra_mls_field($vars, $widgetModel)
{
// Start creating custom field
// Check if search value has been set
$currentValue = $widgetModel->getParam('id');
// Define field properties
$fieldProperties = array(
'type' => 'text',
'name' => 'id',
'label' => 'MLS #',
'atts' => array(
'id' => 'id',
),
'before' => '<div class="row">',
'after' => '</div>',
'value' => $currentValue,
);
// Create field's HTML view
$listingIdField = $widgetModel->createFormField($fieldProperties);
// Add field into the array of current fields
// - as an example I'm adding it as a first field
$vars['mainFields'] = array('id' => $listingIdField) + $vars['mainFields'];
return $vars;
}
add_filter('ridx_search_form_residential', 'add_extra_mls_field', 10, 2);
function add_extra_status_field($vars, $widgetModel)
{
// Start creating custom field
// Check if search value has been set
$currentValue = $widgetModel->getParam('status');
// Get status values supported by current market and listing type
require_once(\hji\ResponsiveIDX\ResponsiveIDX::$models . '/MarketMetadata.php');
$MarketMetaData = \hji\ResponsiveIDX\models\MarketMetadata::getInstance($vars['market']);
$statuses = $MarketMetaData->getStatuses($vars['listingType']);
// Define field properties
$fieldProperties = array(
'type' => 'select',
'name' => 'status',
'label' => 'Status',
'atts' => array(
'id' => 'status',
),
'before' => '<div class="row">',
'after' => '</div>',
'value' => $statuses,
'currentValue' => $currentValue
);
// Create field's HTML view
$statusField = $widgetModel->createFormField($fieldProperties);
// Add field into the array of current fields
// - as an example I'm adding it as a first field
$vars['mainFields'] = array('status' => $statusField) + $vars['mainFields'];
return $vars;
}
add_filter('ridx_search_form_residential', 'add_extra_status_field', 10, 2);
Customizing QSW listing type selector
Quick Search Widget supports search by the following listing types: residential, rental, commercial, multifamily, land, farm. Since searches can be performed only for 1 listing type at once, QSW generates a separate search form for each listing type.
By default, QSW comes with 2 listing types selectors: selection list and radio buttons. Both selectors are rendered via the same view: quick-search-type-selector.phtml
To customize listing types selectors choices available in the widget dashboard, use this filter: quick-search-listing-type-selectors
You will also need to overwrite the default view, by copying it into your theme and editing it to account for your new selector choice.
Search Filters in the Admin Widget UI
Add new filter to the widget UI: ridx_ui_search_filters_schema Add a label to filter field in the widget UI: ridx_field_labels
Implementation example: [ https://gist.github.com/maxchirkov/c426965df7a0422f6719 ]