Left Navigation Component Guide

The left navigation is a special component that is designed to be dragged and dropped into the iparsys (inherited parsys) at the left column of a three-column page of a parent web page and is inherited by all of its children pages. This component has some configurable elements, while its links are dynamically populated by the child and grand-child pages of the original page where the component begins.

Dropping the Left Navigation Component to a Parent Page

The Three Column page template has an iparsys at the top left column specifically designed to house the Left Navigation and propagate it down the site hierarchy.

When the component is dropped, the author must select a starting path, which typically should be the same page that the Left Navigation component was dropped in. After this configuration, the component scans all the children pages down to the second level and populates the navigation links with the titles and links to the respective child pages:

Rearranging the order of the sub pages in the site hierarchy would also reflect on the order of navigation links in the Left Navigation.

Additionally, if certain pages on the site that are on the same level (sibling) of the 1st and 2nd level child pages (i.e. Activity Services page or Running Data page), it will automatically show in the navigation. To prevent this from happening, the author can toggle the "Hide in Navigation" option in the Page Properties of the given child page.

Dec 2015

Left Navigation

General Page Information

Page title CMS-controlled.
Page URL  

How page was reached

  1. User entered URL directly.
  2. User arrived from external search.
  3. User navigates via the Left Navigation to access sub pages


  1. n/a


API docs – PSD: https://app.box.com/s/4w689tt0mgezx4mv83uv

jpg: https://app.box.com/s/cl39ipoyj41iav553nv8


Other notes


Analytics Describe analytics tagging for the page

User Interface  

Left Navigation Component – API Docs Activity Services


API Docs Page – Default


API Docs Page – Hover State


Console Page




API Docs Page – Brand Guidelines



Functional Notes







Optional / Required

Design/Edit Mode

CMS Component/Field Label Naming Suggestions

CMS Considerations



Left Navigation Component Load
  1. This component is dynamically generated based on the page structure hierarchy the author has defined in CQ 
  2. The order of navigation items are governed by the page order of the page structure (crawling page based on the child nodes) 


    1. The author can rearrange the order of the items displayed in the Left Navigation by rearranging the page order in CQ
  3. CQ Dialog has one element to call out the starting point of what the component should display
  4. Allow the ability to not display a navigational item in page properties (leverage page property of the page) 
  5. User can see this component in pre-authenticated state on Three-Column Page template such as API Docs listing pages or Brand guidelines on developer.nike.com 
  6. User can view categories with the main section of the page content
  7. User can expand and collapse the main section to view respective sub-categories within each section
  8. Main body content area page reflects the selected sub-category item from the Left Navigation


No min/max # of items (based on author's governance)

Editable in Edit mode.

Design (CSS and Javascript) code changes will be implemented and deployed by designer/developer


Provide contextual guidance for content authors.


1 Category Header Text Load
  1. Display the Header title of the docs category name that is automatically populated by the Main navigation items under the Primary Navigation


    1. Allow the author to overwrite the Category Name
  2. In current usage, the header corresponds to one of the Doc categories that the end-user has selected from the main navigation item: Docs from Primary Navigation
  3. For Docs Primary navigation menu, it currently consists of the following categories, in which the Header field is populated from one of these categories:


    1. Get STarted
    2. API Docs
    3. Brand Guidelines
Required Automatically populated by Primary Navigation      
  1. Upon hovering any of the Header will highlight the chosen item in the menu list in orange text
  2. Only one item would be at hover state each time. (The visual is just showing a sample of how hover state looks like, it is not a true representation that all the links being highlighted at once)
  3. Displays the container in a lighter shade#F1F1F5 in top and mid section
    @start-color: #f1f1f5; @mid-color: #f1f1f5; @color-stop: 60%; @end-color: #e6e6ec
  1. If the user has moved to another sub-page, the left nav can be used to get back to the Category page.
  2. The Category Header is persistent and maintain integrity for all the sub-pages


    1. E.g. API DOCS should be displayed whether the user has selected Activity Services or Test Console. The selected page title in the left nav will be highlighted in black.
2 Sub-Category/ Page Title Text Load
  1. Display the sub-category Page title from Page properties of that page, it is automatically populated based on the page structure
  2. Each Detail page is a page defined within CQ
  3. The first Page section should be expanded at default
  4. Can consist of more than 1 Page title for end user to navigate to other Docs pages if there are multiple sub-categories within the API Doc category (e.g. Activity Services, Other Services)


No min/max

  1. Upon hovering any of the text will highlight the text in orange (#fa5400)
  2. Only one item would be at hover state each time. (The visual is just showing a sample of how hover state looks like, it is not a true representation that all the links being highlighted at once)



  1. Upon click on the Page Title will display the page content of the selected page on the right side and expand the sections list underneath this page in the Left Navigation
  2. If the viewing page is already on collapse the section and hide the list of Section headings if it is already expanded (minus sign)
  3. Upon click again will expand the section with the list of headings
3 Section Heading Title Text Load
  1. Display a list of the Page Title for each of the Detail Pages that belong within the category
  2. For example, Activities Services category consists of the following sections:


    1. Aggregate Sport Data
    2. List Activities
    3. Activities by Experience Type
    4. Activity Detail
    5. GPS Data
  3. The Section heading should correspond to each of the items listed in theAggregate Page List component in the main body of the page
  4. The list in the Left Nav is generated


No min/max

3a Hover State   Hover
  1. Upon hovering any of the Section Heading will highlight the chosen item in the menu list in orange text
  2. Only one item would be at hover state each time. (The visual is just showing a sample of how hover state looks like, it is not a true representation that all the links being highlighted at once)
3b Selected State   Click
  1. Upon clicking any of the Section heading or any title in the Left NAv will display the selected item in a highlighted state (black).  


    1. If the selected menu item is a section on the right, the main body of the page will reflect that tile.  
    2. If it is a bevel link off to refresh page content, then the detail page title will reflect the selected state.
4 Link Title Text Load
  1. Display page title of the additional pages that can be navigated within the Left Nav, it may be a link off destination or another category page hierarchy (e.g. Test Console)
  2. Can be displayed with the #6 Bevel arrow


No min/max

4a     Hover
  1. Upon hovering the text displays the upper part of the container in a lighter shade #F1F1F5 and the text in orange
    @start-color: #f1f1f5; @mid-color: #f1f1f5; @color-stop: 60%; @end-color: #e6e6ec



(not shown)     Click
  1. Upon clicking/selecting the items with the bevel button refresh the page with respective content
  2. The selected item on the Left Nav will be shown in highlighted state in black.
5a Expanded State (Minus Sign) Style Load/Click
  1. Expanded state/Minus Sign indicates the page section has been expanded
  2. Upon end user's discretion to expand or open any section.
  3. The remaining Doc Pages should be collapsed
  4. More than one section can be expanded at any given time for comparison
  5. Display the expand or collapse sign options if there are sub-section/detail pages within the category page
  6. Upon clicking it will revert to display the opposite sign (plus sign) and collapse to only display the category title

Collapsed State

(Plus Sign)

Style Load/Click
  1. Collapsed state/Plus Sign indicates the page section has been collapsed and has sub-section/detail pages available within the category
  2. Display the expand or collapse option if there are sub-section/detail pages within the category page
  3. Upon clicking it will revert to display the opposite sign (minus sign) and expand to display the category title and its sub-section titles
6 Bevel Style Load/Click
  1. Display the Bevel if the content is linking off to a new page content
  2. Upon click will refresh the page with the respective content for the selected item
  1. Upon hovering the bevel hover state displays the upper part of the container in a lighter shade #F1F1F5 and the text in orange
    @start-color: #f1f1f5; @mid-color: #f1f1f5; @color-stop: 60%; @end-color: #e6e6ec
7 Link List Component Load
  1. Display the component
  2. This component can be displayed beneath the Left Navigation component or right hand rail
  3. It is not part of the Left Navigationcomponent.

CQ Technical Specifications

CQ component configuration

Item Value
Relative Path /apps/nike-developer-cq/components/content/leftNavigation
jcr:title Left Navigation
jcr:description  Left Navigation Component
jcr:PrimaryType cq:Component


Dialog field definitions

Required Optional (by field type)
Help & Label Fields


Tab Dialog Field Set

Field Label



Default Value

Available values and/or default value

Field Length

Extended Validation or Field behavior

Sub Label Description
1 1 Left Navigation


pathfield N Current Page        

Select the path of the top level page from which to collect the sub-pages as navigation links. This component gathers sub-pages two levels deep.

Dec 2015

Google’s Mobile-Friendly Update


As you’ve probably heard by now, an increasing percentage of all Internet traffic across the globe comes from mobile devices. About 1 in 3 Google searches in 2014 originated from a mobile or tablet device, and this number will continue to grow over the next few years.

This week, the search algorithm that determines how sites rank on mobile Google searches will be updated so it's heavily influenced by mobile usability. Websites that are mobile-friendly or responsive will show up higher in mobile search engine results, while websites that are not mobile ready will be penalized. The goal of this very significant change is to make the web faster and easier to use for anyone on any device.

Here are five things you need to know about the updates to Google’s algorithm, how it might affect your website, and what you can to do make sure your site doesn’t see a significant dropoff in organic mobile search traffic.

1. What changes is Google making to its algorithm? 

Broadly speaking, Google will be updating its mobile search algorithm so that search results will lead to content that is usable across all mobile devices. Google explained on its Webmasters Mobile Usability post that it will be prioritizing websites that are:

  • Responsive – The defined viewing area adjusts to the device’s screen size. Put another way, all pages on the website use the same URL across devices, and pages “respond” according to the screen size of the device.
  • Free of horizontal scrolling or pinching/panning required to view the entire page.
  • Using easy-to-click links and elements.
  • Incorporating fonts that scale for easier reading on smaller devices.
  • Free of technologies (such as Flash) that are no longer rendered by most mobile browsers.

Although no one technically knows the exact algorithm changes that will go into affect in a few weeks, The Moz Blog hypothesizes that Google will "launch a new mobile crawler (probably with an Android user-agent) that will do a better job of crawling single-page web apps."

2. How significantly will mobile rankings be affected?


You don’t have to take Barney Fife’s word for it. By all accounts, the impact of Google's mobile-friendly algorithm is predicted to be huge. Search Engine Land reported that, according to a member of Google’s Webmaster Trends team, this update will have more of an impact on Google’s search results than the previous Google Panda update and Google Penguin update.

Business Insider also reported last week that a number of the world’s largest brands will be significantly punished under the impending update (a few listed were Windows Phone and the official website for theEuropean Union.) The Wall Street Journal is referring to this change as 'Mobilegeddon.'

The effects will be universal – not just for big brands with thousands of monthly site visits. If 50% of your traffic from Google comes from mobile devices, and your site is not mobile-friendly, the implications are that virtually all of that traffic from mobile is at huge risk. As a point of comparison, the NMC website would lose about 2,100 monthly visits if the site weren't responsive. 

3. How can I tell if my website meets mobile-friendliness requirements? 

Ahead of this major change, you can check your website using Google’s Mobile-Friendly Test, which was recently added to everyone’s Webmaster Tools reports. This test will analyze a URL and report if the page has a mobile-friendly design.

The Mobile-Friendly Test will check that the site avoids software that doesn't work on mobile devices, uses text that is readable without pinching and zooming, has content that sizes to the width of the screen and links that are far enough apart that the correct one can be easily selected.

4. My site failed the mobile-friendly test. What now?!

If you failed the Mobile-Friendly Test, Google’s upcoming change will most likely have a negative impact on your website’s traffic because the website is not optimized for mobile. Thankfully, the Mobile-Friendly Test gives recommendations for how to fix these mobile usability issues across the site. The test will generate a report to help diagnose and fix errors (along with step-by-step instructions) for specific pages to improve their mobile search performance. 

A few of those primary mobile usability errors are pretty straightforward, one-off fixes. For example, removing any Flash-based content from the site is a nearly immediate fix that can pay dividends after the algorithm updates on or around April 21st. However, the lack of a responsive web design on your site is a much more involved fix. The site will need to be rebuilt in a responsive manner to comply with those requirements.

5. Is it worth investing in a mobile-friendly or responsive website?

It is almost certainly worth the investment to rebuild your website responsively, as soon as possible. If you're curious about the immediate impact of these changes, you can check your Google Analytics to see what percentage of your search traffic is coming from mobile devices. In the 'Audience' tab, drill down to Mobile -> Overview. This will show you how much of your traffic comes from Desktop, Mobile and Tablet devices. Add a Secondary Dimension for Traffic Acquisition (I find Source / Medium is most helpful, but Default Channel Grouping works, too) to see where that traffic is coming from. You can assume that any traffic from mobile or tablet that was driven by google / organic will be at risk if your website is not mobile-friendly. 


Now is a great time to think about rebuilding your site code in a responsive manner. Each size will reorder the content in a manner that is optimal for that specific screen. A responsive design ensures that you have a tailored experience for people of all screen resolutions and that you’re not alienating mobile visitors with a site that is cumbersome to navigate on a phone. It also alleviates the concern of a major dropoff in mobile organic search traffic with the impending algorithm updates. Beyond the SEO implications, responsive web design has a myriad benefits for businesses and organizations, including increased donations for non-profits

Interested in learning more about a mobile-first design for your business or organization's website that will highlight information most relevant to visitors viewing on any device? We'd love to hear from you!

Oct 2015

Missing logo on Proforma Invoice of Magento



I am using Magento CE Versoin

When click on the PDF button of an order, a new page called "Proforma Invoice" popup, on the top left corner there is a logo.

The logo is a wrong address on my site, so there is a missing image there.

I try to find where to configure this file location under


But that doesn't work.

Can anyone of you tell me the correct path in backend configuration or which file should I edit to configure this?

Thank you very much!

Oct 2015