Search Theme Object

OVERVIEW

This article is meant to help you integrate Hotcakes Commerce search functionality directly into your store design to automatically allow the store to help your customers find products in your store.

REQUIREMENTS

The following information is required to already be known:

• How to design for the CMS, sometimes called “skinning”
• How to write and manipulate HTML and CSS
• Basic understanding of ASP.Net server/user controls (or copy/paste)

Though the term has since been changed to "theme," skinning and skin objects may be new terms to you.  Basically, they are unique terms that describe skills that you probably are already using on a daily basis.

GETTING STARTED

In order to implement a theme object into your theme (design), it would be necessary for you to first create a theme.  Once you do, this documentation will help you know what you need to know in order to add the theme object to your theme. 

SEARCH THEME OBJECT

The search theme object is a snippet of code that you add to your design.  If you're familiar with the underlying CMS (DNN), the search object works almost identically.  

How is this Different from DNN?

Again, the DNN search theme object and the Hotcakes search theme object are nearly identical.  However, in order to maintain usability in your site design and search results functionality, this search theme object should be used instead of the DNN search theme object.  The reason being that this theme object will persist the search values typed by the customer.  Both theme objects will send the customer to the desired search results page. as defined in your Site Settings.

How to Use in Your Theme

The theme object is part of your Hotcakes Commerce installation.  Therefore, there are no additional downloads or installation for you to worry about.  As long as Hotcakes is installed, this theme object will work when your theme is installed.

Once your theme is ready for the theme object, copy and paste the following values into the HTML of your theme.  This code sample assumes you’re doing the ASCX method of them design.  The only other thing you'll need to worry about after this is the desired CSS or HTML changes that you want to have applied in your custom viewset.

Header Area

The following code snippet is used by developers and designers alike in ASP.Net websites to tell the design where the code lives.  You can think of this like a server-side include. 

<%@ Register TagPrefix="hcc" TagName="HCSKINSEARCH" Src="~/DesktopModules/Hotcakes/SkinSearch/Search.ascx" %>

Design Area

You should already have an idea of where you want the search functionality to appear on your page.  That being said, like any other design element, it could always be moved later. 

Copy and paste the snippet below into the desired area of your design.

<hcc:HCSKINSEARCH runat="server" />

Save your design file and you are done…  It will just work once your store is live and accepting search queries, provided that you put the Hotcakes Search module on your search results page.

HTML Output

The HTML that this theme object will output to the web browser will look something like the following, unless you modify it in your custom viewset.

<div class="hcMvcView hcSkinObject">
	<div class="hc-search clearfix">
	<div data-action="http://yourdomain.com/Search-Results" data-method="get" data-moduleid="-1" data-skipxy="true" data-type="form">
		<input type="text" class="hc-search-bar" name="search" />
	        <input type="image" class="hc-search-button" value="" />
	</div>
	</div>
</div>