redPRODUCTFINDER:Working with the search engine front-end

From redWIKI
Jump to: navigation, search

To make your customized redPRODUCTFINDER search engine available to site visitors, you can use a menu item, the redPRODUCTFINDER form tag or one of the two available modules.

Contents

redPRODUCTFINDER Menu Item

Simply create a new menu item using the "Redproductfinder Layout". (Note: While there are two menu items listed under the redPRODUCTFINDER set, "Redproductfinder Layout" and "Searchresult Layout", you do not need to use the second one as it will have no visible difference.)

RedPRODUCTFINDER---Menu-items.jpg

redPRODUCTFINDER displays one single search form, listing all types and tags available for the selected form and a "Search" button. In Joomla! 1.5, you can expand the "Parameters (Component)" panel to reveal all the options available to configure the form this menu item leads to and all the functional and presentational settings that are available in redPRODUCTFINDER's global configuration. You can choose to override the settings or leave them be. You can also choose to leave out the specific form selection, in which case a drop-down will be displayed listing all the forms that customers can choose to search from.

RedPRODUCTFINDER---Menu-item-details.jpg

Click on the redPRODUCTFINDER menu item link on the front-end to bring up the product search form. Types will be displayed with their tooltips, and tags will be displayed according to the selector type. The visitor can make their choices and then click on the "Search" button.
RedPRODUCTFINDER---Article-results.jpg

This will bring up the Search Results page, listing all products related to the tags that were chosen. Each product will be displayed with its title (as a clickable link) and either its long or short description, price and the "add-to-cart" button depending on the global / menu item setting. If there are no relevant results, the message "Your search has not found any products" will appear.

RedPRODUCTFINDER---FINDER-module-results.jpg

At the bottom of the Search Results page, there is a button to run the "Search again" which will return you to the search form. There is also a "Link to this result" which can be shared with others or stored for later reference that will return these exact results whenever it is accessed.


redPRODUCTFINDER Form tags

RedPRODUCTFINDER---Forms-listing.jpg

RedPRODUCTFINDER---Article-test.jpg

RedPRODUCTFINDER---Article-results.jpg


Modules

As of the latest release, redPRODUCTFINDER comes with two modules: redPRODUCTFINDER and redPRODUCTFILTER. Each serve different purposes and add to the search experience in different ways.

redPRODUCTFINDER

RedPRODUCTFINDER---FINDER-module-params.jpg

This module allows you to display a form in one of the template module positions, and it comes with several presentation settings. Running down the list of available module parameters, you can select a specific form to be displayed or leave the setting be to display all types from all forms. If a form has been selected, you can choose to display all its available types and tags or choose to display only the set of tags specific to one type.

The "Pre-text" field offers a space to put in some brief notes or instructions to be displayed along with the form in this module. If you wish to attach a web address link to those notes, you can "Enter the Pre-text URL" in the space provided and set "Is pre-text a link?" to Yes.

A module class suffix can be stored to add a CSS style hook, followed by three presentation settings. * * Show search criteria - displays a space for customers to type in their search terms (which will make use of any tag or product aliases that have been stored),

You can assign a "Default Item ID" to the search results page generated through this module; this can be handy when wanting to assign specific modules to this page. Finally, you can have the search only return results for products which were added to the shop in specific months.


When published on the front-end, the redPRODUCTFINDER module will display the form and behave just like the menu item or article tag.

RedPRODUCTFINDER---FINDER-module-front.jpg

RedPRODUCTFINDER---FINDER-module-results.jpg


redPRODUCTFILTER

RedPRODUCTFINDER---FILTER-module-params.jpg

This module displays all the available filters stored in the "Filters" section of redPRODUCTFINDER. It has two available menu parameters; a "module class suffix" to add a CSS style hook, and a space to enter the ID of the redSHOP category template that should be used to display filtered results. You can leave this blank and the default category template will be used.

When published on the front-end, the redPRODUCTFILTER module will display all published filters and the tags selected for each one. Next to those is a count in brackets that displays the number of matching products.

RedPRODUCTFINDER---FILTER-module-front.jpg

RedPRODUCTFINDER---FILTER-module-results.jpg

You can select any number of filters, provided that there are matches for them. Clicking on a filter will load a page listing all matching products using the category template assigned. The redPRODUCTFILTER module listing will also get refreshed to reflect the filter currently selected and an updated number of product matches for all other filters. The page will get updated only when filters have been selected, you can remove or clear filters without requiring a page load.



Designing the redPRODUCTFINDER search form

You can modify the look and layout of the redPRODUCTFINDER search form and the search results page in different ways. First of all, a number of variations of the search results page template can be designed in redSHOP's Template Manager; simply create a new "Redproductfinder" type template. You can pick which one to use by default in the "redProductfinder Result Template" drop-down of the global configuration or for a specific form within its menu item parameters.

RedPRODUCTFINDER---FINDER-redshop-template.jpg

You can take advantage of the CSS style hooks that the default templates come with and add the style code to the site templates CSS file. Additionally you can save your style changes in the "redproductfinder.css" file located in the {root}/components/com_redproductfinder/views/assets/css folder.

You can also take advantage of the "Page Class" menu item parameter for the "redPRODUCTFINDER Layout" for additional style hooks.

CSS Style hooks


Search Form:
<div id="pfheader">
<div id="pfsearchheader">
<div class="hrdivider">
<div id='rep_search'>
<div class="inputfieldwrapper">
<div class="typename {type_name}">
<div class="typevalue {type_value}">


Search Results Page:
<div class="productfinder_product">
<div class="productfinder_productimage">
<div class="productfinder_titledescription">
<form name='addtocartredproductfinder{product_id}'>
<div class="hr">
<div id="link_search">
<div id="link_result">
<div id="link_returnurl">


Of course you can also create template overrides for the four pages; the original templates are stored in the {root}/components/com_redproductfinder/views/redproductfinder/tmpl folder,
redproductfinder.php - the search form
redproductfinder_ajax.php - an AJAX version of the search form
searchresult.php - the search results page
searchresult_template.php - the default redPRODUCTFINDER search results page template

Place your modified template overrides in the {root}/templates/{template_name}/html/com_redproductfinder/redproductfinder folder.

Personal tools
Variants
Actions
Navigation
Toolbox