Adding Custom Components to Rows and Layouts (ARI)

This SOP is a work in progress. If you notice anything that is out of date, could be more clear or could be more efficient please update the SOP or add a comment to start a conversation.

Purpose

The purpose of this document is to outline the process for creating custom components to rows and layouts in order for your content to appear.

Procedure

Follow the guide below to successfully add custom components to rows and layouts.

Adding Custom Components to Rows & Layouts

There are two types of responsive sites - ones that function with layouts and ones that function with rows. This doc will teach you how to get your content to show up on each.

Rows

After you have posted your content in your JSON object correctly, you need to add the “Featured Banner” custom component in the correct spot to get it to show up on site. Go into your rows section.

From there we’re going to go into our “Theme9_Default”. Theme9_Index edits the home page - don’t touch that one.

Open up the “Sections” drop-down menu, followed by the “Header” drop-down menu, and finally your “Components” drop-down menu. Double check to make sure your custom component is not already in the header components.

From this point, you’re going to click the white plus symbol directly across from the Name and Class boxes. It’ll bring up an “Add Component” box. Use the drop-down menu and find the option that says “Custom Component (Featured Banner)”. Select it and click the green plus symbol. This will add your custom component to the bottom of the list. If you have more than just the header in this component section, you want to make sure that your custom component is below the breadcrumb navigation.

Publish your changes - there’s no “save” in rows - and go back to your website. Refresh 4,5, or 6 times. If you’ve done everything correctly, your header will show up on site. If it does not show up, run around the SEO department with your hands in the air and screaming “SOMEBODY HELP ME!!!!!”

Layouts

Again, you only need to use this doc if your custom header is not showing up on site and you’ve done everything else correctly.

Start by clicking into your “Layouts” tab from the home page.

From there, we’re going to go into the green “Internal Page Layout” section. It will look really similar to the rows set up when you click into it.

Next, we need to find the component with the “Breadcrumb Navigation”. Our Featured Banner component should always live under the breadcrumb navigation. Do not put it above It’s not always in the header! If it’s not in the header, it’s in the “Internal Main Content” drop-down. Open that up, and check that your “Breadcrumb Navigation” component is there. Scroll to the bottom of the internal content assets and click “Add Element”.

Under your Active Components section find your “Custom Component” drop-down and click on that. Find your Featured Banner and click on it to add it to the bottom of the Internal Content list.

Drag the FeaturedBanner Component underneath the Breadcrumb Navigation and publish your changes 5 times (you know the drill).

Head back to your site and refresh it 4-5 times. Again, if you’ve done everything correctly it should show up on site. (Side note: If you have buttons where you can not read the writing because the font color is black on a dark background go ahead and sent that to Chris Smith as we can’t fix that yet).

Trouble Shooting

Sometimes you can do everything right, and things will still go wrong. Welcome to ARI. Here are some solutions to common issues. If you read this doc and still don’t understand something ask for help! Layouts and Rows are where we can mess up the whole site if you make a mistake. We would much rather you ask someone until you feel confident you can do it on your own.

Header Above Site-Wide Banner Component:

Some sites have custom banners that live below the breadcrumb navigation. The default setting for rows will usually place our featured headers above these advertisement banners. We want our headers to live below these banners. This can also be more complicated because some of these components can live in the main content rather than the header component. If we run into this scenario, we will not be able to fix the order of header/advertisement banners without changing where our header lives.

This is a pretty easy issue to fix. Go into your featured banner custom component, and change the Legacy Section Rules that tell our custom component where to appear. Normally, we have this set to show in the header. Change it to “Main Content”. Save.

From there we’re going to go back into our rows and open up the “Main Content” drop-down menu in the Default Theme. From there you’re going to find the components with your breadcrumb navigation and Page Asset that contains the advertisement (it will probably have other things in it too), this is usually the “Main Content Assets”. Go ahead and open up your “Components” drop-down menu.  *If it’s not in there you may just have to hunt around opening up the components until you find the correct one.*

We’re going to add a component like normal. Click the white plus sign to bring up you “Add Component” box. Select your “Custom Component (Featured Banner)” from the drop-down menu.

Your custom component will be added to the bottom. From there we want to drag and drop our featured banner component into the correct spot. Right below the advertisement, which in this case was called “Page Asset ( Get-Pre-Approved Component)”.

Publish your changes(3-8 times just to be safe. Jk but maybe not). Go back to your site and refresh it. This can take 4-5 times for your changes will show up. If you’ve published more than 6 times and your custom component is not showing up/ or not showing up where you want it too, odds are you did something wrong or there might be a different setting for this site.