Search Page Architecture
When the page is already created, you can use the Interface Editor to easily customize its layout and components.
<apex:page standardStylesheets="false" sidebar="false"> <CoveoV2:SearchInterface /> </apex:page>
A search page is composed of HTML tags complemented with well-known CSS classes. Each of these classes corresponds to a component to be instantiated during the initialization (see Components).
The HTML code below is generated by the Interface Editor when you publish your search page. It’s equivalent to the
<body> section of a standard web page.
<apex:component ><div id="search" class="CoveoSearchInterface" data-enable-history="true"> <div class="coveo-tab-section"> </div> <div class="coveo-search-section"> </div> <div class="coveo-results-section"> </div> </div> </apex:component>
Generating an initial search page is the best way to understand what happens behind the scenes. You can use the Interface Editor in Advanced Mode to discover all the available components and parameters, make changes, and switch between the Components and Code tabs to understand how the HTML code is modified.
In addition to the basic structure of a search page, it’s essential to understand the flow of events that allow for control and presentation of a search page (see JS.UI Events).