This chapter covers navigation and searching possibilities inside shop content. Navigation in your online shop is one of the most important aspects of creating an effective website. The web page design and content is also important but without navigation your website can't completely work. Navigation must be simple and logical; thereby, you can increase the number of visitors who will return to your online shop.
This chapter describes how to organize common, supplementary, and linked content navigation. The topics covered are:
- Navigation by products, producer, and other references
- Navigation types
- Additional extensions (indexed search)
By the end of this chapter, you should have navigation and searching integrated into the online shop catalogue and content.
Like most functions in your web page, navigation is also included in the TYPO3 Core. For example, navigation in TYPO3 offers different kinds of menus, searching fields, and also a searching system. All the menus that you need to create can be done using TypoScript configuration. The kind of menus might be:
For a better understanding of how we can use these menus, we will survey the most frequently used examples separately—TMENU and GMENU. Note that HMENU is used for TMENU development. While developing HMENU, we didn't set up value entryLevel = 1; therefore, HMENU reads sitemap data from default—zero level.
We can say that TMENU use is a matter of taste. The statement "graphical menu (GMENU) charge server" isn't true because every image for the graphical menu is created and cached on server. Therefore, images wouldn't be created anew with each page view.
For creating a simple TMENU menu, we can use code examples; this lets us create one of the simplest menus with one level without any separator and unlock the outdated"onfocus="this.blur()" parameter:
TOP-MENU = HMENU
TOP-MENU {
1 = TMENU
1.wrap =
1 {
noBlur = 1
NO{
wrapItemAndSub = <span>|</span>
allWrap = |*| | |*|
}
The final result must be the text menu, as you can see in the following screenshot:
You can add visual elements or simple font files to graphical menus. The menu image will be generated from these elements. We can create a graphical menu like the one you can see in following screenshot:
Code for this menu will look like this:
SIDEMENU = HMENU
SIDEMENU.entryLevel = 1
SIDEMENU.1 = GMENU
SIDEMENU.1 {
### WRAP ALL MENU IN <ul> tag
wrap = <ul>|</ul>
noBlur = 1
NO {
wrap = <li class="menu">|</li> ### LIST (<li>) items class
XY = [10.w]+23, 30
format = gif
backColor = #636363
transparentColor = #636363
1 = IMAGE
### SET THE DECORATIVE ELEMENT WITH IMAGE
1.file = fileadmin/templates/img/leftgreen.png
1.align = left
1.offset = 5,8
10 = TEXT
10.text.field = title
10.fontFile = fileadmin/fonts/anivers.ttf
10.alttext.field = header // subheader
10.fontSize = 20
10.fontColor = #a2c83c
10.offset = 20,18
10.align = r
}
}
We created a menu that reads data from first level (not from base level); in this way, we created an unordered list menu with images that are decorated with an extra image. You can see in this example how a menu can be created with the default value "NO" but you can also supplement it using the value "ACT" for displaying individually active links.
Also, you can add some extra lines to GMENU using the field "subtitle". You can use this function if you need to add some information, for example, about "Products". Then, this subtitle could be "Our offer".
Note
Possible menu states are explained in more detail in the TypoScript reference documentation (tdoc_core_tsref), which you can find on the TYPO3 web page: http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/10/2/
So, you can add an extra subtitle field for the menu name and provide more information for your online shop visitors. Also, your page visitors can find the necessary information faster:
10 = TEXT 10.text.field = title 10.fontFile = fileadmin/fonts/anivers.ttf 10.alttext.field = header // subheader 10.fontSize = 20 10.fontColor = #a2c83c 10.offset = 20,18 10.align = r
After typing these code lines, add some extra lines:
20 = TEXT 20.text.field = subtitle 20.fontFile = fileadmin/fonts/verdana.ttf 20.alttext.field = header // subheader 20.fontSize = 10 20.fontColor = #a2c83c 20.offset = 50,18 GMENUGMENUcode20.align = r
You can see the final result in the following screenshot:
