Site administration

Guides on how to administer the Waterlogic website

Main Navigation

The main Navigation has been developed using a custom Navigation builder that sits in a special resource. 

Contents 

 

Setting up the navigation

Each context will have a 'context settings' resource that sits at the bottom of the context tree. Open the resource and navigate to the template variables tab. Here you will be able to manage both the default navigation and footer. 

Step 1

cs_cat_nav.png

Figure 1

Table 1

Setting Description Default
Navigation align Centre align the Navigation or Left align. Centre align show only be used for the global context Left
Show basket in navigation? Toggle the visibility of the Wishlist basket. This should be set to No for the global context Yes
Navigation menu Controls the whole context navigation. To add a new item, click Add Item  unset
Single navigation links Add/ remove single navigation links. To add a new item, click Add Item  unset

 

Navigation menu

UeFcs_main_nav_top.png

Figure 2

Table 2

Setting Description Default
Navigation dropdown type Select the type of dropdown that this top-level navigation item will appear as. (see Table 3 for dropdown type examples) Title only
Navigation-link title Title of the navigation item  
Display navigation list as Select the type of navigation dropdown to show. If you want to use multiple columns then use columns. 

If the Navigation dropdown type is Megamenu this should be list.		 List
Navigation column title If Navigation dropdown type is Column you can set a title and description than spans the width of the column list

If left empty then both title and description will not show		 unset
Navigation column description  Adds a description to column below column title unset
Navigation columns Each navigation item needs a column which will hold the dropdown links.

If the 'Display navigation list as' is set to column you can add more than one column. If set to list only add ONLY one column.

See Table 4 & 5 for how each dropdown navigation will look and what data the dropdowns display		 unset
Mega menu text If Navigation dropdown type is MegaMenu you can define a call to action banner at the bottom of the dropdown.   
Mega menu link text Link text for CTA banner link  
Mega Menu Link ID ID of resource to link CTA   
Mega Menu CTA Colour CTA Banner colour Orange
Link Only Resource ID Resource id to link to when using the 'Navigation dropdown type' of 'link only'  

Table 3

Navigation dropdown type Description
Title only Displays a dropdown with just the navigation item title
Title + Description Displays a dropdown with the navigation item title and a description of the linked resource 
Title + Icon Displays a dropdown with the navigation item title and a Waterlogic Icon which represents the resource
Title, Icon + Description Displays a dropdown with the navigation item title, a description of the linked resource and a Waterlogic Icon which represents the resource
Mega Menu Displays items in a row with an Icon and resource title. The bottom of the dropdown has a call to action banner with text and a link to a resource
Link Only Displays a simple link within then menu (no dropdown functionality). Only Link Only Resource ID needs to be populated for this to work. 

Table 4

cs_dropdown_type_6.png

Figure 3

cs_dropdown_type_5.png

Figure 4

cs_dropdown_type_4.png

Figure 5

cs_dropdown_type_3.png

Figure 6

cs_dropdown_type_2.png

Figure 7

  

cs_dropdown_type_1.png

Figure 8
 

Step 2

Navigation columns

ac_nav_columns_migx.png

Figure 9

Table 5

Setting Description Default
Column title Add a title to this columns. If the parent Navigation Column title is set then this will not show. 

See figure 7 above for example of column title + descriptions on individual columns		 Unset
Column description  Description for column Unset
Items Add navigation items Unset

 

Step 3

Navigation Items

ac_nav_cols_items.png

Figure 10

Table 6

Setting Description Default
Resource title Menu title for the resource Unset
ID of resource to link to Enter the ID of the resource that this navigation link will link to  Unset
Resource description  If Navigation dropdown type includes a description this description will be shown Unset
Resource Icon  If Navigation dropdown type includes an Icon this Icon will be shown Unset

 

Single Navigation links 

These navigation links are located on the right-hand side of the navigation bar and are simple links to resources 

ac_simple_nav_links.png

Figure 11

Table 7

Setting Description Default
Resource ID Enter the ID of the resource that this navigation link will link to  Unset
Link title Menu title for the resource Unset
Font Awesome Icon Enter a Font Awesome icon to show instead of the title at smaller screen widths Unset
Show on desktop? Show this navigation item on desktop or only in the mobile menu? Unset

 

Aux Menu 

The AUX menu is represented by a Hamburger menu (3 stacked horizontal bars) on the far right-hand side of the navigation bar.

ac_aux_settings.png

Figure 12

Table 8

Setting Description Default
Show AUX Menu? Toggle the AUX menu On/ Off Yes
Aux menu Create AUX menu items  

 

 

Aux Menu items

ac_aux_menu_items.png

Figure 13 

Table 9

Setting Description Default
Link title Title of the menu item Unset
Link description  Description for this menu item Unset
Link resource ID ID of the resource to link to Unset

 

Locations 

The locations section allows you to show different types of links to translated resource.

ac_loc_settings.png

Figure 14

Table 10

Setting Description Default
Select location type Select the location dropdown type. By default, this is set to Local. But you can choose none to hide the Locations dropdown or Local to show only translated resources that relate to this location Local
Location dropdown title If the location type is global then this title will be used on the dropdown content (See figure 15) Unset
Location dropdown description If the location type is global then this description content will be used on the dropdown (See figure 15) Unset

 

The Global dropdown option produces the following dropdown on the navigation bar

ac_loc_global_fe.png

Figure 15

 

The Local dropdown option produces the following dropdown on the navigation bar

ac_loc_local_fe.png

Figure 16

 

Search 

The search section allows you to customise the search popup on the navigation bar.

ac_search_sett.png

Figure 17

Table 11

Setting Description Default
Show search in navigation? Show hide the search function in the navigation bar Yes
ID of search results page  Enter the resource ID of the search results page for this context Pulled from the Search result resource ID on the website Config settings
Search input placeholder text Set the placeholder text to use for the input. By default, this will us a lexicon entry Lexicon
Alternative search link ID  Resource ID of the alternative search link text  
Alternative search link text Text that sits below the search input field and is used to direct users to FAQ sections  

 

ac_search_fe.png

Figure 18

 

 

Main footer

The main footer has been developed using a custom footer builder that sits in a special resource. 

Setting up the footer

Each context will have a 'context settings' resource that sits at the bottom of the context tree. Open the resource and navigate to the template variables tab. Here you will be able to manage both the default navigation and footer. 

main-footer.png

Figure 1

Table 1

Setting Description Default
Footer navigation links Used to created columns to hold footer quick links  
Footer base navigation links Add links to the very bottom of the footer  
Small description The small description that sits under the Waterlogic logo in the footer  

ac_footer_fe.png

Figure 2

 

footer_nav_links.png

Figure 3

Table 2

Setting Description Default
Resource ID ID of the resource to link to  
Column title Title of the footer column link  
Items Column links  

 

 

footer_links.png

Figure 4 

Table 3

Setting Description Default
Resource ID ID of the resource to link to  
Link title Title of the link  

 

footer_links.png

Figure 5

Table 4

Setting Description Default
Resource ID ID of the resource to link to  
Link title Title of the link  

 

You can show/ hide a link to a location modal that shows all the different locations set in the Locations CMP. 

footer-geo-location.png

Figure 6

Table 5

Setting Description Default
Show the locations modal link? Show the link to locations modal in footer? No 
Footer location modal title Title of the location modal   
Footer location modal desc Content for the location modal   

main-footer-link.png

Figure 7

 

footer-loc-modal.png

Figure 8

 

 

 

 

 

 

Secondary header

Secondary headers sit below the main navigation and can be set on the context setting resource or on each individual resource with options for pages to inherit the secondary header of another resource. 

E6Osec_head_sett.png

Figure 1

sec_head_fe.png

Figure 2

Tabel 1

Setting Description Default
Show secondary header Ability to toggle the secondary header on/ off No 
Secondary header type Select the type of secondary header to use.

Default: will use the secondary header set in the context resource

Inherit: enables you to define a resource ID (Below) to inherit the header from 

Custom: Create a new secondary header for this resource		 Default
ID of resource to inherit the header from If the header type is set to inherit, enter the ID of the resource with the custom secondary header that this will show  
Secondary header title Title of the secondary header  
Secondary header description A short description for the secondary header (optional)  
Secondary header image Select an image to show beside the Header Title (optional)  
Secondary header Icon Select an icon to use instead of an image (optional -- If Icon is selected then above setting image, will not show)  
Add telephone numbers dropdown Add a dropdown with telephone numbers (Telephone numbers are defined in the context settings) Yes

 

Secondary header - Navigation 

sec_head_nav.pngFigure 3

Table 2

Setting Description Default
Secondary navigation items Add navigation items to the secondary header  
Secondary header buttons Add navigation buttons   

 

Secondary navigation items

sec_head_nav_item.png

Figure 4

Table 3

Setting Description Default
ID of resource ID of the resource to link to   
Nav title Navigation item title  
Dropdown items (optional) Add a dropdown with additional links   
 
Dropdown items

sec_head_nav_item_drop.png

Figure 5

Table 4

Setting Description Default
ID of resource ID of the resource to link to   
Title Navigation item title  

 

Secondary header buttons

sec_head_but_sett.png

Figure 6

Table 5

Setting Description Default
ID of resource ID of the resource to link to   
Modal ID Select a modal ID to popup when clicked. IMPORTANT: Each resource where THIS secondary navigation is used must contain the modal to work. If modal ID is entered overwrites resource ID link  
Is this a call button? If this is a call button choose "Yes". Modal and resource fields will be ignored. (This setting adds logic to the button to allow the chat popup to appear. Each context must have chat JS applied to trigger chat to open.)  
Link title Title of the button  
Button colour Colour of the button  
Hide this button on mobile Toggle button visibility on mobile   

 

Secondary Header CTA

sec_head_sta.png

Figure 7

Table 6

Setting Description Default
Secondary header mobile CTA link ID ID of the resource to link to for the mobile CTA button  
Secondary header mobile CTA link text Text of the mobile CTA button If left empty will hide the button
Secondary header mobile CTA link colour Colour of the button  

 

 

 

 

 

 

Breadcrumbs

Breadcrumbs can be controlled and managed on a per resource basis. Settings can be found under template variables heading > Breadcrumbs category.

breadcrumb_tv_settings.png

Figure 1

 

Setting Description Default
Add breadcrumbs to web page Option to show breadcrumbs or hide No 
Start ID of Breadcrumbs  Breadcrumbs typically show every parent up to the Home page of the website. You can specify and ID to reduce the number of links in the breadcrumbs if the resource is a deeply nested child. 

 Empty (Will use home as start)
Breadcrumb colour Specify the colour of the breadcrumb links, useful for when breadcrumbs sit ontop of sections with a dark background colour Default 

 

Geo location modal

The Geo location modal is used on the global context and helps redirect users to the best matching Waterlogic website. 

You can select the type of modal to show by updating the settings in the Website configuration 

ip_modal-sett.png

The location modal type can be plain or with an image. If you select the with an image option you can choose the image displayed using the Location modal image setting.

Cookie Modal

The cookie modal is shown to users who visit Waterlogic websites that need to show a cookie message. The content of this modal can be edited from the site config. The privacy policy link relates to the context setting for the privacy policy ID. 

cookie_modal.png

Location Modal

The location modal is shown to users who visit the global website or visit as website in a different language that the user's browser language and presents the user with an option to visit a site local to their language or to continue browsing. 

geo-modal-sett.png

Figure 1

Table 1

Setting Description Default
Location modal type Select the type of location modal to show. Plain is a simple modal with text, while with image shows a modal with an image plain
Location modal image Image to show if type is with image  

Content is controlled in the geo_ip_modal lexicon settings. To set the global context configuration for the modal you need to update the plugin properties. Edit the geo_location_browser_lang plugin properties with the following details

ge-plugin-props.png

Figure 2

Table 2

Setting Description Default
global_ctx The context key of the global context web
global_culture_key Culture key of the global context en
global_locale The locale of the global context en_GB
global_name Name of the global website Global
global_site_url Full URL of the global site  

Preview 

loc-mod-plain.png

Figure 3

With image

loc-mod-img.png

Figure 4

Below is an example of the modal shown when a user with a default browser language of Spanish visits an English website (note that the button visit Waterlogic United States is being shown due to changing the language of the website in the Location CMP for testing. Normally this will show a link to the translated website). 

geo-modal-es.png

Figure 5

 

 

Creating website Icons

Quote wishlist