ProductSearch

<TSC:ProductSearch>

IMPORTANT: Ektron has discontinued new development on its eCommerce module. If you have a license to eCommerce, you will continue to receive support, but if you need to upgrade, contact your account manager for options.

The ProductSearch templated server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. lets site visitors search your website for products. ProductSearch consists of the following components:

Input and output markup

InputView and ResultsView controls have a corresponding .ascx template that contains default markup. You can modify a template to change a control’s default markup. You can find the search control template files at the following locations:

[site root]\workarea\FrameworkUI\Templates\Search\ProductSearchInputView.ascx
[site root]\workarea\FrameworkUI\Templates\Search\ProductSearchResultsView.ascx

Process controller

The Controller control takes input from an InputView control, and returns search results to a ResultsView control. It provides an interface to the search API, giving search view controls access to search data. The Controller control executes a search using a query string from search InputView control’s Text property, as specified in the code-behind’s OnClick event. You may modify the Controller or write your own.

Unlike the other search controls, the Controller control has no UI functionality.

ProductSearchInputView

Use the ProductSearchInputView server control to search eCommerce Products. It provides a Basic and an Advanced search. The query string from the ProductSearchInputView control is passed to the ProductSearchController, which sends results to the ProductSearchResultsView.

The following image shows the default template for this control.

Click the Advanced link to show these product search filters.

  • With all words
  • Without words
  • Exact Phrase
  • With any word

ProductSearchController

The ProductSearchController server control takes input from a ProductSearchInputView control, and returns results to a ProductSearchResultsView control. It provides an interface to the search API, thereby giving SearchView controls access to search data.

  • You can modify Ektron's ProductSearchController or write your own.
  • The ProductSearchController executes a search using a query string from the ProductSearchInputView control's Text property, as specified in the code-behind's Onclick event.
  • Unlike the other search controls, ProductSearchController has no UI functionality. So, there is no corresponding .ascx file.
  • Use only 1 ProductSearchController per page.
  • See also:Properties for ProductSearchController .

ProductSearchResultsView

Use the SearchResultsView server control to show search results sent from a ProductSearchController.

The ProductSearchResultsView is tied to the ProductSearchController by setting the property ControllerID.

See also:Properties for ProductSearchResultsView .

The following image shows the ProductSearchView's search field and button and search results using the ProductSearchResultsView server control's default template. To see an example of displaying user search results, see [siteroot]\workarea\FrameworkUI\Templates\Search\ProductSearchResultsView.ascx.

Inserting ProductSearch Templated server controls

To provide search capabilities to your website content, insert all 3 components of the ProductSearch templated server control onto an .aspx template. Because the search functions are managed by separate controls, you can place a search field and button in a one section of a page, and the results in another.

Also, unless you want to use the default paging properties (which show only 10 results), insert an <TSC:Pager> control on the page to manage the paging of the search results.

Prerequisite

Search server controls were added to the Visual Studio Toolbox. See Adding search server controls to Visual Studio.

If you drag and drop controls from the Visual Studio Toolbox, the necessary register statements are copied from the web.config file and added to the page. 

<add tagPrefix="ektron" namespace="Ektron.Cms.Framework.UI.Controls" 
  assembly="Ektron.Cms.Framework.UI.Controls, Version=8.5.0.356, 
  Culture=neutral, PublicKeyToken=559a2c4fa21e63be" />
<add tagPrefix="ektronUI" 
  namespace="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  assembly="Ektron.Cms.Framework.UI.Controls.EktronUI, 
  Version=8.5.0.356, Culture=neutral, PublicKeyToken=559a2c4fa21e63be" />

If you copy and paste the sample code, add the following register statement for templated controls:

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls" 
  namespace="Ektron.Cms.Framework.UI.Controls" 
  tagprefix="ektron" %>

For Ektron UI controls, use this register statement:

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  namespace="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  tagprefix="ektronUI" %>

The tag prefix can be anything as long as it matches the control's prefix.

The following template shows the 3 components of the ProductSearch templated server control.

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="TemplatedControl.aspx.cs" 
  Inherits="TemplatedControl" ValidateRequest="false" %>

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls"
  namespace="Ektron.Cms.Framework.UI.Controls" tagprefix="ektron" %>

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  namespace="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  tagprefix="ektronUI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
  <body> 
    <form id="form1" runat="server">
     <div>
       <ektron:ProductSearchInputView ID="ProductSearchInputView1" 
          ControllerID="ProductSearchController1" runat="server">
       </ektron:ProductSearchInputView>
       <ektron:ProductSearchController ID="ProductSearchController1" 
         runat="server" />
       <ektron:ProductSearchResultsView 
         ControllerID="ProductSearchController1"
         ID="ProductSearchResultsView1" runat="server">
       </ektron:ProductSearchResultsView>
        <ektronUI:Pager ID="pager1" runat="server" 
         PageableControlID="ProductSearchController1" ResultsPerPage="10">
       </ektronUI:Pager>
     </div>
    </form>  
  </body>
</html>

Attributes for ProductSearch

Properties for ProductSearchInputView

  • ControllerID. The ID of the ProductSearchController that provides the data.
    <CMS:ProductSearchInputView ID="ProductSearchView1" 
  ControllerID="ProductSearchController1" runat="server">
</CMS:ProductSearchInputView>
<CMS:ProductSearchController ID="ProductSearchController1" 
  runat="server" />
  • ExactPhrase. Sets an EXACT ORDER relationship among search terms.
  • QueryText. The string used for searching.
  • SearchType. 1 of the following:
    • Advanced
    • Basic
    • None
    • XmlSearch
  • WithAllWords. Sets an AND relationship among search terms.
  • WithAnyWord. Sets an OR relationship among search terms.
  • WithoutWords. Sets a NOT relationship among search terms.

Properties for ProductSearchController

  • AdvancedQueryText (Optional). See Customizing the search behavior with AdvancedQueryText.
  • ID (Required). Provides the association for the SiteSearchInputView and SiteSearchResultsView server controls. Here is an example of the ID property with the SiteSearchController.
    <ektron:SiteSearchController ID="SiteSearchController1" 
  runat="server" />

Properties for ProductSearchResultsView

  • ControllerID. The ID of the UserSearchController that provides the data.
    <CMS:ProductSearchResultsView ID="ProductSearchView1" 
  ControllerID="ProductSearchController1" runat="server">
</CMS:ProductSearchResultsView>
<CMS:ProductSearchController ID="ProductSearchController1" 
  runat="server" />
  • PageInfo. Displays information about search result numbers, such as Displaying results 11 through 20 of 35.
    • CurrentPageIndex. Current page.
    • EndCount. Number of results found.
    • NumberOfPages. Number of results divided by results per page.
    • PageCount. Number of the page being viewed currently.
    • ResultCount. Number of the results returned for the search terms.

      IMPORTANT: The result count is only an estimate. The count becomes more accurate you get closer to the final page.

    • ResultsPerPage. Number of results displayed per page.
    • StartCount. 1.
  • QueryText. The string used for searching.
  • Results. The fields returned of ProductSearchResultsData. Display these inside a ListView or Repeater.
    • Catalog Number
    • ImageUrl
    • ListPrice
    • ProductID
    • SalePrice
    • SKU
    • Summary
    • Title
    • URL
  • SearchType. 1 of the following:
    • Advanced
    • Basic
    • None
    • XmlSearch
  • State. 1 of the following:
    • initialized. Search has not been run yet
    • no results. No search results were returned
    • search results. Search results were returned

Events for ProductSearch

None.

Methods for ProductSearch

  • Search(string queryText, string advancedQueryText)
    • Description: Basic search
      • queryText. The text you have in the INPUT text box.
      • advancedQueryText. The extra query text that is appended to the end of the queryText, which you do not want to show on the INPUT text box.
    • Return Type: None.
  • Search(string withAllWords, string withoutWords, string withAnyWord, string exactPhrase, string advancedQueryText)
    • Description: Advanced search
      • includes withAllWords, withoutWords, withAnyWord and exactPhrase.
      • advancedQueryText. The extra query text that is appended to the end of the queryText, which you do not want to show on the INPUT text box.
    • Return Type: None.

Theming for ProductSearch

Theming styles the appearance, including colors and background textures, using jQuery UI CSS Framework and Ektron UI CSS Framework. Use the ThemeRoller tool to create and download custom themes that are easy to build and maintain. If you want to customize it further, you can use control-specific classes referenced within the control’s markup.

<div id="uxProductSearchInput" class="ektron-ui-control
  ektron-ui-search ektron-ui-search-products">
  <div class="basicSearch">
    <span class="ektron-ui-control 
      ektron-ui-input
      ektron-ui-textField" 
      id="uxProductSearchInput_ctl00_0_uxSearchText_0_TextField_0_
        uxTextField_0">
    <input type="text"
      id="uxProductSearchInput_ctl00_0_uxSearchText_0_TextField_0_
        aspInput_0"
      name="uxProductSearchInput$ctl00$ctl00$uxSearchText$TextField$
        aspInput">
    </span>
    <span class="ektron-ui-button">
    <input type="button" autocomplete="off" value="Search Products"
       title=""
       onclick="WebForm_DoPostBackWithOptions
         (new WebForm_PostBackOptions
         ('uxProductSearchInput$ctl00$ctl00$uxBasicSearchButton', '',
         true, '', '', false, true));"
       name="uxProductSearchInput_ctl00_0_uxBasicSearchButton_0_Button"
       id="uxProductSearchInput_ctl00_0_uxBasicSearchButton_0_Button"
       class="ui-button ui-widget ui-state-default ui-corner-all"
       role="button">
    </span>
      <script type="text/javascript" id="uxProductSearchInput_ctl00_0_
        uxBasicSearchButton_0_uxProductSearchInput_ctl00_0_
        uxBasicSearchButton_0EktronScriptBlockptubr_0">
        <!--//--><![CDATA[//>
        <!--
        Ektron.ready(function(event, eventName)
        {
        $ektron("#uxProductSearchInput_ctl00_0_
          uxBasicSearchButton_0_Button").button();
        });
        //-->
        <!]]>
      </script>
  <div class="toggleAdvancedSearchWrapper">
    <a href="" 
      class="toggleAdvancedSearch" 
      id="uxProductSearchInput_ctl00_0_aspAdvancedSearchLink_0">
      Advanced Search
    </a>
    <a href=""
      class="toggleAdvancedSearchIcon toggleAdvancedSearch"
      id="uxProductSearchInput_ctl00_0_aspAdvancedSearchIcon_0">
      <span class="ui-icon ui-icon-triangle-1-s"></span>
    </a>
  </div>
</div>
 
      <script type="text/javascript"
        id="uxProductSearchInput_ctl00_0_uxScriptBlockSearch_0_
          uxProductSearchInput_ctl00_0_uxScriptBlockSearch_
          0EktronScriptBlockvbgsy_0">
           <!--//--><![CDATA[//>
           <!--
           Ektron.ready(function(event, eventName)
           {
             setTimeout("Ektron.Controls.Search.SiteSearch.init(
               { clientId: 'uxProductSearchInput_ctl00_0' })", 0);
           });
           //-->
           <!]]>
      </script>
</div>
<div id="uxProductSearchResults"
  class="ektron-ui-control 
    ektron-ui-search
    ektron-ui-search-results
    ektron-ui-search-results-products">
  <ul class="results">
    <li class="result     ektron-ui-clearfix">
      <div class="avatar">
        <a href="http://ws10548b/Products/Training/Developer-Training/">
          <img alt="Developer Training"
            src="http://ws10548b/uploadedImages/MainSite/Content/Store/
              Training/DevThumbnail.png"
            title="Developer Training"
            id="uxProductSearchResults_ctl00_0_aspResults_0_aspAvatar_0">
        </a>
      </div>
      <div class="resultsInfo">
        <h3 class="title">
          <a href="http://ws10548b/Products/Training/Developer-Training/">
            Developer Training
          </a>
        </h3>
        <div class="summary"></div>
        <ul class="ektron-ui-listStyleNone">
          <li class="sku     ektron-ui-quiet">
            SKU: 9546356754365
          </li>
          <li class="catalogNumber     ektron-ui-quiet">
            Catalog Number: 139
          </li>
        </ul>
      </div>
      <ul class="prices">
        <li><span class="listPriceLabel"
             id="uxProductSearchResults_ctl00_0_aspResults_0_
               aspListPrice_0">
               List Price
            </span>: <span class="listPrice">1300</span></li>
        <li><span class="salePriceLabel"
             id="uxProductSearchResults_ctl00_0_aspResults_0_
             aspSalePrice_0">
             Sale Price
            </span>: <span class="salePrice">1400</span></li>
      </ul>
    </li>
  </ul>
</div>

Example for ProductSearch

.aspx

<ektron:ProductSearchInputView ID="uxProductSearchInput"
  ControllerID="uxSearchController" runat="server">
</ektron:ProductSearchInputView>
<ektron:ProductSearchResultsView ID="uxProductSearchResults"
  ControllerID="uxSearchController" runat="server">
</ektron:ProductSearchResultsView>
<ektron:ProductSearchController ID="uxSearchController" runat="server">
</ektron:ProductSearchController>