H006 PLP Hero with Jump Link

Layout Variant: H006

Content Type: Collection

Aspect Ratio:

• N/A

Expected Use:

H006 PLP Hero with Jump Link is a hero variant intended solely for use on Product Listing Pages (Augmented Category in CoreMedia) and not as a usual Core Media Hero. H006 accommodates breadcrumbs, more robust descriptive copy with optional "Read More" toggle, and up to 6 jump links driving users directly to key sections of the page content.

The H006 allows content editors to author a visually clean and minimalist hero on PLP pages only. H006 accommodates authoring longer, information-rich descriptive copy, boosting value to search engines and users. It also gives users an at-a-glance overview of key content sections of interest on the page and enables them to easily jump down the page directly to the content they need.

On a side note, it is important to know that even if PLP is all authored in CoreMedia, the HCL application talks to CoreMedia, grabs all the information and renders the PLP display. Currently, the Catalog Section Heading is dynamically populated by HCL and generates a <h1> element with the associated category/subcategory title. When one sees www.emerson.com/en-us/catalog today, the PLP has default render to display the <h2> element first before <h1> element . With the H006, the HCL renders the PLP to correctly display the <h1>  before the <h2>  without breaking the current PLP set up and avoid creating two <h1> which Google doesn't like.

The PLP can work with or without the H006. However, H006 provides more flexibility to add CoreMedia components to display more meaningful related information to a PLP.  The H006 will also not replace any currently authored heroes on existing PLPs. Should content authors still opt to build the PLP without the H006,  they can still refer to this link for the setup: PLP Augmented Category.

The only thing is, unlike other CoreMedia components, a full regression page for H006 cannot be setup due to the use of PLPs. Anyhow, provided in the next section are screenshots of a working use case in S1 environment that was used during the test phase. This aims to  provide a walkthrough on how you can setup the H006 in a PLP in CoreMedia and view the captured display on a web browser. 

The H006 is intended solely for use on Product Listing Pages to introduce and give greater context to the associated product catalog content grouping. While it is generally not recommended to use the H006 on a non-PLP or product catalog pages, in certain circumstances it may be judiciously used on pages that may benefit from a simplified, non-visual hero with jump navigation links if appropriate. Content authors may refer to other hero components available to best suit the given CoreMedia page type and use case.

How to Build:

STEP 1: H006 SETUP

The H006 is set up as a Collection. Unlike usual Hero setup in CoreMedia, H006 is added to the Main Section of a PLP (Augmented Category) that uses only the "Corporate Detail Page Layout" placement, a single column layout with "main", "above" and "below" placements. The H006 is setup in CoreMedia but rendered for display by HCL along with the Product Catalog and other targeted CoreMedia components.

This Hero is styled by setting the Layout Variant of the collection to "H006" while the Layout at the Page level for the "Main" is set to "Default" on the Placement section. For our example below, the collection's file name is "H006 - Actuators". Your Collection should have the following components.

• Teaser Title - The <h1> Heading shown on top left side of the image. 
• Teaser Text - The optional body copy shown below the Teaser Title. Read More toggle is recommended if the text is around 300 to 500 characters. 
• Teaser CTA Label - This defaults to "Learn More" if no "Call-to-Action-Button" is defined.
• Call-to-Action-Button - Optional CTA buttons that drive users to relevant corresponding child and support pages. These are the green CTA buttons under the body copy. 
  • Set to "Linked-Call-to-Action" and add a Page, Video, External Link or Download Document for the CTA destination (other teasable content could be used here). 
  • The CTA Label comes from the Linked Item. If no Teaser CTA Label is defined, the CTA label defaults to "Learn More". Up to two (2) linked CTA's can be added.
  • The CTA display can be disabled by enabling the No Call-to-Action Button on the Teaser under the Content Tab or via "callToActionDisabled" Local Settings property.  
• Teaser Header and Picture and Other Media are not used in this H006 collection. See below image for reference. 
  
• Items - Add a container collection for the Hero jump links (refer to the sample image). Optional jump links drive users to key content sections on the same PLP. Around 5 to 6 jump links can be added. Go to Step 4: Jump Link Setup to view the steps
• Layout Variant - Set the H006 Collection layout variant to "H006". Refer to the sample image below for reference. 
• Since H006 is styled as a collection, you have the option to modify the background color via the Background Color section on the Content Tab.
  • The default H006 background color is set to "Legacy (Gray)".
  • Authors also have the option to use the new Tertiary Background color (purple) via the Local Settings under the System Tab by manually typing "brand-tertiary-background" on the Value column of the "bgColorState" property.  
• Remember to add the "H006 - Actuators" collection on the PLP's Main section. This should be the first item on the list. 
  

STEP 2: CATALOG SETUP

• Create a collection that will be used to setup the product catalog with H006. For our example, this was labeled as "Actuators Catalog". Nothing is used on this Collection except for the layout variant that must be set to "plp-product-catalog".
• Enable the Jump Navigation under the Content Tab. The jump link label comes by default from the added component's Teaser Title. However, if an Alternate Title was specified under the Jump Navigation section, this will override the use of the Teaser Title. Refer to screenshots for reference. 
  
   
  
• Remember to add the "Actuators Catalog" collection on the PLP's Main section right below the "H006 - Actuators" collection. This should be the second item on the list.

STEP 3: OTHER COREMEDIA COMPONENTS SETUP

• With H006, authors have the option to add CoreMedia components that can be displayed on the PLP and even set optional jump links. Here are the components used as samples for the author guide: C020B, SE008D, C019, C094, C057 and VN002. 
  • Authors can refer to the Content Editor's Guide to view respective component's setup guide and regression page. Authors have the option to use any CoreMedia components. However, please note that some components may not function as expected when used in a PLP. If there are any issues encountered, please raise a ticket. 
  • For each CoreMedia component that will be part of the jump link collection, authors must enable the Jump Navigation under the Content Tab. Add an Alternate Title, as needed. This is similar to what we did on the "Actuator Catalog" on Step 2. Jump link not enabled for C019 sample as only 5 to 6 jump links can be displayed on H006.
• Add the target CoreMedia components on the PLP's Main section right below the Actuator Catalog collection. The order of display depends on the sequence each target component was added. 

STEP 4: JUMP LINK AND COMPONENTS SETUP

To setup the jump link collection below are the steps: 

• Create a collection. The sample used was labeled "H006 - Actuators - Jump links".  Nothing is used on the jump link collection other than the Items section.
• On the Items,
  • Add the "Actuators Catalog" collection created in Step 2. 
  • Add the target CoreMedia components created in Step 3 that have jump links enabled. Samples for C020B, SE008D, C094, C057 and VN002 were added for illustration purposes.
• Set the "H006 - Actuators - Jump links" collection Layout Variant to "Default". Refer to the screenshots below for reference. 
  
   
  
• Add this "H006 - Actuators - Jump links" collection on Items Section of the ""H006 - Actuators" collection created in Step 1. 

STEP 5: LOCAL SETTINGS SETUP

Below are the relevant properties that must be added on the Local Settings of the H006 collection System Tab.

• Add "readMoreDisplayed" Boolean property setting. The Read More toggle (when configured) expands the descriptive copy block to reveal its full content. This optional Read More toggle is recommended if the text is around 300 to 500 characters. 
• Add "showBreadcrumbs" Boolean property setting. Breadcrumbs allow users to easily navigate back up the page hierarchy of the given PLP branch of the site. Breadcrumbs are displayed atop the Teaser Title. This feature is also optional but strongly recommended to be enabled. 
• Add "callToActionState" Integer property setting and set the Value to "4"
• Add "callToActionDisabled" Boolean property. This is a shortcut to disable the CTA button on H006.
• Note that the other Local Settings on the image below are auto generated based on Content Tab entries and need not be set up by the author. 
  

Here is the sample H006 for PLP with Jump Links collection display via web browser. The "Read More" toggle is displayed on the first image and when clicked, it displays the full body copy as shown on the second H006 image. Also added were different teaseable content types with corresponding CTA labels and icons for a page, external link, video and document. 

STEP 6: PLP MAIN SECTION SETUP

On a PLP with H006, the "Above Main" and "Below Main" placements are not used. All components must be placed under the "Main".  This is the required set up in order for HCL to properly display the PLP with H006, Product Catalog and other targeted CoreMedia components. 

• Open the PLP (Augmented Category) to use. For our example, open the "Actuators" Product Catalog. 
  
• On the "Main",
  • Ensure that the placement is set to "Default".
  • Add the "H006 - Actuators" collection created in Step 1 as the first component.
  • Add the "Actuators Catalog" component right below the "H006 - Actuators" collection.
  • Add the targeted CoreMedia components: C020B, SE008D, C094, C057 and VN002. Refer to the next two screenshots for setup reference. 
    
     
    

Via web browser, below is the sample full page Actuators Augmented Category using H006 PLP Hero with Jump links and targeted CoreMedia components. The sample has six  (6) jump links. Each link drives users to key content sections on the PLP Main. 

For more H006 samples, refer to the H006 Regression Page.  To show case multiple H006 use case scenarios, the examples were set on a "Hero Page" placement instead of the "Corporate Detail Page Layout" placement used in an Augmented Category (PLP).

The samples also include a link to a full Regression Page mock up. The "H006 Regression Page - Full" sample was setup in CoreMedia to illustrate how components are laid out on the page using the "Corporate Detail Page Layout" placement but has no attached Product Catalog. Instead a dummy collection was attached to illustrate what a Product Catalog component looks like.