Step 8: Add Breadcrumbs to Page Layouts
In addition to the navigation bar, pages in the Modern Business theme display Breadcrumbs at the top of page content area. In this step you will use SCS Render API to replace static Breadcrumbs with dynamically generated path.1. Find HTML that renders Breadcrumbs:
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
…
</div>
</div>
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div id="breadcrumb" class="col-lg-12">
<!-- page breadcrumbs goes in here -->
</div>
</div>
// render breadcrumbs...
function renderBreadcrumbs() {
var breadcrumb = $('#breadcrumb');
// generate title using page name and page title...
var id = SCS.navigationCurr,
header = document.createElement('h1');
$(header).addClass("page-header");
$(header).text(SCS.structureMap[id].name + " ");
var subheading = document.createElement('small');
$(subheading).text(SCS.pageModel.properties.title);
$(header).append(subheading);
$(breadcrumb).append(header);
// generate [age breadcrumb...
var path = document.createElement('ol');
$(path).addClass("breadcrumb");
if ( id == SCS.navigationRoot ) {
// Home page...
var bcItem = document.createElement('li');
$(bcItem).addClass("active");
$(bcItem).text(SCS.structureMap[id].name);
$(path).append(bcItem);
} else {
// one of sub-pages...
var ids = getParnetIds(id), bcItem, bcLink, linkData;
for (var i = ids.length - 1; i >= 0; i--) {
bcItem = document.createElement('li');
if ( ids[i] == id ) {
$(bcItem).addClass("active");
$(bcItem).text(SCS.structureMap[ids[i]].name);
} else {
bcLink = document.createElement('a');
linkData = SCSRenderAPI.getPageLinkData(ids[i]) || {};
if ( linkData.href ) {
$(bcLink).attr("href", linkData.href);
}
$(bcLink).text(SCS.structureMap[ids[i]].name);
$(bcItem).append(bcLink);
}
$(path).append(bcItem);
}
}
$(breadcrumb).append(path);
}
// returns array of parent page id's...
function getParnetIds (nodeId) {
var ids =[], i = 0;
ids[i] = nodeId;
while ( nodeId != SCS.navigationRoot ) {
nodeId = SCS.structureMap[nodeId].parentId;
i = i + 1;
ids[ i ] = nodeId;
}
return ids;
}
// must wait for the script to be ready...
if (document.addEventListener) {
document.addEventListener('scsrenderstart', renderNavbar, false);
document.addEventListener('scsrenderstart', renderBreadcrumbs, false);
} else if (document.attachEvent) {
document.documentElement.scsrenderstart = 0;
document.documentElement.attachEvent('onpropertychange', function(event) {
if (event && (event.propertyName == "scsrenderstart")) {
renderNavbar();
renderBreadcrumbs();
}
}
);
}
Checkpoint 5
In the Site Builder, check that now you can use Breadcrumbs displayed on the site pages (apart from Home) that you can use to navigate to parent page.Step 9: Add SCS Slots to the Page Layouts
On this step you will convert content areas in the page layouts to use SCS slots instead of original HTML code. SCS slots are <div> elements in the layout that have the value “scs-slot” in the class attribute. A slot is where you can add components to fill in the page content. Multiple <div> elements can be designated as slots by assigning the "scs-slot" class attribute. Each slot must have a unique id attribute. Slots that additionally have a class attribute value of "scs-responsive" will refresh their content as the browser viewport changes resolution.
There are different options available to add SCS slots to a Bootstrap HTML page:
- you can convert into a single slot the <div class=”container”> element that contains the whole page content
- you can convert into a slot each <div class=”row”> element that contains a row of content in a Bootstrap grid on the page
- or you can convert into a slot each <div> element that contains a column of content in a Bootstrap grid on the page
You should use options (a) or (b) above if you want to allow end users adding more than one SCS component into the slot. If that is the case you should use the “scs-slot” class attribute in combination with the ”scs-responsive” attribute, e.g. <div id=”row-slot” class=”scs-slot scs-responsive row”>. Option (c) allows you to create SCS page layout that matches closely structure of the original page in the Bootstrap theme. For example, you can create a grid of SCS slots similar to one below:
<div class="container">
<div class="row">
<div id=”grid-title" class="scs-slot col-lg-12"></div>
<div id="grid-col1" class="scs-slot col-md-4"></div>
<div id="grid-col2" class="scs-slot col-md-4"></div>
<div id="grid-col3" class="scs-slot col-md-4"></div>
</div>
</div>
The steps below show an example of how you can add SCS slots to the Home page layout in the Modern Business theme (index.html file). You can use a different layout of slots based on your requirements.
1. Open index.html file in your favorite editor and modify <div> elements that define columns in the Bootstrap grid layout for this page to include id attributes and ‘scs-slot’ class. Once finished, the content area should look something like that:
<!-- Page Content -->
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div id="mrkt-title" class="scs-slot col-lg-12"></div>
<div id="mrkt-col1" class="scs-slot col-md-4"></div>
<div id="mrkt-col2" class="scs-slot col-md-4"></div>
<div id="mrkt-col3" class="scs-slot col-md-4"></div>
</div>
<!-- Portfolio Section -->
<div class="row">
<div id="prtf-title" class="scs-slot col-lg-12"></div>
<div id="prtf-col1" class="scs-slot col-md-4 col-sm-6"></div>
<div id="prtf-col2" class="scs-slot col-md-4 col-sm-6"></div>
<div id="prtf-col3" class="scs-slot col-md-4 col-sm-6"></div>
</div>
<!-- Features Section -->
<div class="row">
<div id="frts-title" class="scs-slot col-lg-12"></div>
<div id="frts-col1" class="scs-slot col-md-6"></div>
<div id="frts-col2" class="scs-slot col-md-6"></div>
</div>
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div id="well-col1" class="scs-slot col-md-8"></div>
<div id="well-col2" class="scs-slot col-md-4"></div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Modern Business 2016</p>
</div>
</div>
</footer>
</div>
2. Open Home page of the site in the Site Builder and switch to the Edit mode. You should see all the slots that you added highlighted. If you hover over a slot, you can see slot id displayed in the slot bar.
3. Edit other page layout files to add SCS slots. Once done, use Edit mode in the Site Builder to validate that you can see all the slots that you added to page layouts.
Checkpoint 6
SCS theme Modern Business is complete. You can use page layouts to add new pages to your site and then drag and drop components to the slots that you defined. Once new site is complete, you can convert it into a new template and then share it with your colleagues.Note: Pages in a Bootstrap theme often use a similar page structure. You should review what page layouts you really need to create / keep in your SCS theme to allow creating the site.
