Sitefinity CMS Integration with e-Business 6.0
This document provides step-by-step instructions for integrating Sitefinity CMS with Aptify e-Business 6.0. Note that e-Business 6.0 has been tested with Sitefinity 10 but earlier versions should also be compatible.
Sitefinity is an extremely flexible CMS from both admin and developer perspective. The noted approaches below covers both outline Admin level integration options.
Explanation of the E-business folder structure
The e-Business UI folder has everything the front end controls need, to be used within the site as well as example pages showing how to add each control.
Folder Details
css folder - The css folder contains the .css file for all styling of the controls.
- html folder - The html folder contains the front end HTML code for each control. Each control is made up of an html file and a js file.
- js folder - The JS folder contains the JS files for each control. Each control is made up of an html file and a js file.
- img folder - The img folder contains any images used by the controls via HTML of referenced in the css file which is Credit Card Images or Icons.
- my folder - With the root of the folder as well as the js and html folders you will see a "my" folder. This is currently a structure we have put in place for the profile or other logged in Ebiz user-specific controls. Similar to the Customer Service folder from the old school .net controls.
Outline of code necessary if we need to add a control to a page.
The following is all of the code for the page that is necessary to add the login control. The code is detailed in parts and must be executed in an order given below:
Load Dependencies
First, there are the dependency files. These are the files the controls need to have loaded to work.
Below are the dependency files which needs to be copied over for the controls to load:
- The StyleSheet
<link rel="stylesheet" type="text/css" href="/frontend/css/eb6.css">
It is expected that this will most likely be included in a site wide template and not on an individual page. Both will work fine though.
- The Jquery Library file
<script src="/UI/js/3rdParty/jquery-3.2.1.min.js"></script>
It is expected that this will most likely be included in a site-wide template and not on an individual page. Both will work fine though.
- The Knockout Library File
<script src="/UI/js/3rdParty/knockout-3.4.2.js"></script>
It is expected that this will most likely be included in a site-wide template and not on an individual page. Both will work fine though.
- The JS file for the specific control to render.
In this case the login.js file.
<script src="/UI/js/login.js"></script>
This is expected to be a page level dependency based on the control or controls being used and should be added on the page itself and not in a site-wide template.
- The div tag to render our control into.
Next is the div where the control will render. This is essentially a placeholder for the actual controls HTML.
<div id="login1"></div>
The ID is important and will be used in the next part of the code.
- Call to render the control.
This is the javascript that will tell the dependency file to load itself into the div we noted above.
Define the Div
var LoginDomEl = $('#login1')[0];
Note the ID of the div above is used here.
Call to the Control's Render Function
Each control has a render function in the JS file you will need to call. Pass in the ID of the div to render the control into, define your live instance of the model and then bind the control with its model.
eb_Login.render(loginOptions).done(function () {
eb_Login.live = new eb_Login.loginModel(undefined,loginDomEl,eb_UserContext.live);
ko.applyBindings(eb_Login.live,loginDomEl);//Apply KO bindings, fire up the control
Integration of a Control
Step1: Adding the E-business folder to the Sitefinity
The integration of our front-end controls with the CMS is straightforward. The e-business controls and dependencies are all in a single folder as shown below.
Place the highlighted UI folder from e-Business 6.0 to the root directory of the Sitefinity site.
Step2: Creating control in Sitefinity
Adding CSS Dependencies to the page.
If the CSS for the controls is not included in the template for the page you can use a CSS block.
For instructions on how to use this block see the Sitefinity documentation: https://docs.sitefinity.com/css-widget
Adding JS Dependancies to the page.
If the core JS files are not included in the template or when you need to add the specific control JS file use the Sitefinity JavaScript widget for each file.
Use the "Link to a javascript file" section to Include these as files and make sure to check the "In the head tag" Radio button
For instructions on how to use this block see the Sitefinity documentation: https://docs.sitefinity.com/java-script-widget
Adding Placeholder Div to the page.
To add the placeholder div to the page use the Sitefinity Content Block Widget
Make sure when adding the div to be in HTML mode in the editor.
For instructions on how to use this block see the Sitefinity documentation: https://docs.sitefinity.com/content-block-widget
Adding Control Render call to the page.
To add the control-specific call to the render function use the Sitefinity JavaScript widget.
Use the "Write JavaScript" section for this and copy and paste the code for your control here. Make sure to check the "Before the closing body tag" radio button as well
For instructions on how to use this block see the Sitefinity documentation: https://docs.sitefinity.com/java-script-widget
On completing control integration, verify by publishing and view that control is loaded.
Required configuration changes
Following changes need to be done in different configuration files of e-Business 6.0 for loading the site:
Updates in ebConfig:
- Open the ebConfig file from the following path : C:\Sitefinity 11.0.6701\ProjectManager_11_0_6701\Projects\eBusiness6\UI\js.
- Update SitePath attribute
On completion of controls integration host site on IIS, and launch Sitefinity site and confirm that the e-business controls work as expected.
Copyright © 2014-2019 Aptify - Confidential and Proprietary