Wordpress CMS Integration with e-Business 6.0

This document provides step-by-step instructions for integrating Wordpress CMS with Aptify e-Business 6.0.

Wordpress 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. Below is an example of Checkout.js page.

  In js file, the .html extension needs to be removed for redirection page links on WordPress.

  

• img folder - The img folder contains any images used by the controls via HTML of referenced in the css file.  I.E. 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:

1. Loading Dependencies
2. Defining the Div 

3. Call to the Control's Render Function

Loading 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 profile.js file.

<script src="/UI/js/my/profile.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 ProfileDomEl = $('#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

This guide notes an outline for our recommended approach specific to a WordPress integration with the E-business controls and should be used in addition to our CMS Integration Steps

WordPress Website: https://wordpress.org/

By Default, WordPress allows you to add HTML content to pages via their page editor.

However, they have an extremely popular plugin called "SOGO Add Script Header Footer" that we recommend adding for use with the e-business controls.  This plugin allows you to add code to be included in the header and footer of a page. 

You can access this plugin from your WordPress admin area under "Plugins --> Add New"

From there you can search for "SOGO Add Script Header Footer" and then click "install now"

Once installed click "Activate"

Once Activated, you should see a new section with two new editable content areas for header and footer content when you go to edit a page.

This is useful to separate the code as outlined in the CMS Integration Overview.

Required configuration changes:

Following changes need to be done in different configuration files of e-Business for loading the site:

• Updates in ebConfig:
  Open the ebConfig file from the following path: C:\xampp\htdocs\WP\UI\js\configuration
  Update SitePath attribute (shown below) to refer to the WordPress site.
  
  

Updates in API web.config:

1. Open the API web.config file from the following path C:\inetpub\wwwroot\AptifyServicesAPI.
2. Search for "Aptify.Services.CORS.AllowedDomains" key and update the same as below:
   <add key="Aptify.Services.CORS.AllowedDomains" value="*" />

Load the WordPress CMS site to confirm that the e-Business control loads.