The page header will be made up of the Otis logo, social media icons, Otis’s stock price, a search icon, regionalization icon and the navigation menu.
Social media links will display on the top right corner. The logo will display at the top left of the page header. There should be ability in the backend to control the relevant social media links. If no social media links are entered then the relevant icon (Twitter, Facebook etc.) should be linked to the global (US profiles).
Stock price will need to be pulled from the Yahoo Finance API. This should be requested periodically by the back end system and cached on the server.
As an example, here is a code snippet in PHP to request the stock price.
<?php $code = 'UTX'; $url = 'http://finance.yahoo.com/d/quotes.csv?s=' . $code . '&f=snd1l1yr'; $csv_file = file_get_contents($url); $elements = str_getcsv($csv_file); $stock_price = $elements; echo 'Stock price for' . $code . ': ' . $stock_price; echo '\n'; exit();
In the CMS you should be able to define the menu structure, the top level item should be limited to 10, please note, editors may need to be aware that in some cases, long menu items may need to reduce this number.
When a mouse cursor hovers over the menu, a mega menu dropdown area will expand underneath the main menu. Here the user can then browse and select a secondary navigation item.
The navigation should be populated automatically and split equally by the number of sections. For example, if there are two sub sections within “Modernisation” – there should be two columns within the mega menu dropdown, with the links for each section being automatically populated.
Within the CMS, the user should be able to manually override the number of columns desired within the mega menu dropdown. As well as being able to edit the column header text. Optionally, the user should then be able to create a manual link where they can enter some descriptive text, as well as adding a call to action button.
In the backend, there will be the ability to tick a box and determine whether an item should appear on the menu, which can be done by the global and regional administrators. This same logic applies when determining what items should appear on the second and third levels.
For example, in the services section of the UK website, there may be 3 subpages, however on the US site there may be 5 subpages. This means there could be a difference between the subpages displayed on the services sections for regional websites. Note, there will be the option to exclude the subpages being displayed automatically.
Clicking on the icon will produce an overlay containing a search box and submit button on the left of the overlay. Once you enter 3 characters in the search box, autocomplete options will begin to suggest results based upon the words entered into the box.
For the autocomplete search result, we expect API endpoints to return a JSON formatted response with the set of results for the entered string with a maximum of 10 results.
The user can continue to type (ignoring the autocomplete) and when hitting return on the keyboard or clicking submit, they will be taken to the search results page. An autocomplete search will take you to the specific page. For example, clicking on the SkyRise pop-up, users will be taken to the SkyRise page.
The right-hand side of the overlay will show the top 5 searches in your area, this will be based on the area (location) the user is currently in. As a result, the backend needs to store search queries and keep a tally of how many times a search has been made. The global admin or the administrator can manage the top searches listed for each country site.
Clicking on the close ‘X’ or the search icon will close the overlay.
Clicking on the icon will produce an overlay giving the option to choose the region, country and language.
The country dropdown menu is dynamic and will populate based on the country websites available within that region.
The visibility of the language field will depend on whether more than one language is available for the selected country.
In the event that there is more than one language available i.e. Canada (FR/ENG) the language selection box will appear on the right of the overlay. Clicking the submit button will take you to the relevant language website.
Note, the label/ title for each of the fields (region, country and language) should be displayed on their respective dropdown menus by default.
The header and footer navigation will be controlled by the global team, if there is no regional/local content, global page contents will show by default.
For the news article, photo gallery, contact us,