# Overview
Site Administrator (SA) is a Content Management System (CMS) that allows any individual or business to manage the routine changes of text and graphics on their website, intranet or extranet without the knowledge of HTML or web programming.
The Site Administrator (SA) framework allows us to integrate custom modules into the system to make it perform any functions you require with ease. The module-based approach allows you to provide customized solutions for all client needs, with quick implementation and effective support.\
\
Site Administrator was built by [eLink Design, Inc](https://www.elinkdesign.com).
### Dependencies
* PHP >= 7.0
* MySQL >= 5.6
# Getting Started
# Installation
### Step 1: Setup Development Environment
#### Install Apache 2 server, MySQL server, and PHP >= 7.1
Every developer has their own development environment preferences. Installing Apache and MySql are trivial and the ideal development environment will differ from one developer to another, so we consider it outside the scope of this tutorial.
If you are new to PHP web development, here are a few resources to point you in the right direction:
* Packaged Solutions (does everything for you, less configurable)
* [Ampps](https://www.ampps.com/)
* Easily change PHP versions
* Lots of built-in features, but beware of code bloat!
* [Wamp](http://www.wampserver.com/en/) (Recommended)
* Smaller than Ampps
* A little more configuration
* Packaged Virtual Machines (Easily create/destroy environments. Full control. A little more configuration.)
* [VirtualBox](https://www.virtualbox.org/wiki/VirtualBox)
* [VMware](https://my.vmware.com/web/vmware/downloads)
* [Vagrant](https://www.vagrantup.com/)
* Also requires [VirtualBox](https://www.virtualbox.org/wiki/VirtualBox)
* Do it yourself
* [Apache 2](https://httpd.apache.org/download.cgi)
* [MySql](https://www.mysql.com/downloads/)
* [PHP](http://php.net/downloads.php)
#### Install Composer
Composer is PHP's package manager. Make sure it's installed before you proceeding.
```
# Verify installation
composer --version
```
[Download Composer](https://getcomposer.org/)
#### Git
We use git for source control. You'll need it installed too...
[Download Git](https://git-scm.com/downloads)
### Step 2: Configure hosts
#### Create Virtual Host
Depending on your development environment, the process of adding a virtual host will vary. Ampps offers a GUI, most other solutions will require [manually configuring apache](https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-16-04).
#### Localhost alias
Local SiteAdmin instances won't work with a url like `http://localhost/myproject` or `127.0.0.1/myproject`. You'll need to configure your operating system's `host` file to point a fake domain name to your virtual host.
**Windows**
```
# c:\Windows\System32\drivers\etc\hosts
127.0.0.1 myproject.app
```
### Step 3: Site Administrator install script
Though it's possible to manually install an instance of Site Administrator, we recommend using our installation script to simplify and speed up the process.
#### Download the install script
You can find the install script by signing into [eLink's internal Gitlab](https://git.elinkstaging.com). Click on the menu icon, then navigate to `Snippets -> Explore Snippets -> SA 3 Install`.
[Download Install Script](https://git.elinkstaging.com/snippets/8)
#### Upload the install script
Next, upload the install script to the root directory of your project.
#### Execute the script
The script is a simply PHP file. To execute it, navigate to the file from your browser. If our project's virtual host were called `myproject.app`, you would go to
```
http://myproject.app/sa.install.php
```
The install script will create a couple of directories, and install all the necessary core modules via composer.
### Step 4: Setup your database
We advise against using the `root` database user for all your SiteAdmin applications. Depending on your development environment, you can create a new database and corresponding user through a GUI (like phpMyAdmin) or directly through the command line.
**Command-Line**
If you're rusty on your SQL commands, [follow this tutorial](https://wiki.gandi.net/en/hosting/using-linux/tutorials/ubuntu/createdatabase) to create a database and user.
### Step 5: Configure SiteAdmin
Configuration files are initially created through the installer. Navigate to your project's siteadmin dashboard to complete this process.
```
http://myproject.app/siteadmin
```
### Step 6: Configure Environments
Configuration files will vary among developers, even for the same project. Copy the `{project_root}/siteadmin/config/config.php` file to `{project_root}/siteadmin/config/devConfig.php`.
Then register your custom configuration file & virtual host with the application.
{% code title="{project\_root}/siteadmin/config/environments.php" %}
```php
array(),
'myproject.app' => array('configFile' => 'devConfig.php', 'devMode' => true, 'errorReporting' => true)
);
```
{% endcode %}
> Notice the index `myproject.app` is the same as the virtual host we configured for our project.
### Build something awesome
By now, the installation process is complete. Check out the [Getting Started](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/getting-started/README.md#getting-started) section to learn guide you through building your next SA3 app!
# Configuration
Coming soon...
# Access & Navigation
### Access
To access your instance of Site Administrator and sign in please visit the url below with your actual website address replacing '[www.yourdomain.com](http://www.yourdomain.com)'. \
\
https\://\*\*[www.yourdomain.com\*\*/siteadmin](http://www.yourdomain.com**/siteadmin)
To sign in, enter your username and password and click 'Sign In'.
\[Sign In Page Screenshot]
### Navigation
Once signed in you will see a dashboard of information along with a menu to the left of it. This menu contains all your modules and these are how you access key ways to manage your instance of Site Administrator.
\[Dashboard with left hand menu highlighted Screenshot]
# User Guide
# Dashboard
The Site Administrator Dashboard is a personalized, at-a-glance view containing useful information for your website.
## Overview
The **Dashboard** is the first screen you will see once you log into **Site Administrator**. This will give you a brief overview of all of your modules, new items displaying to your customers, and recent changes that have been made on your website. This is meant to give you a preview of important and new things happening on your website. Each **Site Administrator** user can **customize** their **Dashboard** to their preference.
## Widgets
**Widgets** in the dashboard are visual blocks of information that shows useful information on an aspect of your website. These widgets can be helpful in giving you a **quick look** at information such as the amount of traffic on your website, or number of orders on your online store in the last 24 hours. You are able to **add** and **remove** any of the widgets available at your leisure to help **personalize** your website's dashboard. There are default widgets that are available in your dashboard that do not require any extra modules to be installed. However, there are also widgets available when you have certain modules like **Analytics** or **Catalog** installed on your website. Below is the current list of available widgets that you can add to your dashboard.
### Default Widgets
{% tabs %}
{% tab title="Users Online" %}
This widget displays both the current amount of users online and active users on line. **Users online** includes everyone currently on the site, while **Active users online** refers only to those users who are currently moving their mouse.
{% endtab %}
{% tab title="System Updates" %}
This widget informs users if there are available updates to any/all modules. Clicking **View Updates** will take the user to the appropriate page to update the site.
{% endtab %}
{% endtabs %}
### Analytics Module Widgets
{% tabs %}
{% tab title="Browser Statistics" %}
The **Browser Statistics** widget gives a simplified view of the browser information of your front-end users.
The **Browsers** graph gives statistical information regarding the specific Web Browser that visitors are using to view the site (i.e. **Google Chrome**, **Firefox**, **Edge**, etc.). Hovering over the sections of the chart will provide the name of the browser associated with that section.
The **Operating Systems** graph gives statistical information regarding the specific Operating System that visitors are using to view the site (i.e. **Windows**, **Mac** **OS X**, etc.). Hovering over the sections of the chart will provide the name of the Operating System associated with that section.
The **Mobile / Desktop** graph gives statistical information regarding the platform that visitors are using to view the site. Hovering over the sections of the chart will provide the platform of the device, either **Mobile** (i.e. **Phones**, **Tablets**, etc.) or **Desktop**, associated with that section.
{% endtab %}
{% tab title="Location Statistics" %}
The **Location Statistics** widget provides the region that your visitors are viewing your site from. Hovering over specific locations will provide the visitor count for that area.
{% endtab %}
{% tab title="Traffic Statistics" %}
The **Traffic Statistics** widget provides analytical data regarding the traffic on your site for the previous fourteen days. The green **Sessions** line on the graph refers to the number of times a visitor came to your site. The blue **Page Views** line on the graph refers to the number of individual pages that were viewed on your site. Multiple page views can come from the same session.
{% endtab %}
{% tab title="Traffic Sources" %}
The **Traffic Sources** widget provides a few SEO sources for your visitor traffic. **Direct** refers to visitors who came to the site via typing in the URL into their browser, while **Google** and **Bing** refer to visitors finding your site via search results respectively for either of the search engines. **Other** can refer to links from third-party sources (i.e. **Facebook**, **Twitter**, etc.).
{% endtab %}
{% endtabs %}
## Widget Actions
{% tabs %}
{% tab title="Refresh " %}
Clicking this button will **reload** the display for the associated widget. This action will **collect** and **display** the most current information for the widget.
{% endtab %}
{% tab title="Move" %}
Clicking and dragging on this button will allow you to **move** the widget to a different location.
{% endtab %}
{% tab title="Hide" %}
Clicking this button will **collapse** the widget and **hide** its' contents. Clicking the button again will **expand** the widget.
{% endtab %}
{% tab title="Remove" %}
Clicking this button will **remove** the widget from your **Dashboard**. The widget can be re-added to the Dashboard via the **Widget Menu,** which can be accessed by clicking the following tab on the Dashboard.
{% endtab %}
{% tab title="Widget Menu" %}
Clicking this tab will open the **Widget Menu**, allowing you to add new widgets to your **Dashboard**.
Simply clicking the name of the desired widget will place it on the **Dashboard**.
{% endtab %}
{% endtabs %}
# Modules
# Members
This module allows you to create/edit users for your site.
The **Members** module is the best way to keep track of all of your **customers info**, here you will store their **unique information**, not just their **name** but their **address**, **phone number**, **tax exemptions**, and **discounts**. After installing the **Members** module from the **SA Store** you can visit it along with the rest of your modules on the left side under the **Dashboard**. You can **edit** any of the **Members** info that join your site, however the best part about it is, your members can fill it out themselves when they join!
## Manage Members
### Member Table
The **Manage Members** page will present you a list of all **members** on your website. The list of **Members** is, by default, sorted **alphabetically** by the **last name.** However, you can use a different sorting criteria by clicking on the heading of one of the columns. There are also actions for each **row** of a **Member** to allow you to perform such tasks as **editing and deleting** a **Member**. You also have **static actions** available to **export, search or add** a new **Member**.
The following columns are available on the **Manage Members Page**:
* Last Name
* First Name
* Company
* Member Since
* Last Login
### Member Table Actions
#### 
Export All Members
This button will create an **Excel (.csv) file** containing all complete **Members** and their corresponding information.
#### 
Search
This button will allow you to search through your **Members** using the following parameters:
{% hint style="info" %}
You will not need to fill out every field, simply the one you wish to search with.
{% endhint %}
* Last Name
* First Name
* Company
* Member Since
* Phone Number
* Email Address
* Username
* Is Active
#### 
Add New Member
This button will take you to the **Create a Member** page. (See [Create/Edit Members](/user-guide/modules/members#creating-and-editing-members))
### Per Member Actions
#### 
Edit
This button will take you to the **Edit a Member** page. (See [Create/Edit Members](/user-guide/modules/members#creating-and-editing-members))
#### 
Delete
This button will **permanently removes Member** from your website.
#### 
Login as User
This button will log you into the website as the selected **Member**.
## Creating and Editing Members
Selecting **Create Member** will bring you to the above page.
Here, you will have the option to enter **general information** regarding your new **Member**.
Allows you to put a lot of detailed information about the **customers/members** of your website. When first creating a new **member**, you are limited to only putting in basic information. Once the **member** has been created, the rest of the tabs will be displayed for you to add more **detailed information** about the **Member**.
Each **Member** can have any number of **Users** connected to them. The **Member** account can act as an **administrative account** for the connected **Users**, giving the **Member** the ability to update individual **User** information.
Moving forward, any reference to **Member(s)** will be in reference to the **administrative account**, whereas **User(s)** will be in reference to the individual accounts.
{% tabs %}
{% tab title="Basic Info" %}
| **Field** | **Description** |
| ------------- | ------------------------------------------------------------------------------------------------------------------- |
| Company | Company associated with Member |
| Homepage | Website associated with Member |
| First Name | First name of Member |
| Middle Name | Middle name of Member |
| Last Name | Last name of Member |
| Comment | Notes regarding Member |
| Is Pending | Controls whether the Member account is pending review |
| Is Active | Controls whether the Member account is enabled/disabled |
| Member Avatar | A profile picture used for the member.
(You must create the member before you can set a profile picture)
|
| {% endtab %} | |
{% tab title="Username/Password" %}
#### *This tab is only present once the Member has been finalized*
### Username/Password Table Actions
**Create Username/Password entry**
| **Field** | Description |
| ---------- | ----------------------------------------------------- |
| First Name | First name of User |
| Last Name | Last name of User |
| Username | Desired Username for User |
| Password | Desired Password for User |
| Email | Desired Email Address for User |
| Is Active | Controls whether the User account is enabled/disabled |
### Per Username Actions
**Edit**
Edit the associated user entry.
**Delete**
Delete the associated user from the member.
{% endtab %}
{% tab title="Email Addresses" %}
#### *This tab is only present once the Member has been finalized*
### Username/Password Table Actions
**Create Email Address entry**
| **Field** | Description |
| ---------- | ---------------------------------------------------------------- |
| Email | Desired Email Address for User |
| Type | Categorization of this Email Address (i.e. Personal, Work, etc.) |
| Is Primary | Determines if this Email Address is the main email for the User |
| Is Active | Controls whether this email is enabled/disabled |
For more information on **Editing a User,** please see [Editing Users](/user-guide/modules/members#editing-users).
{% endtab %}
{% tab title="Addresses" %}
#### *This tab is only present once the Member has been finalized*
### Address Table Actions
**Create Address entry**
| **Field** | Description |
| -------------- | ----------------------------------------------------------- |
| Street | Desired Street Address for User |
| Unit, etc. | Field for Apartment/P.O. Box Numbers |
| City | Address City |
| State/Province | Address State/Province |
| Postal Code | Address Postal/Zip Code |
| Type | Categorization of this Address (i.e. Personal, Work, etc.) |
| Latitude | Latitudinal coordinate for the Address |
| Longitude | Longitudinal coordinate for the Address |
| Is Primary | Determines if this Address is the main Address for the User |
| Is Active | Controls whether this Address is enabled/disabled |
| {% endtab %} | |
{% tab title="Phone Numbers" %}
#### *This tab is only present once the Member has been finalized*
### Phone Table Actions
**Create Phone entry**
| **Field** | Description |
| ------------ | ----------------------------------------------------------------- |
| Phone | Desired Phone Number for Member |
| Type | Categorization of this Address (i.e. Personal, Work, etc.) |
| Is Primary | Determines if this Phone Number is the main Number for the Member |
| Is Active | Controls whether this Number is enabled/disabled |
| {% endtab %} | |
{% tab title="Groups" %}
#### *This tab is only present once the Member has been finalized*
### Group Table Actions
**Add Group to Member**
| **Field** | Description |
| ------------ | ----------------------------------------------------------------------- |
| Group | Select the desired group from the drop-down of previously created group |
| {% endtab %} | |
{% tab title="Misc." %}
This tab will have additional information if there is custom functionality built in for your site.
{% endtab %}
{% endtabs %}
## Manage Groups
Allows you to create, edit or delete **Groups**. **Groups** are a method of **categorizing** your **Members**. These can often be utilized for allowing certain groups to have **permissions** to specific pages or functionality on your website using the **Member Firewall Module**. (link)
### Manage Groups Table
The following columns are available on the **Manage Groups** Page:
* Name
* Group ID
* Is Default
### Manage Groups Actions
#### Add New Group
This button will take you to the **Create** **a Group** page. (See[ Create/Edit Group](/user-guide/modules/members#creating-and-editing-groups))
### Per Group Actions
#### Edit
This button will take you to the **Edit** **a** **Group** page. (See[ Create/Edit Group](/user-guide/modules/members#creating-and-editing-groups))
#### Delete
This button will permanently **removes** **a** **Group** from your website.
### Creating and Editing Groups
| Field | Description |
| ----------- | ---------------------------------------------------------------------------------------------- |
| Name | Name of the Group |
| Description | Description of the Group |
| Is Default | Determines if a Member will be assigned to this Group, unless
otherwise specified
|
## Manage Users
Shows all users tied to every member in the system.
This page lists all the Users connected to Members on your site.
### Users Index
####
The following columns are available on the **Manage Users Page**:
* Email Address
* Company
* Status
* Last Activity
* First Name
* Last Name
### Manage Users Actions
**Search**
This button will allow you to search through your **Users** using the following parameters:
{% hint style="info" %}
You will not need to fill out every field, simply the one you wish to search with.
{% endhint %}
* Email Address
* Company
* First Name
* Last Name
* Groups
### Per User Actions
**Login as User**
This button will log you into the website as the selected member.
#### Edit
This button will take you to the Edit a User page. (See Editing Users)
#### Delete
This button will permanently removes member from your website.
* Edit
* Delete
### Editing Users
| Field | Description |
| ---------- | ----------------------------------------------------- |
| First Name | First name of User |
| Last Name | Last name of User |
| Username | Desired Username of User |
| Password | Desired Password for User |
| Email | Desired Email Address for User |
| Is Active | Controls whether the User account is enabled/disabled |
# Page Editor
This module allows you to edit and organize the front-end content for your site.
The Page Editor module is probably one of the most important parts of your CMS (if not the most). It allows you to access the text and images that appear in key parts of your website and change them with an editing tool similar in nature to tools such as Microsoft Word.
## Manage Pages
### Pages Table
The **Manage Pages** page will present you a list of all **pages** on your website. There are **actions** for each individual page which can be found on the row for that page which will allow you to perform such **tasks** as **previewing** the **page**, **copying** the **page**, **edit page layout**, **edit page settings**, **edit page content** and **deleting the page**. You also have the **static action** to **create** a **new page**.
The following columns are available on the **Manage Pages Page**:
* Page
* \# Sub Pages
* Last Updated
### Page Table Actions
**Create Page**
This will take you to the **Create Page** section. For more information, see [Creating a Page](/user-guide/modules/page-editor#create-page)
### Per Page Actions
**Activate/Deactivate**
This **indicator** will let you know if the respective page is currently showing on the front end of your site. If the **indicator** is **green**, the page is **active**. If the **indicator** is **red**, the page is **inactive**. You can change the current setting by **clicking** the **indicator**.
**Preview Page**
This **button** will take you to the **page** on the **front end** of your site as it **appears** to your **visitors**.
**Copy Page**
This will **create** a **duplicate page** which will have **- copy** added to the **page name**.
**Edit Layout**
This will take you to the **Layout editor** where you can **manipulate** the **sizing/spacing** of the **sections** for the **page**.
**Edit Page Settings**
This will allow you to change **settings** for the **page** itself, such as **Page Name**, **Title**, **URL**, **SEO Settings**, **Permissions**, **Header Images**, etc.
**Edit Page Content**
This will take you to the **Front End Visual Page Editor** where you will be able to make **text**, **image** and **formatting changes** to the **content** on the **page**.
**Delete**
This will **delete** the **respective page**.
### Edit Page Settings
{% tabs %}
{% tab title="Page Details" %}
This section will give you the **ability** to **edit** the following fields:
| Field | Description |
| ------------- | --------------------------------------------------------------- |
| Parent Page | Sets where this page will fall in page hierarchy |
| Name | Sets the name of the page |
| Title | Sets the title that will appear in the web browser for the page |
| Header | Sets the text that will appear in the header of the page |
| Page Layout | Sets which pre-created layout the page will use |
| Page Type | Sets whether the page is a built-out page or a file (i.e. pdf) |
| File Name/URL | Sets the URL for the page |
| Owner | Sets the owner user for the page |
| {% endtab %} | |
{% tab title="SEO" %}
This section will allow you to **edit** the **Meta information** for the page which will affect your **SEO (Search Engine Optimization)**
| Field | Description |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| Meta Description | Sets the description that Search Engines will display for your page in search results |
| Meta Keywords | Sets keywords used for searching by Search Engines |
| Change Frequency | Sets expected frequency that the page will be updated for SEO purposes |
| Allow robots to index this page. | Sets whether robots (i.e. Google, Bing etc.) will be able to cache this page for their search engine |
| Allow robots to follow links on this page. | Sets whether robots (i.e. Google, Bing etc.) will be able to use links on the page |
| Show in Sitemap. | Sets whether this page will appear in your sitemap for your website |
| {% endtab %} | |
{% tab title="Access" %}
This section allows you to **set** who has **access** to your page.
| Field | Description |
| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Is this page active? | Sets whether this page can be accessed through the front end of your site |
| What groups of members have access to this page? | Sets which groups have access to this page |
| Show login screen when a guest tries to access a protected page? | Sets whether a login page will be shown if a visitor isn't signed in to your site and tried to access this page |
| {% endtab %} | |
{% tab title="Advanced" %}
| Field | Description |
| ---------------------------- | ---------------------------------------------------------------------------------------- |
| Header Image | Sets the main image for the page |
| Inherit Header Image | If set to yes, this page will use the header image from its' parent page |
| Header Image HTML | This field is used for developers, please check the Developer Guide for more information |
| Header Image Height | Sets the height attribute for the header image |
| View Template | This field is used for developers, please check the Developer Guide for more information |
| Icon Name | This field is used for developers, please check the Developer Guide for more information |
| Show Subnav on this page? | **Needs review** |
| Show Page in Main Navigation | Sets whether this page appears in the navigation bar on your website |
| Show Page in Sub Navigation | **Needs review** |
| |
| ------------ |
| {% endtab %} |
{% tab title="Misc" %}
This page will be filled with custom functionality for your site (**if applicable**).
{% endtab %}
{% endtabs %}
## Manage Layouts
In **Manage Layouts**, you can **create new layouts**, or **modify** existing ones.
### Layouts Table
The **Layouts Table** contains all the **page layouts** for your site. There are **actions** for each **individual layout** which can be found on the **row** for that page which will allow you to **perform** such **tasks** as **duplicating** the layout, **editing** the layout and **deleting** the layout. You also have the **static action** to **create a new page**.
The following columns are available on the **Manage Layouts Page**:
* Name
* Pages
### Layouts Table Actions
**Search**
This will allow you to **search** for a **specific layout**.
**Create Layout**
This will bring you to the **Create Layout** section. For more information, please see [Creating/Editing Layouts](/user-guide/modules/page-editor#creating-editing-layouts).
### Per Layout Actions
**Duplicate Layout**
This will create a duplicate layout which will have **Copy of -** added to the name.
**Edit Layout**
This will allow you to make **changes** to the **layout**.
**Delete**
This will **delete** the respective **layout**.
### Creating/Editing Layouts
**Layouts** tell your page how it will be **visually organized**. This section allows you to **edit** the **layout** for your page.
#### Properties
| Field | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Save | Saves changes you have made to this Layout |
| Layout Name | The name for this Layout |
| Bootstrap Version | Sets what version of Bootstrap is being used to generate the layout. Normally, this is better left to developers. |
| Pages | Lists what page(s) are currently using this layout |
| Id | Displays the Layout Id of the element currently selected. |
| Classes | You can enter custom CSS classes here separated by a single space to style the selected element. Normally, this is better left to developers. |
| Styles | You can enter in-line custom CSS styles here separated by a single semi-colon. Normally, this is better left to developers. |
**Tool Box**
**Structural Elements**
{% tabs %}
{% tab title="New Container" %}
**Containers** are the **base structural element** for **building** a **page layout**. Normally, most other elements will need to go **inside** a **container**.
You may have **more than one container in a page layout**.
{% endtab %}
{% tab title="New Fluid Container" %}
Much like a normal Container, a Fluid Container is used to house other elements for your page layout.
The most important difference is that Fluid Containers are not limited by the sizing restrictions placed on regular Containers, namely the width restrictions.
{% endtab %}
{% tab title="New Row" %}
Rows are another structural element, which must be placed inside a Container. The basic function of a Row is to be used to organize Column elements.
You may have more than one Row per Container.
{% endtab %}
{% tab title="New Column" %}
Columns are structural elements which control the spacing and width of the elements inside them. They can be resized to shape the overall feel of the Row they are in. Clicking a Column in the Sandbox will give you the following options:
**Show/Hide Column**
This will set whether the Column and its' contents are visible to your visitors.
**Delete**
This will delete the Column and its' contents.
**Move**
This will move the Column within the Layout Sandbox when clicked and dragged.
**Offset Left/Right**
This will push the Column left or right within the row for spacing purposes.
**Resize**
This will change the width of the Column and its' contents, which will allow you to place multiple Columns on the same Row.
{% endtab %}
{% tab title="New Div/Section" %}
Div's perform the same functions as containers, however they are usually nested inside other elements with the express purpose of applying CSS styling classes.
{% endtab %}
{% tab title="Clear Selections" %}
This will deselect the currently selected element in the Sandbox which is useful for adding a new container-type elements that you don't want inside other containers.
{% endtab %}
{% endtabs %}
**Content Elements**
{% tabs %}
{% tab title="Editable Area" %}
**Editable Regions** are the most used **Content Element** in most **Layouts**. These **Regions** can be used for anything from **simple text** to **housing images/videos** for your **front end**. Placing **Editable Regions** inside **Columns** allow them to be **resized** to fit **multiple Regions** next to each other on the same **Row**.
{% endtab %}
{% tab title="Add Module" %}
**Module Elements** are used to house S**ite Administrator Module Elements** such as **Forms**. **Photo Galleries**, **FAQ**'**s**, etc. This **Element** can also be used to house **Bootstrap Elements**.
{% endtab %}
{% tab title="Header Image" %}
This **Element** provides the **location** where the **Header Image** will be displayed on the page.
{% endtab %}
{% tab title="Submenu" %}
To be reviewed
{% endtab %}
{% tab title="HTML Block" %}
**HTML Blocks**, as their name suggests, allow you to include **HTML code** in your page. Normally, this is better left to **developers**.
{% endtab %}
{% endtabs %}
**Responsive Tabs**
The **Layout Sandbox** allows you to **design** how your **page** will be **visually represented** on **various sized devices**. By clicking the **tabs**, you can **manipulate** how the **sizing** of the **Elements** will appear on the **given device**.
Something to note, due to **Standard Best Practices**, new **elements** can only be **added** in the **Extra Small Screen** tab. This gives you a **mobile-ready design**. **Best practice** is to finalize from the **smallest screen** to the **largest screen**.
{% hint style="info" %}
**Remember: Layout changes will carry forward to larger sizes, but not downward to smaller sizes.**
{% endhint %}
## Create Page
For more information on these sections, please see [Edit Page Settings](/user-guide/modules/page-editor#edit-page-settings)
## Edit Page
This section will detail how you will **make changes** to the **content** on your **website**. To start, we have created a **basic layout for a page**, shown below:
**Clicking** the name of the page that you want to **edit** will bring you to the **Visual Editor** where you will have a **preview** of your **changes** before they are saved. Below, you can see the page using the **basic layout** from the above screenshot.
As can be expected, the sections on the **Visual Editor** **align** with the **structure** of the **Page Layout**.
**Clicking** into the **Editable Region** in the **Visual Editor** will provide the following **toolbar**:
This **toolbar** will give you access to **formatting** o**ptions** that you may be familiar with such as **Bold,** *Italic,* etc.
### **Uploading an Image**
To **upload** an **image** for use in an **Editable Region**, locate the above **Image Button**.
**Clicking** the button will bring up the **Image Properties** modal. **Clicking Browse Server** will open the **Site Administrator File Browser**.
File Browser Action Buttons
**Search**
Allows you to **search** for a specific file based on its' file name within the selected folder.
**Create New Folder**
**Creates** a **new folder** to **upload** images to within the **Site Administrator File Browser**.
**Select Folder**
This **drop down** will allow you to **select** the folder you wish to **browse** for **uploaded content**.
**Upload**
This **button** will bring you to your **system file browser** which will allow you to **select** an **image/file** to **upload**.
**Selecting** the **desired file** and clicking **Open** will **bring** the file into the **Site Administrator File Browser** where you can then **select** it to **add** to the page.
Again, **select** the file and **click OK->** to **bring** the file to the **Image Properties Modal**. Where you can now **define attributes** such as **Width**, **Height**, **Alternative Text** and **Alignment**.
**Clicking OK** will show you the **newly uploaded file** in the **Page Editor** along with your other content.
### Hyperlinking Text
To **insert** a **hyperlink** for use in an **Editable Region**, locate the above **Link Button**.
| Field | Description |
| ------------ | ---------------------------------------------------------------------------------------- |
| Display Text | Text that is displayed |
| Link Type | Type of hyperlink, such as:
URL, Link to anchor in the text, E-Mail & Phone
|
**Changing** the **Link Type** will change the **context menu**, we will go over those here.
{% tabs %}
{% tab title="URL" %}
URLs are the address of a Web page on the internet. For example, [https://www.siteadministrator.com](http://www.siteadministrator.com/)
| Field | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Protocol | The method by which data is sent from one computer to another on the Internet. You can choose from: http\://, https\://, ftp\://, news\:// & \ |
| URL | The URL you would like the Display Text to link to |
| Browse Server | Browse Site Administrator files to link to a specific file, a PDF for example. |
For URL there is a second **Target** tab on the Link modal. In this tab you can set the target of the link. Here are your choices :
| Field | Description |
| ------------------------ | --------------------------------------------- |
| \ | \~ |
| \ | \~ |
| \ | \~ |
| New Window (\_blank) | Opens link in new window |
| Topmost Window (\_top) | \~ |
| Same Window (\_self) | Opens in the window you are currently viewing |
| Parent Window (\_parent) | \~ |
| {% endtab %} | |
{% tab title="Link to an anchor in the text " %}
TBD
{% endtab %}
{% tab title="E-Mail" %}
| Field | Description |
| --------------- | ------------------------------------------------ |
| E-Mail Address | The email address that you would like to link to |
| Message Subject | The default subject for the email |
| Message Body | The default text you want to add to the email |
| {% endtab %} | |
{% tab title="Phone" %}
| Field | Description |
| ------------- | ------------------------------------------------------ |
| Phone Number | The phone number for the call you would like to create |
| {% endtab %} | |
| {% endtabs %} | |
### Pasting Text
{% tabs %}
{% tab title="Paste" %}
Clicking this button will paste the contents of your clipboard wherever your mouse cursor is currently resting in the editable area.
{% endtab %}
{% tab title="Paste as Plain Text" %}
Clicking this button will paste the contents of your clipboard (**without text** **formatting**) wherever your mouse cursor is currently resting in the editable area
{% endtab %}
{% tab title="Paste from Word" %}
Clicking this button will paste the contents of your clipboard **(removing Word-specific text encoding)** wherever your mouse cursor is currently resting in the editable area
{% endtab %}
{% endtabs %}
### Adding a Module Element
When **selecting** the **module** in the **Page Editor**, you will see the above **drop-down box**. This will allow you to **choose** which type of **element** you would like to **include** in the **specified section**.
The **options** in the **drop-down box** include, but are not **limited** to, **Photo Gallery Module**, **Bootstrap Element**, **FAQ**, **Form Module**, etc.
Once you have made your **selection**, clicking **Apply** will allow you to **choose** the **specific item** you want to include.
## Bootstrap Elements
### Bootstrap Elements Table
This **section** will allow you **create** and **modify complex HTML elements** such as **Text Carousels**, **Accordions**, **Horizontal** and **Vertical tabbed sections**.
The following **columns** are available on the **Bootstrap Elements Page**:
* Name
* Type
* Number of Items
### Bootstrap Element Table Actions
**Create Element**
This will take you to the **Create Element** section.
### Bootstrap Element Per Element Actions
**Edit Element**
This will allow you to **edit** the **element**.
**Delete element**
This will **delete** the **element**.
### Bootstrap Element Types
| Field | Description |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Accordion | A component that organizes content within collapsible items. Accordion allows the display of only one collapsed item at a time. |
| Horizontal Tabs | A component that organizes content within a series of horizontal tabs. Horizontal Tabs allow the display of only one tab at a time. |
| Vertical Tabs | A component that organizes content within a series of vertical tabs. Vertical Tabs allow the display of only one tab at a time. |
| Carousel | A component that organizes content within a revolving section. Carousel allows the display of one section at a time. |
## Manage Menus
**Manages** the **menus** for the **website** (**Main Navigation**, **Header**, **Footer**, can be placed almost anywhere else)
### Menu Tables
**Each Menu** will have its own **table** inside the **menu editor**. Here you can **drag and drop** **menu elements**
* Title
* Destination
* Icon
* Target
### Menu Table Actions
**Edit Menu**
**Create Menu item**
**Delete Menu**
### Per Menu Actions
**Activate/Deactivate**
**Synced/Not Synced**
{% hint style="warning" %}
**Once a menu item is de-synced it cannot be synced again - you must create a new menu item, or drag that item back to the menu in question from the Menu:Page Editor menu**
{% endhint %}
**Delete Menu Item**
{% hint style="info" %}
**Menu items cannot be deleted if they are currently Synced, or the parent of another menu item**
{% endhint %}
### Edit Menu Settings
Clicking the**Edit Menu** button will bring you to this page:
| Field | Description |
| -------------- | --------------------------------------------------------------- |
| Name | Set the name for this Menu |
| Menu Type/View | For Developer Use |
| Is Available | Sets whether this menu is available for use, or hidden from use |
## Create Menu
Creates menus for the aforementioned Manage Menu Section
# FAQs
FAQ sections are comprised of answers to frequently asked questions, and other important questions to aide your visitors. Additionally, these sections can be sub-divided any way you would like. Using the FAQs Module in your Site Administrator, you will be able to cater the FAQs section to your exact specifications and then continually update/delete the content in real time. The FAQs are logged into separate databases for easy browsing and searching. When you choose to utilize your FAQs Module, you will click the ‘FAQs’ button under the main navigation of your Site Administrator, and the FAQs options will expand below.
# News
The News Module will allow you to add, edit, and remove news articles with titles, bodies, and embedded images in real-time. Using the page editor described above, you can design news articles with saved styles and with a visual editor; older articles will automatically be archived for a specified amount of time.
# Photo Gallery
# Forms
# Catalog
This module allows you to manage the products and manufacturers aspect of your website.
The Catalog module is how you will manage your products for your site. This module comes with many useful and robust features for management and organization, such as Categorization for Products, Manufacturers for Products, etc. This module will also allow you to keep track of your current stock and any orders placed on your site.
## Categories/Products
### Categories Table
The Categories Members page will present a list of all categories for you website. The ordering of the categories is customizable and can be changed at any time. There are also actions for each **row** of a Category to allow you to perform such tasks as activating/deactivating the category, viewing products within the category, editing settings for the category and deleting the category.
The following columns are available on the **Categories/Products page:**
* Categories
* Count
* Subcategories
* Store
### Categories Table Actions
**Add New Category**
This button will create a new Category. For more information, see Creating/Editing Categories.
**Search**
This button will allow you to search through your Categories. You can search by **All, Featured Only** or **New Only.**
### Per Categories Actions
**Active/Inactive**
**View Products**
**Edit Category Settings**
**Delete Category**
### Edit Categories Settings
{% tabs %}
{% tab title="Settings" %}
| Field | Description |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Store | Choose store to be associated with this category (You can create Stores in Manage Catalog-> Stores) |
| Inherit Parent Store | Inherit associated store from parent category |
| Parent Category | Make this category a sub-category of another |
| Is Active | Set whether this category is available for use |
| Name | Name of Category |
| Title | Text that appears in the tab on your browser |
| Header | This is the text that will appear as the main heading of the page |
| Price Adjustment | Amount to adjust prices. You may set this as an Amount, in a Percentage |
| Inherit Product Images as Category Box Image | Sets whether product images are inherited from parent category |
| {% endtab %} | |
{% tab title="Description" %}
This is the area you will create or edit the description for this category
{% endtab %}
{% tab title="Images" %}
**Select files** button and navigating your file system to the image you want to upload, or by dragging and dropping the image on the gray box area.
Here you can upload one or more images by either clicking the **Select files** button and navigating through your computer's file system and selecting the image you wish to upload, or by dragging and dropping the image on the gray box.
Once and image is uploaded you can Deactivate, Display as Box Image, Display as Banner or Delete it.
{% endtab %}
{% tab title="URL's" %}
Sets the URL for the category. This setting is usually configured by developers.
{% endtab %}
{% tab title="SEO" %}
This section contains information seen by search engines such as Google or Bing.
{% endtab %}
{% tab title="Misc" %}
| Field | Description |
| --------------------- | ------------------------------------------------------- |
| Secondary Description | An alternate description for this category |
| Icon | Allows you to set a Font Awesome Icon for this Category |
| Is Inherited Store | TBD |
| {% endtab %} | |
| {% endtabs %} | |
## Manufacturers/Products
### Manufacturers Table
The following columns are available on the **Manufacturers/Products page:**
* Name
You can toggle sorting manufacturers by alphabet and reverse-alphabet order by clicking **Name**
### Manufacturers Table Actions
Search
Clicking this button will allow you to search **Manufacturers** by name
Add New Manufacturer
Clicking this button will take you to the **Add Manufacturer** page, see [**Edit Manufacturer Settings**](/user-guide/modules/catalog#edit-manufacturers-settings)
### Per Manufacturers Actions
View Products
TBD
Edit Manufacturer
Clicking this button will take you to the **Edit Manufacturer** page, see [**Edit Manufacturer Settings**](/user-guide/modules/catalog#edit-manufacturers-settings)
Delete Manufacturer
clicking this button will delete the associated Manufacturer
### Edit Manufacturers Settings
{% tabs %}
{% tab title="Settings" %}
| Field | Description |
| ------------ | ------------------------------------------------------------------------------- |
| Name | This is the text that will appear in the site map and other links to this page. |
| Title | This is the text found in the browser's title bar. |
| Route | This is the URL for the Manufacturer. |
| {% endtab %} | |
{% tab title="Description" %}
This tab has a single text box where you can provide the description for the associated Manufacturer.
{% endtab %}
{% tab title="Images" %}
**Select files** button and navigating your file system to the image you want to upload, or by dragging and dropping the image on the gray box area.
Here you can upload one or more images by either clicking the **Select files** button and navigating through your computer's file system and selecting the image you wish to upload, or by dragging and dropping the image on the gray box.
Once and image is uploaded you can Deactivate, Display as Box Image, Display as Banner or Delete it.
{% endtab %}
{% tab title="Meta Tags" %}
The settings in this tab are for Search Engine Optimization
| **Field** | Description |
| ------------ | -------------------------------- |
| Description | Manufacturer description for SEO |
| Keywords | Keywords for SEO |
| {% endtab %} | |
{% tab title="Misc" %}
| Field | Description |
| --------------- | ----------------------------------------------------- |
| Normalized Name | TBD |
| Is Featured | Sets whether this Manufacturer is **Featured** or not |
| {% endtab %} | |
| {% endtabs %} | |
## Add New Product
{% tabs %}
{% tab title="Basic Information" %}
| Field | Description |
| -------------------- | ------------------------------------------------------------------------------- |
| Name | This is the text that will appear in the site map and other links to this page. |
| Title | This is the text found in the browser's title bar. |
| Header | This is the text that will appear as the main heading of the page. |
| Style/Product Number | Set the Style/Product number here. |
| Is Featured | Sets whether this product is **Featured** or not. |
| Is New | Sets whether this product is listed as **New** or not. |
| Manufacturer | Choose from existing manufacturers to associate this product with. |
| {% endtab %} | |
{% tab title="Description" %}
| Field | Description |
| --------------------- | ------------------------------------------------ |
| Primary Description | Description field with rich text editing. |
| Secondary Description | Alternate description without rich text editing. |
| {% endtab %} | |
{% tab title="Images" %}
The settings in this tab are available when editing after the product is created.
**Select files** button and navigating your file system to the image you want to upload, or by dragging and dropping the image on the gray box area.
Here you can upload one or more images by either clicking the **Select files** button and navigating through your computer's file system and selecting the image you wish to upload, or by dragging and dropping the image on the gray box.
Once and image is uploaded you can Deactivate, Display as Box Image, Display as Banner or Delete it.
{% endtab %}
{% tab title="Availability" %}
| Field | Description |
| --------------- | ------------------------------------------------------- |
| Is Available | Sets whether this product is available or not. |
| Available Date | Sets when this product will become available. |
| Expiration Date | Sets when this product expires and becomes unavailable. |
| {% endtab %} | |
{% tab title="Price" %}
TBD
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="Attributes" %}
* **Product Attributes**
This box contains the attributes applied to this product. Attributes can have many values, for instance you may have a **Size** Attribute that may have many values such as **Small**, **Medium**, **Large** etc.
* **Available Attributes**
This box contains attributes that are not currently applied to this product. Usually these attributes are specific to this product, although you can create Global Attributes that are available to all products.
* **Add/Edit Custom Attribute**
Clicking this button will allow you to create/edit a custom attribute for this product
* **Name**
Name of attribute - **Size**, or **Color** for instance.
* **Delete All**
Delete all values for this attribute
* **Value**
An aspect of this attribute - For instance if the Attribute is titled **Color** you may have many separate values for each **Color** you provide of this product.
* **Alias**
Optionally, you may add and Alias to a value. This assists in search results, where you may have many **Values** for and attribute that are similar. For instance, if you have many **Values** that are shades of a color (**Navy, Light Blue, Ocean Blue**) you might set "Blue" as an **Alias** for all those **Values** - As a result, when you search for "Blue" all the colors you have given the **Alias** "Blue" will show.
* **Price Offset**
This offsets the base price of the product. For instance, if this Attribute **Value** makes your product more expensive than the base product, you may want to offset the cost to accommodate.
* **Weight**
This offsets the base weight of the product. For instance, if this Attribute **Value** makes your product heavier or lighter than the base product, you may want to offset the weight to accommodate for shipping.
* **Active**
Sets whether this Attribute Value is active or inactive
* **>>** And **<<**
Clicking these buttons will move the selected attribute to and from the **Product Attributes** and **Available Attributes** areas.
* **Show Individual Skus**
Individual Skus are not shown by default. Clicking this button presents all Skus for this product. You can then filter what Skus are shown by Attribute Values.
Once presented you will see table of information generated from the applied Attribute(s): Attribute(s), Inventory count, Sku, Availability Toggle, Weight and Price offset.
(If more than one Attribute is applied to a product, there will be a Sku generated for each combination of all possible Attributes and their Values, e.g. You have an Attribute for Colors, and a separate Attribute for Size - Each Value in Colors will have a Sku generated for every Value in the Size Attribute)
{% endtab %}
{% tab title="Categories" %}
On this tab you can assign a one or more category to this product. (To select more than one category, hold Ctrl and click the selected categories)
If you have many categories, you can search for a specific category via the search bar.
{% endtab %}
{% tab title="Related Products" %}
In this tab you can search your library of products and
them to the **Related Products List.**
{% endtab %}
{% tab title="URL's" %}
In this section, you can set URL routes for the product which will affect how the product appears in the address bar. For example, to get to your product, you could type 'mydomain.com/my-product' to reach the product if you set the Route to be /my-product.
Setting the Primary URL will force that Route to be the most relevant in searches.
Prepending Parent Category Routes will add the product category name to the route. For example, the route would then become 'mydomain.com/my-category/my-product'.
{% endtab %}
{% tab title="SEO" %}
This tab will allow you to set the Search Engine Optimization for your product.
The description will contain the basic information about your product, while the keywords will affect Search Results for Search Engines (such as Google or Bing).
{% endtab %}
{% endtabs %}
{% tabs %}
{% tab title="Tags" %}
Adding keyword tags to your product will make it easier to be found with internal searches on your site. This does not affect your SEO for the product.
{% endtab %}
{% tab title="Shipping" %}
This section allows you to set additional shipping information for the product.
| Field | Description |
| ------------------------ | ------------------------------------------------------------- |
| Additional Shipping Cost | Adds to the total shipping cost for this item |
| Weight | Lists the weight for the product (lbs) |
| Free Shipping | Determines whether this product is eligible for free shipping |
| {% endtab %} | |
{% tab title="Taxes" %}
TBD
{% endtab %}
{% tab title="Misc" %}
| Field | Description |
| ----------------------------- | ----------------------------------------------------------- |
| Notes | Notes for you regarding the product |
| Gender Specific | Determines whether the product is gender specific |
| Is Limited Stock | Determines whether there is a limited supply of the product |
| Total Sold Offset | TBD |
| Total Products Ordered Offset | TBD |
| {% endtab %} | |
{% tab title="Remove Tabs" %}
Clicking this tab will hide the other tabs from the top of the screen. Clicking 
at the top right of the screen, will cause the tabs to appear again.
{% endtab %}
{% endtabs %}
## Manage Orders
### Manage Orders Table
* Order Number
* Store
* Company
* Customer Last Name
* Customer First Name
* Status
* Date
* Units
* Amount
### Manage Orders Table Actions
* Search
### Per Manage Orders Actions
TODO
### Edit Manage Orders Settings
TODO
## Manage Catalog
TODO
### Customize Order Status
On this page you can create and edit the sequence of status' an order goes through. Individual status can be edited with custom icons and titles (i.e. a Truck icon with the Shipping title suggests a state where the order is in transit to be delivered) You can drag and drop status' to rearrange their sequence.
Sub Status Items are states that are not in the normal life-cycle of an order. i.e. If an order is cancelled, that is not a normal part of the order life-cycle of Processing->Shipped->Delivered that is more consistent.
**Charge Step**
You may select one order status as the **Charge Step**. This step is where the customer will be charged for their order.
**Void Step**
You can set one **Sub-Status Item** as the **Void Step**. The **Void Step** is where the order will be voided.
### Order E-Mail Templates
You can create e-mail templates to be sent out at various stages of the order process. In this section, you can name and customize the look/feel of the template.
### Price Groups
### Promo Codes
### Tax Groups
### Attributes
### Manufacturers
### Stores
### CSV Import
### SA2 Import
# Events
# Staff
# Settings
# Developer Guide
# The Basics
# Controllers
Controllers contain methods which are executed when a route is accessed. To learn how to map a route to a controller method, see the [routing](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/the-basics/routing.md) documentation.
### Application Controller
An application controller responds to requests from the front application. Notice that application controllers extend `sa\application\controller`.
```php
}
}
```
### Site Administrator Controller
Siteadmin controllers should be used for responding to routes that should only be accessible from Siteadmin. All routes that map to this type of controller will automatically require the user to be logged into their siteadmin dashboard.
> The class `saController` extends `controller` and therefore inherits all of the behavior you would expect from a regular application controller.
>
> By convention, all classes that extends `saController` should be have a `Sa` prefix (i.e. SaUserController instead of UserController).
```php
}
}
```
### Resource Controller
A `resource controller` responds to routing requests from `resourceRoutes`. These controllers serve assets, such as stylesheets, images, files, or javascript files which are specific to the module the controller belongs to.
> Notice the resource controller extends `controller`, just as a regular controller. All controllers inherit the following methods: `css()`, `js()`, and `img()`. Therefore, all controllers are resource controllers. It is still best practice to have a dedicated controller to handle all of your module's assets. This allows both application and administrative controllers to share the same assets.
>
> `css()` method will search `/{module name}/src/css/` for your stylesheets.`js()` method will search `/{module name}/src/js/` for your javascript files.`img()` method will search `/{module name}/src/img/` for your images.
>
> These methods can be overwritten to fetch assets from other locations on the server.
#### Basic Usage
To create a resource controller, simply extend `controller`. Your new resource controller will automatically inherit the necessary methods (mentioned in the note above) to render resources for you.
```php
display();
}
public function js($view)
{
// change location of js files in /javascript
$view = new assetView($view, static::assetLocation('javascript'));
$view->display();
}
public function img($view)
{
//change location of images in /images
$view = new assetView($view, static::moduleLocation('images'));
$view->display();
}
/**
* If your module needs to access files which are outside the
* scope of css, js, or images, you can create a custom resource
* method. A resource route must be mapped to this method for this
* to work.
*/
public function docs($view) {
$view = new assetView($view, static::moduleLocation('documents'));
$view->display();
}
}
```
#### Extending Resource Controllers
Resource controllers are isolated on their own for good reason. When you extend a controller or override its `IOC_NAME` reference, the `css()` , `js()` , and `img()` methods will search the extended module's directories for assets instead of in the core module. Since your extended module likely won't have the same CSS/JS/image files as the parent module, all your assets will return a `404` response when accessed.
With this in mind, **you should never extend a resource controller.** Doing so will result in assets breaking in the parent module.
> But can't the assets from the parent module be copied into the extended module?
...yes, but **don't do this either** unless you want a massive headache every time the parent module adds a new asset, rolls out a bug fix for an asset, or implements a new feature in JS a file. You'll have to copy & paste all the assets to your extended module every...single...time.
Instead, your extended module should have its own uniquely named resource controller. The module's resource routes should also be unique to avoid conflicting with the parent module's assets.
### Rendering Content
View the [responses](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/the-basics/responses.md) documentation to learn about rendering content from a controller.
## Accessing URL Parameters
URL parameters from [dynamic routes](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/the-basics/routing.md#url-regex-params) are passed into the controller as method parameters. The following route contains 2 URL parameters. The first represents a user ID, the second is an invoice ID.
```
^/user/[0-9]/invoice/[0-9]$
```
These parameters are passed into the `getUser()` method in the same order as they were defined in the route.
```php
}
}
```
## Dependency Injection
URL parameters are often ID's which represent real entities in the database. It is bad practice to query the database manually from the controller method. Instead, you should add a docBlock above the method definition, which specifies the object type of the entity associated with the ID.
### Don't
```php
find('saUser', $userId);
$invoice = app::$entityManager->find('invoice', $invoiceId);
//
}
}
```
### Do
```php
}
}
```
# Rendering with Vue JS
Coming soon...
# Responses
All controllers must return a response to be sent back to the user's browser. Siteadmin provides many response types which configure the appropriate headers for each content type.
### HTML Response
```php
data = array('first_name' => 'John', 'last_name' => 'Doe');
// Render the view
return $html;
}
}
```
#### Constructor Parameters
| Field | Type | Optional/Required | Definition |
| ------------- | ------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| $template | string | required | The layout to wrap around the HTML content. Use `null` for no layout. Use `master` for default application layout. |
| $view | string | required | The HTML content to render in the template. Siteadmin will search for the template in `/themes/{theme}/views`, then `/modules/{module}/views` if not found. |
| $location | string | optional | Location of the view. To load a view from a different module, use `\{vendor}\{module}\SomeController::viewLocation()`. |
| $responseCode | int | optional | HTTP response code (200, 404, etc.) |
### JSON Response
```php
data = array('first_name' => 'John', 'last_name' => 'Doe');
// render json
return $json;
}
}
```
#### Constructor Parameters
| Field | Type | Optional/Required | Definition |
| ------------- | ---- | ----------------- | ----------------------------------- |
| $responseCode | int | optional | HTTP response code (200, 404, etc.) |
### XML Response
```php
data = array('first_name' => 'John', 'last_name' => 'Doe');
// render xml
return $xml;
}
}
```
#### Constructor Parameters
| Field | Type | Optional/Required | Definition |
| ------------- | ------ | ----------------- | ----------------------------------- |
| $rootTag | string | required | The XML document's root tag. |
| $namespace | string | optional | XML namespace definition. |
| $responseCode | int | optional | HTTP response code (200, 404, etc.) |
### File/Binary Response
Renders a file, such as an image or PDF, in the browser.
```php
or /path/on/current/website) |
| $isPermanent | boolean | false | Default: false. If true, 301 redirect header will be included in the response. |
## Custom Responses
### The Response Interface
All responses must implement the `sa\application\responses\ISaResponse` interface. This requires your custom response to include the following methods,
| Method | Returns | Description |
| ------------- | ------- | ------------------------------------------------------------------------------------------ |
| buildResponse | void | Sets appropriate headers for the response. |
| getResponse | string | Serializes the response's data into a string. |
| getHeaders | array | Returns key-value pairs as an array, where the key is a header and the value is its value. |
### The Response Trait
Most responses allow the developer to set custom headers and a custom response code. A wrapper for this exists through the `\sa\application\responses\TViews` trait, which exposes a `headers` property, as well as a helper method for setting the response code: `setResponseCode()`.
| Method/Property | Type | Description |
| -------------------------- | -------- | --------------------------------------------------------------------------------------------- |
| headers | array | An associative array of headers. The key is the header name. The value is the header content. |
| setResponseCode($httpCode) | function | Sets the response code for the request to the given HTTP code. |
### Custom Response Example
```php
responseCode = $responseCode;
}
/**
* Gets called before getHeaders and getResponse
*/
public function buildResponse()
{
$this->setResponseCode($this->responseCode);
$this->headers[] = new ResponseHeader('Content-Type', 'application/x-yaml');
}
/**
* Gets the response content to be echo to the user
*
* @return string
*/
public function getResponse()
{
return yaml_emit($this->data);
}
/**
* Gets the headers to be sent to the user
*
* @return array();
*/
public function getHeaders()
{
return $this->headers;
}
}
```
## Downloading Files
Sometimes an application will need to download a file instead of rendering its contents in the browser. This is useful for exporting XML, images, word documents, zip files, among others.
### The Downloadable Response Trait
Download capabilities are exposed through the `DownloadableResponseTrait` . This trait exposes a `setDownloadable()` method which accepts a file name as its only parameter. Once this method is executed, the response object will configure the necessary headers to download its contents as a file.
The following response types implement this trait:
* JSON
* XML
* File
### Download JSON
```php
public function downloadJson() {
$json = new Json();
$json->data = [
"id" => 1,
"first_name" => "John",
"last_name" => "Doe"
];
$json->setDownloadable('member.json');
return $json;
}
public function downloadXml() {
$member = modRequest::request('auth.member');
$xml = new Xml('member');
$xml->data = doctrineUtils::getEntityArray($member);
$xml->setDownloadable('test.xml');
return $xml;
}
```
### Download XML
```php
public function downloadXml() {
$xml = new Xml('member');
$xml->data = [
"id" => 1,
"first_name" => "John",
"last_name" => "Doe"
];
$xml->setDownloadable('member.xml');
return $xml;
}
```
### Download Files
The `File` response can be used to download any type of file. Common use cases include:
* CSV
* Images
* PDFs
* Word Documents
...or any other type of file.
```php
public function downloadFile() {
// Download file from the module's /img directory.
$file = new File(__DIR__ . '/../img/photo_1.png');
$file->setDownloadable('photo_1.png');
return $file;
}
```
# Routing
Routing is the process of mapping a URL pattern to a controller method. When that URL pattern is accessed, the request will execute its corresponding controller.
## Where are routes defined?
Routes are defined inside the `getRoutes()` method of a module's configuration file, identified by `{moduleName}Config.php`. The method returns an array of `Route` objects. Specialized route objects, which extend the `Route` object may also be included in the list.
```php
'user_list',
'name' => 'Our Users',
'route' => '/users/list',
'controller' => 'UsersController@index',
'method' => 'GET',
'priority' => route::PRIORITY_HIGH,
'protected' => false
))
);
}
}
```
## Basic Route
Basic routes are defined by the `sa\application\route` object. These are strictly used for application-facing routing. In other words, this route type is not acceptable for static assets (CSS, JS, Img) or administrative pages.
#### Route constructor options
| Field | Required | Type | Description |
| ------------ | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | required | string | An identifier that is unique to this route. The naming convention for route Ids is `{moduleName}_{action}`. The Id should only contain lowercase alphabetic characters with underscores delimiting each word. |
| `name` | required | string | A user friendly name for the route. This is generally used for the page heading, if applicable. |
| `route` | required | string | The URL pattern that is mapped to the controller. There are two ways to define a route pattern. 1. A static URL, such as `/users/list` 2. A regular expression to capture dynamic URLS (/users/edit/1). |
| `controller` | required | string | The controller method to be executed when the route is accessed. The controller and method are delimited by a '@'. For example: `UsersController@editUser`, where the controller is `UsersController` and the method to be executed is `editUser`. |
| `method` | optional | string | The HTTP verb that is allowed to access this route. Valid values are `GET` and `POST`. If not specified, the route will except all HTTP verbs. |
| `priority` | optional | constant | If a route with the same name is already defined, you can give your route a higher priority so it will execute instead of the other duplicate route.Valid values: `route::PRIORITY_EXTREMLY_HIGH`,`route::PRIORITY_HIGH`, `route::RIORITY_ABOVENORMAL`, `route::PRIORITY_NORMAL`, `route::PRIORITY_BELOWNORMAL`, `route::PRIORITY_LOW` |
| `protected` | optional | boolean | If true, the route will require users to be logged in to access it. If not specified, the default value is `false`. |
## Siteadmin Route
Siteadmin routes are defined by the `sa\application\saRoute` object, which extends the basic route and accepts the same constructor parameters. These routes may only be accessed by users who are logged in as a Siteadmin user. The naming convention of siteadmin routes is similar to the convention for basic routes, with the addition of a `sa_` prefix at the beginning of the route `id` field.
```php
'sa_user_list',
'name' => 'Our Users',
'route' => '/users/list',
'controller' => 'UsersController@index',
'method' => 'GET',
'priority' => route::PRIORITY_HIGH
));
```
### Resource Route
Resource routes respond to requests for CSS, JS, and image assets.
```php
'user_css',
'name'=>'css',
'route'=>'^/user/css/[a-zA-Z0-9-_\.]{1,}$',
'controller'=>'UserResourceController@css'
));
```
## URL Parameters & Regular Expressions
Some routes may require dynamic parameters, such as ID's or page titles. The routing system uses regular expressions to restrict the data type and format of theses route parameters.
#### Numeric ID with variable length
```
^/user/[0-9]$
```
#### Numeric ID with fixed length
```
^/user/[0-9]{9,9}$
```
#### String parameter
```
^/pages/[a-z0-9-_]$
```
#### Multiple Parameters
```
^/user/[0-9]/invoices/[0-9]$
```
#### Optional Parameters
It's worth noting that optional parameters are not supported. The following routes are not valid.
```
^/user/[0-9]{0,}$
^/user/[0-9]?$
```
### Passing URL Parameters to a Controller
View the controller documentation's [Accessing URL Parameters](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/the-basics/controllers.md#accessing-url-parameters) section.
### Find route object by ID
While the [URL utility](/developer-guide/utilities-and-helpers/url) is useful for parsing and building URLs, sometimes it is necessary to access the raw `route` object. The global `app` context provides a helper function to achieve this.
Consider the following route...
```php
new route(array(
'id' => 'user_list',
'name' => 'Our Users',
'route' => '/users/list',
'controller' => 'UsersController@index',
'method' => 'GET',
'priority' => route::PRIORITY_HIGH,
'protected' => false
))
```
You can retrieve this object by referencing its ID with the line below.
```php
app::get()->findRouteById('user_list')
```
# Views
## View Locations
#### SiteAdmin Module Views
SiteAdmin modules provide default view files so you can install and use the modules without having to build the UI from scratch. These files are located in `{root}/siteadmin/modules/sa/{module}/views`. You should never edit a core module's views directly. Instead, either extend the module or make a theme view.
#### Application Module Views
Application modules either extend an existing Siteadmin module, or introduce new functionality to the application. The views for an application module are located in `{root}/siteadmin/modules/{application}/{module}/views`.
You should only use an application module to extend a view when you are also adding/changing the data in the view's corresponding controller. For strictly aesthetic changes, make a theme view instead.
#### Theme Views
Theme views are used to change the HTML markup of a Siteadmin module's view. These views should not be used to extend application modules, because such modules are normally project specific and are readily available for you to edit without affecting other applications.
## Order of Rendering
When you attempt to render a HTML view, the application will search for that template in each of the locations listed in the previous section.
Consider attempting to render the `members_user_list` view. In the controller, you might see something like this:
```php
return $view;
}
}
```
**Directory Structure**
```
├───Modules
│ ├───{Theme Directory}
│ │ └───Members
│ │ └───src
│ │ └───views
│ │ │ members_user_list.php
│ │ │ ...
│ └───sa
│ └───member
│ └───src
│ └───views
│ │ members_user_list.php
│ │ ...
├───Themes
└───{Theme Directory}
└───views
│ members_user_list.php
│ ...
```
The template system will first check the `theme views` directory for a file named `members_user_list.php`. If not found, the `application module views` folder will be checked. Lastly, the `Siteadmin module views` will be checked. If the file is not found in any of the three locations, an error will be thrown.
In this case, the view exists inside of `theme views`, so it will be rendered. The `members_user_list.php` file located elsewhere will not be used.
## Accessing Controller Data
All views have access to a `$self` variable, which contains the context for the view. From this context, you can access data passed from the controller. There are two ways to access the data:
#### The 'Data' Property
Controller data can be accessed directly through the view's data array.
```php
$self->data['user_id']
```
\\
#### Dynamic Variables
Controller data is passed in key/value pairs. The key is parsed as a PHP variable which, like `$self` can also be accessed from the view.
```php
// The key 'user_id' exists in the view's controller method.
echo $user_id;
```
## Subviews
It is recommended to separate a monolithic view into many subviews. Once your subviews have been created, you can embed them in a parent template.
**dashboard.php (parent view)**
Assume the variable `$members` is passed down from the controller.
```php
subview('members_user_list.php', array('members' => $members)) ?>
```
**members\_user\_list.php (sub view)**
```php
```
**Result**
```markup
```
## Conventions
### Naming Conventions
#### Views
A view file must be prefixed with the name of the module it belongs to, followed by a short description of its contents.
```
catalog_product_list.php
```
In the example above, `catalog` is the module, and `product_list` describes the content of the view.
#### Subviews
Subviews share a similar naming convention with regular views, but must also be prefixed with an underscore.
```
_catalog_product_list.php
```
### Creating Reusable Views
A view is not restricted to any one controller method. It can be used in other areas of an application as well. There are a few conventions to follow to ensure views are maintainable and reusable.
1. **Short Views** - Avoid creating large, monolithic views. Identify the components of a view, and divide them into sub-views.
2. **Avoid Passing Objects** - An application will likely contain data with similar fields, which might be appropriate to be reused in a subview. Consider a `user's home address` and a `catalog shipping address`. Both data sets contain similar fields, such as street, city, state, etc. If you were to create a view which expects a `saMemberAddress` object, it would be difficult to use that same view with a `ShippingAddress` object. Instead, you should create a view that expects `street`, `city`, and `state` fields (instead of an object), so that single view can be used by both data types.
# View Models
The concept of a view model in SiteAdmin is derived from Microsoft's .NET framework. Though in comparison, SA's implementation is varied. Their purpose is to prevent excessive code bloat in application controllers. As mentioned in the [controller documentation](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/the-basics/controllers.md), a controller method should only contain logic for receiving and responding to requests. Business logic, such as querying/constructing data or performing calculations should be handled elsewhere. A ViewModel is that *elsewhere*.
### File Location
View models reside inside of specific modules.
```
{application root}/siteadmin/modules/{vendor}/{module}/ViewModels/
```
### The ViewModel Interface
All view models must implement the `\sa\application\IViewModel` interface.
| Method | Returns | Description |
| ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `__construct(array $data)` | n/a | The `$data` parameter will contain any data initially passed from the parent view. |
| `getXssSanitationExcludes()` | array | Constructs and a returns an array of keys, where each key corresponds to the name of a public property in the view model. Any fields in the returned list of keys will not be sanitized for XSS content. |
## Your First ViewModel
### View Model Class
```php
defaultOptions = $data['default_options'];
$this->heading = $data['shipping_heading'];
$this->shippingOptions = null;
}
public function getShippingOptions() {
if ($this->shippingOptions != null) {
return $this->shippingOptions;
}
$options = array();
//
return $options;
}
public function getXssSanitationExcludes() {
return array('defaultOptions', 'heading');
}
}
```
#### Scope of Public Properties
When binding a view model to a subview, its public properties will made available in the subview's global scope. For example, the view model's properties `defaultOptions` and `heading` may be accessed in the subview as so,
{% code title="{module}/views/\_shipping\_options\_list.php" %}
```php
```
{% endcode %}
> A view model's public properties are generally reserved for constants or default values. It is not recommended to populate these values by performing business logic in the constructor. For business logic, use the view model's helper methods instead.
Notice both public properties are included in the `getXssSanitzationExcludes()` method. Any *public* properties will be excluded from XSS sanitizing step.
#### Scope of Private Properties
As you might expect, the view model's private properties will not be exposed to the view. In addition, *private methods are not affected by the `getXssSanitizationExcludes()` method*!.
#### Helper Methods
In the previous example, the `getShippingOptions` method is exposed as a helper method. This is where complex business operations are performed, such as fetching data from a repository or constructing data structures.
### Binding the View Model
There are two ways you can use your view models in an application. The general rule of thumb is to use the subviews method with controllers which respond with HTML templates. Use the direct controller method for controllers which respond with JSON, XML, or any other non-template response.
#### Subviews
For controller methods that respond with HTML content, it is best practice to create a parent view, then populate it with subviews which are bound to view models.
> To encourage this practice, it is not possible to directly bind a view model to a parent view.
**Binding view model to subview**
{% code title="parent\_view\.php" %}
```php
subViewWithModel('_shipping_options_list', 'ShippingOptionsListViewMo
del', $data) ?>
```
{% endcode %}
| Parameter | Type | Description |
| ------------ | ------ | ----------------------------------- |
| `$view` | string | The name of the sub view to render. |
| `$viewModel` | string | The view model to bind to the view. |
| `$data` | array | The parent view's data. |
\\
**Accessing view model in subview**
Once a view model has been bound to a subview, a `$viewmodel` variable becomes available in the subview's context. This variable holds the view model's instance. It is used to access helper methods within the view model.
{% code title="\_shipping\_options\_list.php" %}
```php
getShippingOptions as $option) {
// render option
}
?>
```
{% endcode %}
#### Directly in Controller Method
Some controller methods respond with JSON or XML rather than a HTML template. These types of responses don't have views, so binding a view model to a subview is not possible. Instead, the view models should be used directly.
# Models & Doctrine ORM
# Models
A model is a concrete class representation a record of data (aka `entity`) which is persisted to the data storage layer of the application. Model classes are home to any business logic that is specific to a *single entity*. Operations in the model should not perform database queries or one-off business operations. Instead, they should be composed of helper functions to designed to simplify common operations (e.g formatting the entity's fields or building data structures from the entity).
### Doctrine ORM
The model layer of Siteadmin uses the [Doctrine 2 ORM](http://docs.doctrine-project.org/en/latest). All models use the same annotations and entity relationship methodologies as documented on Doctrine's website, and will not be discussed further here.
### Your First Model
A typical model will similar to the example below.
#### Annotations
* `@Entity()` - Identifies the class as a doctrine entity.
* `@InheritanceType("SINGLE_TABLE")` - Enable single table inheritance for the object. This allows child modules to easily extend this entity.
* `@Table(name="sa_users")` - Sets the name of the table where the will be stored. If the table does not already exist, it can be created by updating the doctrine schema. The table names of siteadmin modules should be prefixed with `sa_` as shown in the example. Custom modules should be prefixed with a project specific prefix of your choice. Try to keep it under 5 characters.
* `@HasLifecycleCallbacks` - Enables [doctrine lifecycle callbacks](http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/reference/events.html#lifecycle-events).
#### Properties
By convention, properties should have a `protected` scope. Specific use cases may require `private` scope, but to enforce data integrity `public` scope is not acceptable under any condition.
All models must have a primary key defined (denoted by the `@Id` and `@GeneratedValue` annotations). An exception will be thrown if one is not defined.
#### Methods
As mentioned in the introduction, models should only contain getters/setters and helper methods. A `helper method` performs business logic that only affects the current entity (or associated entity). All database queries should be performed in a corresponding [repository](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/repositories.md). In the context of the example below, the `User` entity may add/remove posts, format its own data, or prepare data structures from its own data. It should not affect the state of other entities.
```php
// ...
//
public function getFullName() {
return sprintf('%s %s', $this->firstName, $this->lastName);
}
}
```
## Create New Entity Instance
Entity instances should not be instantiated manually. Instead, use the [IOC manager](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/ioc.md) to create instances.
## Do
```php
$user = ioc::resolve('User');
```
## Don't
```php
$user = new User();
```
## Save/Remove Model
View the [entity manager documentation](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/entity_manager.md) for instructions on how to perform CRUD operations on a model.
## Advanced Queries
View the [repository documentation](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/repositories.md) for instructions on how to create complex queries on one or more entities.
# Entity Manager
Siteadmin uses Doctrine 2 as its internal ORM. All create/update/remove operations are handled through the doctrine entity manager context.
This is just a quick start guide to doctrine's entity manager. Visit the [official documentation](http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/tutorials/getting-started.html#starting-with-the-product-entity) for detailed explanations.
### Accessing Entity Manager Context
```php
// Returns doctrine entity manager instance
$entityManager = \sa\application\app::$entityManager
```
### Create/Update Entity
```php
setFirstName('John')
->setLastName('Doe');
// Queue changes in entity manager
app::$entityManager->persist($user);
// Commit $user object specific changes
app::$entityManager->flush($user);
// Commit all persisted changes
app::$entityManager->flush();
```
### Remove Entity
```php
remove($user);
```
# Repositories
The repository design pattern is an abstraction over the storage of a specific [model](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/models.md). In other words, they represent a collection of an entity (aka model). Repositories hold the logic for retrieving and filtering results from the collection. They **do not** represent database storage or any other form of persistence logic.
In practice, repositories are commonly home to methods like `find()`, `findOneBy()`, `findActiveUsers()`, `findUserWithUsernameAndPassword()`. Notice these methods imply retrieving or filtering a collection of data. These methods do not create, update, or delete data. Nor do they reveal the technology being used to persist the data (i.e database, in-memory, etc.).
SiteAdmin modules use the repository design pattern to access models which have been persisted to storage. They are directly mapped to a single model, and are used to query only that model.
## Creating a Repository
### The Repository Class
```php
}
```
#### Default Methods
The `DefaultRepository` class offers a few common repository operations, so you can dive into using your repository without writing boilerplate code.
| Method | Description |
| --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
| find(`$id`) | Finds an entity by its primary key / identifier. |
| findAll() | Finds all entities in the repository. |
| findBy(`array` orderBy = null, offset = null) | Finds entities by a set of criteria. |
| findOneBy(`array` orderBy\` = null) | Finds a single entity by a set of criteria. |
| search(`array` orderBy, offset = null, secondary\_sort = null, search\_start = true, $search\_end = true) | Finds entities by a set of complex criteria. |
#### Custom Repository methods
You'll likely need to create custom search queries for your model(s). For this, we use the [Doctrine ORM query builder](http://docs.doctrine-project.org/en/latest/reference/query-builder.html).
```php
createQueryBuilder('c');
$qb->where($qb->expr()->like('LOWER(c.name)', ':name'))
->setParameter('name', '%' . strtolower(trim($searchTerm)) . '%');
return $qb->getQuery()->getResult();
}
}
```
### Mapping Repository to Model
Each repository must be mapped to a [model](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/models.md). This is achieved by adding the repository's namespace to a model's `@Entity` annotation.
> Notice the repository class simply reads `CompanyRepository`. This is acceptable because both the `Company` and `CompanyRepository` classes reside in the same namespace. If they were in different namespaces, the annotation would instead read:
>
> ```php
> @Entity(repositoryClass="\other\namespace\CompanyRepository")
> ```
**/modules/Companies/models/Company**
```php
}
```
## Using a Repository
### Access from Entity Manager
> **Deprecation Notice**Accessing repositories directly from the entity manager is deprecated. Use the IOC manager to access repositories instead.
You can get the instance of a repository via doctrine's entity manager. Because modules are often extended, you should use `ioc::resolve('{entityName}')` instead of hard-coding a model's namespace. This will allow the application to use the repositories mapped to extended models.
```php
getRepository(ioc::resolve('Company'));
```
### Access from IOC
The [IOC manager](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/models-and-doctrine-orm/ioc.md) offers a simplified interface compared to the entity manager's `getRepository()` method, which requires manually resolving a model's IOC reference.
```php
"awesomeFishingSupplies_locations",
"name" => "Locations",
"icon" => "fa fa-user",
"parent" => "siteadmin_root"
]),
new navItem([
"id" => "awesomeFishingSupplies_locations_index",
"name" => "All Locations",
"routeid" => "awesomeFishingSupplies_locations",
"parent" => "awesomeFishingSupplies_locations"
]),
);
}
```
| Parameter | Description |
| --------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `id` | A unique ID for the nav item. Name should be structured as `{vendor}_{module}_{action}`. Parent nav items won't have an `action`. |
| `name` | The navigation item's label. |
| `routeid` | The route that the nav item is linked to. |
| `parent` | The `id` of the parent nav item. If the current nav item is the parent, set this value to `siteadmin_root`. |
#### getSettings()
The module's settings should be defined in the `getSettings()` method. This includes API keys, pagination options, test mode toggles, etc.
```php
array(
'module' => 'Locations',
'default' => true,
'type' => 'boolean'
),
'api_secret_key' => array(
'module' => 'Locations',
'default' => '',
'type' => 'text'
)
);
}
```
| Parameter | Description |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `module` | The name of the module associated with this setting. This name should be human readable (i.e instead of `PageEditor`, use `Page Editor`). |
| `default` | The setting's default value. Data type varies depending on the setting's `type` parameter. |
| `type` | The type of field. `Text` => text field. `boolean` => true/false radio buttons. |
# Creating a Theme
Coming soon...
# Events
The event API offers a *fire and forget* approach to emitting events in an application. In other words, events inform the application when an action has occurred, while remaining unaware of which modules acted on the event, if any at all. This allows custom modules to respond to certain events without extending existing modules.
### Usage Example
Consider a member registration module. This module is pretty generic, and each client may desire slightly varied behavior for their application. One client may want an account activation email to be sent to the end user. Another client may want a text message to be sent, or nothing at all.
Instead of extending the member's module, you can simply create your own module, then create listeners for the user registration event. In your listeners, you would define the controller method to be executed when the event occurs, and that is where your "send email" code would reside.
### Listening for an Event
Events listeners must be defined inside the `init()` method of a [module's configuration file](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/advanced-topics/creating_a_module.md#step-3--create-module-configuration-file). The listener below waits for the `members.signup_complete` event to occur. When the event is triggered, the `sendSignUpEmail` method will be executed from the `MembersEventsController` class.
```php
$data = array(
'first_name' => 'John',
'last_name' => 'Doe',
'email' => 'john.doe@example.com'
);
Event::fire('members.signup_complete', $data);
}
}
```
**Fire(data)**
| Parameter | Type | Description |
| --------- | ------ | ----------------------------------- |
| `$event` | string | The name of an event. |
| `$data` | array | The data to be sent with the event. |
# Logging
Coming soon...
# modRequest
A module request (aka "modRequest") is a specialized event dispatching utility designed to send data to many modules, and receive responses from each recipient module (when applicable). All server side modRequests are executed synchronously.
### Example
Where is a modRequest applicable?
Consider the page editor, provides a list of widgets that can be embedded into a content page. The page editor module needs a way to collect all the registered widgets from other modules. On the other hand, modules should be able to register a widget without assuming the page editor is even installed.
The page editor can execute a modRequest called `page_editor_get_widgets`. Other modules can register listeners for that modRequest, and define a callback for when it is executed. See creating a modRequest listener and executing a modRequest.
### Creating a ModRequest Listener
#### Register the listener
ModRequest listeners are registered inside the `init()` method of a module's `{module}Config.php` file. The first parameter of `modRequest::listen()` is the name of the request. The second parameter is the controller and method to be executed: `{controller}@{method}`.
```php
'Member List',
'html' => '...'
);
return $data;
}
}
```
**Parameters**
| Parameter | Type | Required | Default | Description |
| --------------- | ------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$event` | string | yes | | A unique label for the event. By convention, should only contain underscores and alphabetic characters, and be prefixed with module name. |
| `$action` | string | yes | | The controller and method to be executed, delimited by the `@` symbol. (e.g `PayPalModRequestController@getPaymentProcessor`) |
| `$priority` | int | no | 1 | A numeric weight which sets the order of which the listeners should be executed. Listeners with higher priority value will be executed first. |
| `$name` | string | no | null | A unique name for the specific listener. By convention, base SiteAdmin modules should give this field a value to all the listener to be overwritten by child modules. |
| `$allow_js` | boolean | no | false | If true, this modRequest will be executable from the browser via the modRequest JS API. |
| `$is_protected` | boolean | | false | If true, a user must be logged in to execute the modRequest. |
### Executing a modRequest
```php
namespace for all classes across the application. In the context of our previous example, the application knows the namespace for `saMember` is `sa\member\saMember`. We can overwrite that mapping to a different namespace using the `@IOC_NAME` declaration in our custom class' docBlock.
```php
The custom `datetime` object will automatically convert your timestamps to UTC before persisting them to storage. When querying the timestamps from data storage, they will be converted back to the original timezone.
### Basic Usage
#### Create a DateTime
```php
Only in-memory associations will be included. |
| `$useProxyIds` | boolean | no | Default: `false`. If true, the real IDs of the base entity and associated entities will be replaced with UUIDs. The [UUID Proxy documentation](https://app.gitbook.com/s/-LB7PTje97ARlss-zn8u/developer-guide/utilities-and-helpers/uuid_proxy.md) describes how to access content from these UUIDs. |
| `$associationConfiguration` | array | no | Default: `[]`. A key/value map containing a list of entities that should be included in the object to array conversion. See association configuration guide for more information. |
#### Association Configuration
The `$associationConfiguration` parameter in `getEntityArray()` is a map of entities which are allowed to be included in the object to array conversion process. This allows you to exclude unwanted data sets from the parsing process.
**Example**
```php
'object'
);
return doctrineUtils::getEntityArray($user, true, false, $assocConf);
}
```
The code snippet above will parse the user's `id`, `name`, and `followers` fields into an array. The `posts` property will be ignored, because it is not included in the association configuration.
> Notice the association configuration is a key/value pair, where the key is the name of the associated entity, and the value is its type. The value will almost always be `object`.
**Result**
You may assume the user's ID is `12`.
```
{
"12": {
"id": 12,
"name": "John Doe",
"followers": [
]
}
}
```
### Convert entity collection to array
```php
doctrineUtils::getEntityCollectionArray(
$collection,
$includeAssociation,
$associationConfiguration
);
```
| Parameter | Type | Required | Description |
| --------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `$entity` | Object | yes | The doctrine entity to be converted. |
| `$includeAssociations` | boolean | no | Default: `false`. If true, associated objects will be included in the converted array. For example, a user may have an association with posts. When converting the user object to an array, this flag must be set to true to include the user's posts. > Only in-memory associations will be included. |
| `$associationConfiguration` | array | no | Default: `[]`. A key/value map containing a list of entities that should be included in the object to array conversion. See association configuration guide for more information. |
### Set entity properties from array
Given a property map with the format \[propertyName => value], calls the setters on the given entity with the passed value data.
```php
doctrineUtils::setEntityData($properties, $entity, $useBlankFields);
```
| Paremeter | Type | Required | Description |
| ----------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$properties` | array | yes | A set of key/value pairs, representing an entity's properties and their corresponding values. |
| `$entity` | Object | yes | A doctrine entity. |
| `$useBlankFields` | boolean | no | Default: `false`. If false, keys with empty values will skipped. If true, the empty values will replace the value of the corresponding object property. |
#### Example
```php
setFirstName('John')
->setLastName('Doe')
->setNickname('Bobby')
->setAge(30);
$properties = array(
'nickname' => null,
'age' => 25
);
// Age is changed from 30 to 25.
// Nickname is skipped since the new value is null|0|false.
doctrineUtils::setEntityData($properties, $user);
// Age is changed from 30 to 25.
// Nickname is changed from 'Bobby' to null.
doctrineUtils::setEntityData($properties, $user, true);
// Create a new user object from property map.
$user2 = doctrineUtils::setEntityData($properties, new User(), true);
```
### Get entity meta data
Retrieves information about an entity's methods and properties.
```php
doctrineUtils:getEntityInfo($entity)
```
# URL
The URL utility provides a collection of helper functions to assist developers in building routes and performing redirects.
### Route
Returns the current request's route. From the url `https://domain.com/route/to/page?q=search+query`, returns `/route/to/page`
```php
url::route()
```
### Parse QueryString
Returns the query string of the current request. From the url `https://domain.com/route/to/page?q=search+query` returns `?q=search+query`.
```php
url::queryString()
```
### File Type
Returns the file extension from a URL or null if not extension is found.
```php
url::getFileType()
```
### URI
Returns the decoded URI of the current request.
### Route Parts
Explodes the a request's route by '/' and returns the resulting parts.
```php
url::parts('http://domain.com/articles/title-of-article/1')
// Returns
array (
'articles,
'title-of-article',
'1'
)
```
### Host
Returns the current request's host.
```php
url::host()
```
### Protocol
Returns the current request's protocol. Expected return values are `http://` or `https://`.
```php
url::protocol()
```
### HTTP Method
Returns the HTTP method used in the current request. Valid return values include `get`, `post`, `put`, `patch`, `delete`.
```php
url::method()
```
### Make URL From Route
A route should only be hard-coded in once place: the module config. From there, it should never be directly referenced again. The `make()` method is used to build URLs by referencing the name of the route, instead of the route's actual path. This allows developers to change routes without breaking links throughout the application.
Consider the following route definitions:
```php
array(
new saRoute(array(
'id' => 'members_users_list',
'name' => 'Our Users',
'route' => '/users/list',
'controller' => 'UsersController@index',
'method' => 'GET'
)),
new saRoute(array(
'id' => 'members_account',
'name' => 'Account',
'route' => '^/users/[0-9]{1,}$',
'controller' => 'UsersController@account',
'method' => 'GET'
)),
new saRoute(array(
'id' => 'members_user_invoice',
'name' => 'Invoice',
'route' => '^/users/[0-9]{1,}/invoice/[0-9]{1,}$',
'controller' => 'UsersController@account',
'method' => 'GET'
))
);
```
The `members_users_list` route doesn't have any dynamic parameters. The `members_account` route has 1 dynamic parameter (a user Id).
```php
// Returns "/users/list"
url::make('members_users_list');
// Returns "/users/12"
$userId = 12;
url::make('members_account', $userId);
// Returns "/users/12/invoice/1111111"
$userId = 12;
$invoiceId = 1111111;
url::make('members_user_invoice', $userId, $invoiceId);
```
> The `url::make()` method's first parameter is the name of the route. The number of subsequent parameters will always match the number of dynamic parameters in the route.
>
> e.g To build a route with 4 dynamic parameters, `the make()` method will require 4 additional parameters after the route name.
### Redirect
To force a page redirect in any part of the application, use the `redirect()` method.
> This method is meant for redirecting to third-party URLs. To redirect to an application route, use `redirectId()`.
```php
url::redirect('http://domain.com', 'q=search+keywords', 302)
```
| Parameter | Type | Required | Description |
| --------------- | ------ | -------- | ----------------------------------------------- |
| `$url` | string | yes | The URL to redirect to. |
| `$queryString` | string | no | The URL's query string. |
| `$redirectCode` | int | no | Default: `302`. The redirect type (301 or 302). |
### Redirect to Route
Redirects to a named route in the application.
```php
// Redirects to member account page. Route requires 1 parameter: user ID.
// Resulting URL: "/users/1".
url::redirectId('members_account', 1)
```
### isCurrentRoute
Compares the route of the current request's with a given route.
```php
// Compares "/users/1" with current route
url::isCurrentRoute('members_account', 1)
```
### Find route by ID
See the [routing](/developer-guide/the-basics/routing) documentation.
# Command Line
# Doctrine CLI
SA3 modules use the [Doctrine 2 ORM](http://www.doctrine-project.org/) as the implementation of its persistence layer. Sometimes, it may be necessary to update doctrine's schema, clear its caches, or use some of doctrine's many other tools through the command line. The SA3 exposes doctrine's tools so developers can quickly access them.
### List Available Doctrine Commands
A comprehensive list of doctrine's commands can be found in their [documentation reference](http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/reference/tools.html#command-overview).
You can also view a list of available doctrine operations using the command below.
```
php app.php -c=doctrine -e=environment
```
### Update Doctrine Schema
```
php app.php -c=doctrine -e=environment orm:schema-tool:update
```
### Clear Doctrine Cache
```
// Clear metadata
php app.php -c=doctrine -e=environment orm:clear-cache:metadata
// Clear query cache
php app.php -c=doctrine -e=environment orm:clear-cache:query
// Clear result cache
php app.php -c=doctrine -e=environment orm:clear-cache:result
```
# Executing Controllers
SA3's command line tool offers an interface into the controller methods of an application's modules. This allows developers to execute code through *external scripts* or *direct CLI* commands.
```
php app.php -c=executeController -e=environment -a={controller}@{method}
```
### By Example
```php
}
}
```
The CLI command to execute `exportToCsv` method is
```
php app.php -c=executeController -e=environment -a=MembersExport@exportToCsv
```
#### Duplicate controller names?
The previous command will execute the `exportToCsv` method found in the `MembersController` controller. For simple applications, this will suffice, but what if there are two controllers named `MembersController`?
You can specify a namespace to distinguish one controller from another.
```
php app.php -c=executeController -e=environment -a=\sa\Members\MembersExport@exportToCsv
```
# Vue Components
Coming soon...
# Credits
The following libraries and plugins have been used to power different parts of Site Administrator and the main theme it uses for its primary administrative interface.
Documentation and examples for each library or plugin can be found at each respective website. \
\
jQuery 2.0.3 \
jQuery UI 1.10.3 (Custom Build)\
Twitter Bootstrap 3.0.0\
FontAwesome 3.2.1\
LESS 1.4.1\
Mustache Twitter Hogan.js\
Mustache.js\
Mustache for PHP\
Google Fonts "Open Sans" \
jQuery Flot Charts 0.8.1 \
jQuery Sparklines 2.1.2 \
Easy Pie Chart 1.2.5 \
jQuery Knob 1.2.0 \
Mindmup Wysiwyg Editor Toopay Markdown Editor 1.1.4 \
jQuery Validate 1.11.1 \
FuelUX 2.3.0 (Spinner, Wizard & Treeview) \
Dropzone.js 3.0 \
FullCalendar 1.6.4 \
jQuery ColorBox 1.4.27 \
jQuery dataTables 1.9.4 \
jQuery jqGrid 4.5.2 \
X-editable 1.4.6 \
Select2 3.4.2 \
jQuery Chosen 1.0.0 \
jQuery Masked Input 1.3.1 \
jQuery Input Limiter 1.3.1 \
jQuery AutoSize 1.17.7 \
Bootstrap Tags 2.2.5 \
Nestable Lists \
Bootstrap Colorpicker \
Bootstrap Datepicker \
Bootstrap Timepicker v0.2.3\
Bootstrap DateRange Picker 1.2\
Bootbox.js 4 jQuery Gritter 1.2\
jQuery slimScroll 1.2.0\
Spin.js 1.3.0\
jQuery Mobile 1.3.2 (Custom Build)\
jQuery UI Touch Punch 0.2.2\
Google Code Prettify \
ExplorerCanvas
# Site Administrator
Site Administrator is a Content Management System (CMS) that allows any individual or business to manage the routine changes of text and graphics on their website, intranet or extranet without the knowledge of HTML or web programming. It is further integrated into catalog and order processing management for e-commerce sites, project management in Intranets, and countless other uses. The CMS is designed to be very user friendly and robust with powerful tools to design, build and manage web content.
The CMS framework allows us to integrate custom modules into the system to make it perform any functions you require with ease. The module-based approach allows eLink to provide customized solutions for all of our clients needs, with quick implementation and effective support. Your new website is enhanced with the E-Link Design Content Management System, allowing you to keep content on your website up-to-date. The following instructions tell you how to log in and update the content.
Site Administrator is a very robust Content Management System that can help you easily make your website great. Some of this will be considered required reading to get up and running but many of the modules you will not need to know anything about until you plan on implementing them. Be sure to read the entire Introduction, Changes & Updates, Settings, and the Modules: Dashboard and Page Editor section. Beyond that you can treat this as a choose your own adventure book, be sure to read up on any new modules you install and come back to this whenever you have trouble implementing any changes to your website.
Below are the steps required to install the latest version of Site Administrator.
1. Download the latest Installation file *sa.install.php*, [click here](http://www.siteadministrator.com/downloads/sa.install.zip).
2. Unzip and upload *sa.install.php* to the root directory of the website.
3. Visit the installation file at
4. Follow the installation instructions.
Requirements: PHP 5.6.2+ with Multibyte String, GD Library & MySQL 5.5+
First, point your web browser to **[www.acmecompany.com/siteadmin](http://www.acmecompany.com/siteadmin)** Where ‘acmecompany.com’ is the URL of your website. When you get there, you will see this screen:
You will be given a username and password to log into the site. The default username and password is ‘admin’ and ‘admin’ on all new websites, but you will be prompted to change your username and password the first time you log in.
Note Username and passwords are configured during the installation.
If you have any issues logging in please make sure to contact support. Two factor authentication is available but must be configured.
Once you’ve logged in, you will see a number of sections on the left. These sections allow you to control the content on your live website and any other particular modules you have. There is also a navigation menu in the top right corner.
The navigation menu in the top right shows common actions you will be performing in Site Administrator. Here is a description from left to right.
Link Icon will open your website in a new tab so that you can view new changes you have made without having to open a new tab and typing the address on your own.
This icon is a shortcut to edit your website with the page editor tools, we will go over their use later just know this is here for now.
This icon displays comments and follower notification from your website and connected social media websites.
The user info button (Dark Gray "Welcome" button) opens a drop down menu when clicked. We will go over the 1st two buttons in more detail later, for now just know they are here.
* The Settings tab is a shortcut to the general settings page.
* The Software Updates tab is a shortcut to SA Store.
* The Log Out button will log the user out of Site Administrator.
You can also log out with the navigation menu on the left
Logging Out is one simple way to keep your content out of the hands of people who have malicious intent or just aren't trained well enough to use the CMS. It is also a good practice to have only one person assigned to each account, this helps keep track of who is making changes on your website.
Note The navigation bar on the left hand of the screen contains all that ‘modules’ that ultimately control all the content on your website. The following pages detail these modules.
Browse and download Modules, Themes and APIs to Site Administrator. SA Store is accessible via the main navigation. Site Administrator will be continuously patched and updated periodically and through the Store as well.
The best way to be sure you have the greatest experience with Site Administrator is to periodically check for updates and be sure to install them whenever available. You can do this by going to the SA Store and clicking "Update All" under System Summary. When no more system updates or module updates are available you are good to go!
The modules within Site Administrator(SA) make up the heart of the system. Not all modules appear in the main navigation but all are managed within the SA Store.
You will find the SA store within the navigation tabs on the left close to the bottom of the list.
When you open the SA store tab, you will find a System Summary and a Modules menu. Lets go over the system summary 1st.
* **System Updates -** This tells you if there are any system updates available.
* **Module Updates -** This tells you if there are any module updates available. You can update them individually(in the modules sections) or you can can click the update all button
* **Modules Installed -** This tells you how many modules you have installed.
* **Themes -** This tells you how many themes you have installed.
You do not want to see any red in your System Summary, if it is gray you have the latest version of Site Administrator as well as the latest versions of your installed SA modules.
If your System Summary looks more like this with information highlighted in red, it is recommend that you click the big red "Update All" button and install the latest versions. This will in sure that you have the best and most secure experience that is available.
## Installing A Module
To install a new module locate the one you you would like in the site administrator store, for example the "Catalog Module" seen here.
Then click the install button and wait through the installation process.
A module update screen will pop up that looks similar to the one above, this is just letting you know that your module is being installed. You will have to wait for a short time before it is finished. Once you see the text stating you're ready to go.
Now if you look through your browsing tabs you will find your module (in this case the Catalog) installed.
As stated above you can update modules individually by finding them in the SA store list, just look for the modules that have an update button and you're ready to pick and choose what you would like to update. If your module says installed, there is nothing for you to do with it which is a good thing!
## Overview
The dashboard is the 1st screen you will see once you log into Site Administrator. This will give you a brief overview of all of your modules, new items displaying to your customers, and recent changes that have been made on your website. This is meant to give you preview of important and new things happening on your website.
## Contents
* Catalog
* Recent Form Submissions(Coming Soon!)
* Recent Reports(Coming Soon!)
* User Activity(Coming Soon!)
* Page Visits(Coming Soon!)
* Social Media(Coming Soon!)
* Statistics(Coming Soon!)
## Catalog
Here you will find general information about your Catalog Module
You will receive key information about your products here, updating you on things like how many products you have left and behavior of your customers over the past 30 days.
## Overview
The page editor module is probably one of the most important parts of your CMS (if not the most). It allows you to access the text and images that appear in key parts of your website and change them with an editing tool similar in nature to tools such as Microsoft Word.
## The Interface
When you first log in to the CMS you will see the Page Editor item in the menu on the left side of the screen. Clicking on it will reveal the menu, which contains "Manage Pages". Click on "Manage Pages" to load the document tree:
The page editor is going to be your greatest asset as it is the best way to organize documents on your website. Think of your computer and the way it stores your files. If you are familiar with files and folders, you probably have your files organized so that certain files are categorized in certain folders. Also, folders can be inside other folders.
Now, apply this idea to pages. Perhaps you have a page that contains an overview of what your organization is about. Perhaps you would also like to go into more detail about different aspects but don't want to do that all on the same page. Having a structure like the one shown above allows you to organize your pages so that all the pages pertaining to the description of your organization are grouped together underneath your 'overview'.
In other words, the main reason behind the structure displayed above is organization only. An added benefit is the fact that we can use this structure to dictate certain things on the website such as a websites menu. This is not always the case (depending on the website).
Now you probably have some questions about all of the buttons you are seeing so we're going to go over each of them.
### Key Buttons
**The icons on the left signify certain actions:**
This icons lets you drag and drop your pages in the tree. You can only move a page up if it is not already at the top of the list of pages in the same 'level' as other pages. Likewise, you cannot move a page down if it is not already at the bottom of the same 'level' as other pages.
This icon signifies that a page has no children
Maximize Button - This is the default button for pages with children. You can view the children of this page by clicking this button
Minimize Button - This is the button you will see after you have clicked the expand button. You can click this to minimize the children of a page if you are not viewing them to help keep yourself organized.
If you are not sure if a page is on the same level as other pages, you should notice that the pages in figure 1 all have dotted lines joining them. Notice that the image to the left has the tree highlighted with different colors. These two colors indicate the separation of the different levels for the pages displayed.
**The icons on the right signify certain actions:**
The Active/Inactive indicators. If the green icon is 'lit up' it means that the site is active and can be accessed by anyone. If the red icon is 'lit up', the page is inactive and will not be accessible by anyone. Instead, they will get an error message indicating that they cannot access the site. To change the status of a page between active and inactive, click the green (to set a page as active) or red icon (to set a page as inactive)
Clicking this "edit" button will open the page in a new window as it appears on the website.
Clicking this "settings" button will allow you to change certain attributes of the page such as the page's title and where it appears in the document tree.
Clicking this red "Delete" button will allow you to remove a page from the document tree.
The Gray delete button will not work because you need to remove its children first.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
Paste From Word
This set of buttons will help you cut, copy, and past however the button on the far right is the Paste From Word button. This is a critical button used whenever you have content in a Microsoft Word document that you want ultimately want on the website. Instead of copy and pasting directly from Word, you must first open the Paste From Word box and paste it there. This ensures all the odd formatting features of Word are not transferred to the site. Essentially Word documents do not translate well to the Page Editor and must first be stripped down using this feature.
Undo and Redo
As the name implies, this feature will let you correct a change you just made, or revert back to the original change with one easy click.
Spell Check - This will allow you to check your text for spelling and grammar errors.
Hyperlink - Inserts a new hyperlink or edits the selected hyperlink. Also allows you to add a document for download from the site.
Insert Picture – This allows you to insert a picture into your content.
Code Snippet - This feature will allow you to insert a snippet of code and format it to the language of your choice.
Table - This allows you to insert, and edit a table into your content sorting and for adding or changing borders to selected text, paragraphs, cells, or objects.
Line -This allows you to easily insert a line into your content.
Special Characters - Allows access special characters for the page, i.e. dollar signs and other special characters.
View/Edit Source -This feature allows you to view/edit the source code on any given page.
This will allow you to bold, make italic, and underline the text on your page.
Remove Formatting - This removes the formatting of your document.
Ordered list - This allows you to create an ordered list.
unordered list - This allows you to make the content appear with bullets that can be numerical or symbolic in nature.
Indent - This feature allows you the ability to indent your content to the left and right on the page.
Block Quote -This feature will allow you to put any highlighted text in a block quote.
Alignment - This area controls the alignment of the text on your page. From left to right, you can align left, align in the middle, align right, and justify full.
Styles and Formatting - These buttons allow you to create/edit various styles and formatting within the page.
Format Field - This allows you to change headings on your text.
Font Name - This will change your font style.
Font Size - This will change your font size.
Colors - The Foreground Color will allow you to change the color of your text, while the background color will let you modify the background color.
About CKE Editor - This gives a short description of the CKE editor.
## Tutorials
To view a list of tutorials, please click on the link provided below:
Coming Soon!
You can reach this section in the page editor by clicking on the hyperlink button shown above.
on the link info Tab, choose a link types of URL, set an anchor point on your page to scroll to, or link to an email. Then fill out their associated form.
This is the target tab
Using this you can set you what action will occur whenever someone visiting your page clicks a link you've created.
**\ -** Opens link with the default action.
**\ -** Opens the linked document in a named frame.
**New Window(\_blank) -** Opens the linked document in a new window or tab.
**Topmost Window(\_top) -** Opens the linked document in the full body of the window.
**Same Window(\_self) -** Opens the linked document in the same frame as it was clicked (this is default).
**Parent Window(\_parent) -** Opens the linked document in the parent frame.
The Manage Layouts page will look something like this. Click on the icon to proceed to creating a layout
Begin by giving your layout a name in the properties section on the right.
Site Administrator sets your pages up for your visitors by using a responsive grid system. This is done using a series of rows and columns inside of containers which will hold your pages content. Choose a "New Container"(content will not span full width of screen) or "New Fluid Container"(content will span full width of screen).
The Container or Fluid Container will be shown on your screen with a dashed line. With your container selected, click the Row button. This will set a grid spanning the entire width of your screen for content to be entered. You can add as many rows as you like to a container.
With your row highlighted you can now add a Column with the "New Column" button.
You will notice that the Column that appears will not span the full length of the row. Below we will discuss how you will resize your columns to display your content however you see fit.
When you have the column selected you will notice buttons that look like this. The 1st 3 are (Delete, Show/Hide, and Move) buttons have been covered in a previous section. We will be looking at the resize button.
The resize button you will hold click and drag to the desired size of your content on your page. So you can make column span the entire length of the page or as little as 1/12th of the page. It is important to consider what type of device your users will be visiting this page on however. As a general rule, on small devices such as tablets or phones your columns should be very wide, often the full width of the screen. For desktops however breaking the page content up into 1/4 size of the screen will display the content well. It's all up to you, just keep your visitors experience on your site in mind.
You will notice the tabs in the upper left corner of the screen showing Medium/Large Screen, Small Screen, and Extra Small Screen. As you might guess, this is how your layout will appear to your visitors on those screens. Be sure to check each tab for how your columns are structured.
The lower section of the toolbox on the right is the last part of the equation before you begin adding content. Here you will select the type of content you will be adding. You will edit this content in the Manage Pages tab of the Page Editor. Then click on the corresponding element shown on the page.
This is the Create Page section, it will let you create a page as well as set attributes on it. We will review these details below.
The 1st detail we see on the left side on Page Details is the parent drop down menu, here you can set the page you're creating to stand alone or if you would like you can set it so that it is a child of another page. Think of child pages as you would a typical folder structure, you probably have a Documents(Parent) folder. Inside of that Documents folder there may be files, these would be considered the Document folders children. The rest of the items seen above have a description attached to them.
We discussed page layouts in the Manage Layouts section above, here you can use any of the layouts you have created to give your pages a well designed look. The Page Type drop down menu lets you use a normal page or give the full URL to the page. Most people find it easier to leave the Page Type as normal.
The SEO Page is where you will enter information that will help browsers search your website, for more information on this and robots you can visit or call (859) 422-9165 and ask for the SEO team.
The access page lets you set if only members of your website can see the corresponding page or if anyone can see it at all. Setting a page as inactive is a great substitute for deleting a page especially if you only want people to see it whenever you're advertising a monthly event or something else that is recurring but not always active.
Under the Advance settings you can add special features to your pages. Using Header Image you can select or upload an image to be used on your website, you can inherit an image from a parent site, or add an html tag to add an image. The View Template setting will allow you to link your own header and footer rather than the default. The Icon Name will let you add Font Awesome Icons to your navigations. You can also choose to show or hide the page and sub-nav on the main navigation.
### Miscellaneous Coming Soon
## Overview
FAQ sections are comprised of answers to frequently asked questions, and other important questions to aide your visitors. Additionally, these sections can be sub-divided any way you would like. Using the FAQs Module in your CMS, you will be able to cater the FAQs section to your exact specifications and then continually update/delete the content in real time. The FAQs are logged into separate databases for easy browsing and searching. When you choose to utilize your FAQs Module, you will click the ‘FAQs’ button under the main navigation of your CMS, and the FAQs options will expand below.
## Create A New Category
When you want to post FAQs, and have never used the FAQs Module before, you must first create a category to post the FAQs in. To do this, you will simply click the ‘Create Category’ button under the FAQs heading in the navigation.
Note Simply type in the name of your category and click the ‘Create’ button to create the FAQs category.\
You may have as many categories as needed.
## Create New FAQs
When you want to add FAQs to the website, simply click the ‘Create FAQ button under the FAQs heading in the navigation.
Note From here you will be able to post FAQs to your website, with categories, questions, and answers.
The first thing to note is the category in which the FAQ will fall. In this example ‘Sample FAQ’ is the appropriate category for this FAQ. After all the fields you want to use are completed, simply click the ‘Create’ button to save it and to make it live on your website.
## Manage FAQs
When you want to modify/edit an existing FAQ on the website, simply click the Manage FAQs button under the FAQs heading in the navigation.
Note This screen gives you a few options and information. For one, it tells you how many categories you have, and how many FAQs fall under each one.
### Key Buttons
Clicking this icon will expand the FAQ
Clicking this button will close the drop down window you had previously expanded
When you hover over an item in the FAQs module this icon will appear. When you hold down click you can move the FAQs up and down on the page in real-time. You can only move a FAQ up if it is not already at the top of the list of FAQ in the same 'level' as other FAQs. Likewise, you cannot move a FAQ down if it is not already at the bottom of the same 'level' as other FAQs.
Clicking this "Edit" button will allow you to change certain attributes of the FAQ
Clicking this "Delete" button will allow you to delete a FAQ from the FAQs page. Important note - deleting a FAQ cannot be reversed. Click this at your own risk.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The News Module will allow you to add, edit, and remove news articles with titles, bodies, and embedded images in real-time. Using the page editor described above, you can design news articles with saved styles and with a visual editor; older articles will automatically be archived for a specified amount of time.
## Manage News
If you select the Manage News icon under the main News navigation, you will be able to edit older news articles and move them up or down on the page.
### Key Buttons
Clicking this icon will expand the news.
Clicking this button will close the drop down window you had previously expanded.
\
These icons let you move the news up and down on the page in real-time. You can only move a news item up if it is not already at the top of the list of news in the same 'level' as other news. Likewise, you cannot move a news item down if it is not already at the bottom of the same 'level' as other news.
\
Clicking this "Edit" button will allow you to change certain attributes of the news
\
Clicking this "Delete" button will allow you to delete a news item from the news page. Important note - deleting a news item cannot be reversed. Click this at your own risk.
## Create A New Category
When you want to post news, and have never used the news Module before, you must first create a category to post the news in. To do this, you will simply click the ‘Create Category’ button under the news heading in the navigation.
Note Simply type in the name of your category and click the ‘Create’ button to create the news category.\
You may have as many categories as needed.
## Create News
When you want to post a new article, simply click the ‘Create News’ button under the News heading in the navigation. You will then see a screen like this:
From here you can insert and post new articles to the site, with images, titles, short description and a more detailed section for the actual article. This utilizes the page editor interface and should be very straightforward. Once you have completed an article, simply click the save button. We will go over these items from top to bottom.
## Manage Comments
Coming soon!
## Manage RSS Feeds
In this section you can edit and delete any RSS feeds you have created.
## Create RSS Feed
When you want to post a new RSS feed, simply click the ‘Create News’ button under the News heading in the navigation. You will then see a screen like this:
From here you can simply give it a name, select a category from the drop down menu, drop in your RSS link and click the save button. That's it you're all done!
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Photo Gallery will allow you to add, edit, and remove photos with titles, descriptions in real-time.
## Manage Photo Galleries
The Manage Galleries tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
### Galleries
This column displays the name of your saved galleries.
### #Photos
This displays how many photos your gallery contains.
### Key Buttons
The Manage Galleries tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
Clicking this "edit" button will open the page in a new window as it appears on the website.
Clicking this "settings" button will allow you to change certain attributes of the page such as the page's title and where it appears in the document tree.
Clicking this "Delete" button will allow you to a page from the document tree.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
To add a new gallery from this page you can click the add Gallery button
\
You won't see this icon until you hold down a "click" with your on top of a gallery, you can move any gallery item to order them as you like. This will not effect how they are displayed on website, this is just for the sake of your own organization.
### Photo Gallery Settings
The Photo Gallery Settings tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
### Create Photo Galleries
The Photo Gallery will allow you to add, edit, and remove photos with titles, descriptions in real-time.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Forms Module is what you'll use to collect valuable information from your visitors. You can Create a form for just about anything you'd like, but first you'll have to download the forms module from the SA Store. See the SA Store heading for more information on installing a module.
You will find the forms module on the left side of the site administrator screen, opening the tab it will look like this
* Manage Forms
* Create Forms
* View Submissions
We'll start with Manage Forms
## Manage Forms
The Manage Forms section lets you create, edit, and delete any forms you might have
If you click on the search function a window like the one above will appear, this will help you filter out any unwanted forms and just bring up the one you want. You can also click on the Name and Route tab to order them alphabetically.
This is a shortcut to the Create Forms page, we'll go over how to use this more in the Create Forms section below.
The View Form Submission Data button will take you to another page where you can search through all of the user data that has been submitted for that particular form. You can also search through data you have archived. You will navigate it similarly to this page just mouse over any buttons you have questions about.
The change settings button will allow you to edit any of the settings originally stated. We will review this in the Create Forms sections.
### Edit Forms
The Edit Pages button will let you structure your forms however you like. Just click on the page you want to edit to adjust the forms.
In the next screen you will see how many pages your form has, click on the page that you want to structure.
If this is the first time you're editing your form, your page will look similar to this.
On the right hand side of the screen there will be a toolbox to help you put together your forms
Before you do anything you need to add a new row, this will start a layout for the forms you intend to have your visitors use.
By default, you can set 3 forms side by side. If you click the settings button on the far left you can edit how wide they are.
The Row Properties window may seem a little foreign but its easy to understand. At the top you will see 4 column possibilities. Each row under that you will see 4 different Widths relating to different types of devices. Each width field will accept a value of 0-12, that is because each row that will be displayed on your website will span a maximum of 12 units from edge to edge.
In the default example you will see 3 columns are being used(column 1 is always on). The X-Small and Small Columns each have 12 units in all of their fields while the Medium and Large Widths each have 4. Below you can see a visual representation of how that will be displayed to the visitors to your site.
* X-small Width - This is your view for phones with 12 units for each of the 3 columns.
* Small Width - This is your view for tablet sized devices with 12 units for each of the 3 columns.
* Medium Width - This is your view for desktop devices with 4 units for each of the 3 columns.
* Large Width - This is your view for larger desktop devices with 4 units for each of the 3 columns.
On smaller screens such as phones it is best to have a wide form field (such as 12 units per column), while on a larger desktop screen this could leave your screen looking unbalanced. Take this into consideration when making a form for your visitors.
Now that you have handled the layout of your forms you need to fill them out. You can use the toolbox or you can click the button to add a standard label. Click on the fields to open a more detailed view of the forms.
Here on the Section Properties page you can edit the information your form will request from your visitors. Selecting Type will list all of the different input fields they can enter, the Help Text(optional) field is here to give your visitors hints about what information they should give in the form. Here is a descriptive list of each of those fields.
* **Header -** This is just a Heading you can set for your forms.
* **Label -** This is a label you can give your form
* **Divider -** This helps divide and layout your forms with even more detail
* **Single Line Text -** Use this form for any general information you would like to ask your visitors that can be answered briefly, such as "What is your mother's maiden name?".
* **Paragraph Text -** Use this form for any general information you would like to ask your visitors that would require a more in depth answer, such as "Tell us about the last time you used our services".
* **Drop Down -** Use this whenever you want to your users to choose from a select number of option, Add the options in the Options/Values section of the Section Properties menu. Separate each value with a semi-colon (i.e. Option 1; Option 2; Option 3;)
* **Check Box -** Great for yes or no answers
* **Radio Button -** Once your visitor clicks this button they cannot remove it, they can only select other radio buttons.
* **State Selection -** This lets you choose between all 50 states.
* **Date -** Month, Day, Year Format.
* **Email -** This Form will only accept emails.
* **Phone -** Use this for requesting phone numbers
* **Radio Buttons(Multiple) -** Once your visitor clicks this button they cannot remove it, they can only select other radio buttons.
To add your newly made form to the your page you will need to go back to the page editor. A detailed explanation about adding the Form Module as well as other modules will be found in the page editor section
The delete button will remove the form you have selected completely
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
## Create Forms
Creating forms is as easy as filling out some short information here, will go over what each input does below.
* **Name -** This is the name of your Form.
* **Route -** This is the URI Path you will take to your form (i.e. example.com/your-path).
* **Is Protected -** Information Coming Soon!
* **Show Title -** This display the title of your form.
* **Is Resumable -** This lets your visitors save their form information and return to it later.
* **Show Progress -** This displays a bar so your visitors can track their progress on the form.
* **Submit Action -** Information Coming Soon!
* **Submit Button Text -** This is the Text that will appear in your submit button.
* **View Template -** Information Coming Soon!
* **Submission Text -** This is the text that will be displayed to your visitor after they have submitted a form.
* **Submission Email -** Information Coming Soon!
* **Other -** Information Coming Soon!
* **Style Class -** Information Coming Soon!
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Catalog module is your solution to E-Commerce, this is one of the most robust modules in the SA store especially if you have a lot of products. Here you will add all of the information about your products including, photos, stock, price, and much more. After installing the Catalog from the SA Store you can visit it along with the rest of your modules on the left side under the dashboard.
Above is the drop down menu of the catalog, we will go over each section in ascending order.
## Overview
Clicking the & buttons will allow you to view and hide items within those categories. Just like in the page editor you must delete the children of the category before you can delete it.
Clicking the View Products buttons will take you to the page above, here you can add, edit, and delete products.
The Button will let you customize how your columns are sorted, there are a number of options, from price, notes, and of course name. Use what works best for you and your company.
### Add New Products
The Button will let take you to a page where you will fill out all of your products information. A detailed example of each window will be below. To get the most out of the Catalog module be sure to check every item out.
* **Basic Information**
* **Name -** This is the text that will appear in the site map and other links to this page.
* **Title -** This is the text found in the browser's title bar.
* **Header -** This is the text that will appear as the main heading of the page.
* **Style/Product Number -** This gives your product another description to identify it
* **Is Available -** This lets you toggle if a product is available or not
* **Is Featured -** This lets you highlight a product, be it for a sale, season, or any reason you like.
* **Is New -** This lets you highlight a product if it is new.
* **Manufacturer -** This lets you set the manufacturer of the product.
* **Description**
This lets you set a description of the product, the tool-bar buttons are discussed in the key buttons section of the page editor.
* **Images**
Add and edit photos in this section.
* **Price**
Set the retail price, sale price, and sale length of a product here.
* **Attributes**
Here you can edit very specific information about products such as size, quantity, SKU and much more. Visit this area to adjust the finer details of your products.
* **Categories**
Set all of the Categories your product belongs in here.
* **Related Products**
Here you can suggest similar products your customers might buy.
* **URL's**
Set all of the routes your product is associated with here. You can choose to use full URL or select the Prepend Parent Category Routes check-box to type in a shorter version (i.e. "yourproduct" instead of "products/yourproduct").
* **SEO**
Here you will fill out keywords and other search information that helps browsers find your website and your product.
* **Shipping**
Fill out details about the products Shipping, including price and weight.
* **Taxes**
Set Sales tax or remove it.
* **Customization**
List whether the product is customizable or not.
* **Misc**
Fill out special notes, and details about the product here.
* **Remove/Show Tabs**
This button toggles the tabs, letting you organize the product information however you prefer.
Back on the Category page you will also find a settings button next to the edit button, we will go over the settings below.
* **Settings**
* **Store -** You can change the location of where the products are at with the store drop down menu.
* **Inherit Parent Store -** Set it receive the store set by the parent category instead of setting the store itself.
* **Parent Category -** Set Category to be the child of another Category or be on its own.
* **Is Active -** Turn off/on category info in the Site Map.
* **Name -** Name the Category
* **Title -** In your browser you will see Tabs at the very top showing you which website you are currently viewing, this is the text your visitors will see when viewing this tab.
* **Header -** This is the Heading of your page.
* **Price Adjustment -** This is a conditional price.
* **Amount or Percent -** This toggles whether your Price Adjustment will be set to an amount or percent.
* **Inherit Product Images as Category Box image -** Inherit images from the categories parent.
* **Description**
Here you will find a word like document to edit the description of your product. You can find information about the toolbar in the key buttons section of the Page Editor documentation.
* **Images**
When you upload an image for your category, a tool-bar will pop up. Displaying the image in a box will set it to a fixed height and width, displaying as a banner will set it as a full width image.
* **URL's**
Here you can set your category to be accessed by multiple URL's, Clicking the "Prepend Parent Category Routes" check-box will allow you simply type the end URL while the parent URL's are added for you (i.e. your category instead of parentcategory/yourcategory ).
* **SEO**
This section allows you set keywords for search engines to better find your website. You can consult with our SEO Team for tips at or by calling 859-422-9165.
* **Misc**
This section lets you set secondary descriptions and more.
## Overview
This is a shortcut to the Add New Products button of the Categories/Products Section, if you missed it you can read all of the information above in the blue heading.
## Overview
Once your visitors have made a purchase you can visit here to check on the status of their order.
There is a filter drop down menu in the upper right hand corner of the screen allowing you to set a number of different options to sort your products, a long with the traditional ordering you can do by clicking on the columns.
The edit button will take you to a more detailed page about the orders status.
Here you can review the information your customers have submitted, add notes, save information for your own records, and of course process/ship pending orders.
## Overview
* **Customize Order Status**
Some clients do not like the default format on the order status, you can edit in whatever way works best for your company. It's pretty straight forward, use the edit , add , &, delete buttons change the status of your orders. Also by clicking the check-box you can set where your customers will be charged, though this is usually the last step.
By clicking on the empty fields you can add icons to your orders as well.
* **Order E-mail Templates**
Unfortunately the transfer of goods isn't always as seamless as we would like it to be, email communication is often necessary to keep good relations with your customers and it can be one of the most time consuming things for your business. Fortunately many of the issues that come up are common and you can set up templates for recurring issues.
As usual you can use the use the edit , add , &, delete buttons to navigate the templates. Common issues that occur are cancelled orders, out of stock orders, address verifications, etc. below will list an example of a common template
> Dear {{customer\_name}}:\
> Thank you for your order, {{purchase\_order}}. As soon as we receive your permission to add an estimated $ USD to your order for the US Postal Service postage to send your package, we will continue processing your order. (\*Note: Cost is only for what USPS charges on postage- we do not add any additional shipping or handling fees for postage).\
> Your order will be on hold about a week. If after that time we have not heard back from you, your order will be canceled.\
> Thank you
You will notice the odd characters **{{customer\_name}}** & **{{purchase\_order}}**. These are special variables that have been created so you can plugin unique identifying information for your customers. This way you wont have to customize each email that is sent out for each customer. In the upper right hand corner of the add/edit template page you will find a blue icon like the one shown here. Click here to open the drop down menu.
Here you can find the value you wish to use on the right side, on the left side you will just copy and paste the code you will insert in the document.
* **Price Groups**
You will have average customers visiting your website however, you may want to set price groups those meeting special conditions. So you may set a base price but also provide a discounted price to customers who are purchasing an item on sale, or perhaps you have some customers who may be apart of a premium group(like amazon prime members), frequent buyers, or even other businesses that order from you at a discounted rate. Here is where you will organize this information. Edit , add , &, delete groups using the buttons and follow along with the prompts shown to input information.
* **Promo Codes**
During the checkout process your customers will have a chance to enter a promo code you have marketed to reduce the price of their items. On this page you can set, edit, & delete these promotions.
Exporting and Downloading Promo Codes turns these into a CSV file.
If you select the add, or edit buttons you will be taken a to a page like this. Here you can enter the information you want about your promo codes and the conditions for their use. Most of the fields are easy to understand but we will go over the ones you may not be as familiar with.
* **Name -** Name you want to give the promotion.
* **Code -** This is the information your customer will have to enter to use the your promotional codes. Most people elect to use something that is identifiable with the sale the promotional code is offering, but not easy to guess. Such as NoShippingCost4197, this is obvious to the person who found your promotional code advertisement but not obvious to someone trying guess it.
* **is Active -** This toggles the promotion on and off if you would like to use it once a a year for a holiday such as black Friday.
* **Auto-Generate Codes -** By toggling this field you can eliminate the need to name a promotional code and set a limit on how many codes are given away depending upon the advertisement. See **"How Many"** section below.
* **How Many? -** To the right of Auto-Generate Codes you can set the number of promo codes that are generated.
* **Expiration Date -** Set an expiration date for your promotion here or leave it without an expiration by default.
* **Number of Uses -** This sets the amount of time a customer can use the code to purchase items, by default it is set to unlimited, so take care to select number of uses according to your budget.
* **Discount Amount -** Set the amount you will be discounting the items for your customers, the drop down menu to the right of this lets you set the discount to a dollar or percentage.
* **Max Limit -** This sets the maximum amount off a customer can use the promotional code for, so if its for a wide range of items and you do not want to give a discount for higher than $500, set this here.
* **Exempt Order From Taxes? -** Here you can toggle whether you want taxes to be included for your customers with this promotional code or not.
* **Conditions -** Here you can add as many conditions for the promotion as you would like such as a minimum amount the order must be, the category, or even the specific product that the promotional code is for.
* **Tax Groups**
Here you can set the Tax Groups you want to include your customers in, customize each by state, do only your state, or none at all. Click edit , add , &, delete groups using the buttons and follow along with the prompts shown to input information.
In the edit & add menu you can give your groups a name, set them to active, set a default and select the condition that groups your customers into this tax status.
* **Attributes**
Coming Soon!
* **Manufacturers**
Here you will add the manufacturer of the products you provide on your website with the edit , add , &, delete buttons.
* **Settings -** On the settings tab whenever you add or edit a manufacturer you can set the name, title, and route. It is best to keep the route simple by using the manufacturers name, this way a customer can search for a specific manufacturer.
* **Description -** Here you can edit the description of the manufacturer with the same tools you would use to edit in the Page Editor. Reference the Key Buttons section in the Page Editor Section if you have trouble understanding any of the tools.
* **Images -** Here you can select or drag and drop images to be added to the manufacturer information. Once added a the menu below will appear that letting you edit how the images will appear.
* **Meta Tags -** These are the key words that will help your customers search for your product.
* **Misc -** Check this section for more details you can edit on the manufacturer.
* **Stores**
Many customers do not actually house the products they are intending to sell, rather than that they dropship their products. Here you will list the information about the stores that house your products as well as the details of those stores. Navigate this menu using the edit , add , &, delete buttons.
**Add/Edit Stores**
Each store has a lot of details you can edit about it, we will be going over each of these details in ascending order.
* **Name -** This is where you put the name of the store.
* **Theme -** Coming Soon!
* **Route -** This is the route to just this stores products.
* **Is Default -** Toggle if this will be the default store listed if no others are chosen.
* **Logo Color -** Set Color of your logo.
* **Header Background Color -** Sets the background color of the header.
* **Background Color -** Sets the background color.
* **Primary Color -** Sets the primary color.
* **Secondary Color -** Sets the secondary color.
* **Logo -** Selects an image of your logo.
* **Homepage Slide show -** Selects a slide show you have from the Photo Gallery module.
* **Welcome Copy -** This is the text that will appear on the stores homepage.
* **Contact Name -** Sets the store contact name.
* **Contact Phone -** Sets the store contact phone number.
* **Contact Email -** Sets the store contact email.
* **Accept Credit Card -** Toggles credit card acceptance.
* **Accept Invoice Company -** Toggles invoice company.
* **Billing Address -** Sets the store billing address.
* **Billing Address 2 -** Sets the store billing address line 2.
* **Billing City -** Sets the store billing city.
* **Billing State -** Sets the store billing state.
* **Billing Postal Code -** Sets the store billing postal code.
* **Ship to Company -** Toggles shipping to this company.
* **Shipping Address -** Sets Shipping Address.
* **Shipping Address 2 -** Sets Shipping Address 2.
* **Shipping City -** Sets Shipping City.
* **Shipping State -** Sets Shipping State.
* **Shipping Postal Code -** Sets Shipping Postal Code.
* **Order Thank You Subject -** Sets subject of the the thank you.
* **Order Thank You Email Template -** Choose a thank you email template here, you can create a template in the **Order E-mail Templates** section of the Manage Catalog page.
* **Cart Email Subject -** Sets email subject for carts filled out for this store.
* **Cart Email Template -** Sets template email used for this car, you can create a template in the **Order E-mail Templates** section of the Manage Catalog page.
* **Referral Options -** Coming Soon!
* **Custom Checkout Fields -** Add a customized checkout field here for your store.
* **SA2 Import**
If previously had a the catalog module in our SA2 CMS you can use this tool to import your catalog information.
All you have to do is type in your credentials, mark the check-boxes for the information you want to import and click the Big Blue Import button.
* **Customization**
Coming Soon!
* **Fonts -**Here you can bring in fonts that are not native to site administrator for your catalog.
* **Colors -**Here you can set default colors for your catalog.
* **Patterns -**Here you can set custom images to be used in your catalog.
* **Designations -**Coming Soon!
* **Locations -**Coming Soon!
* **Shipping**
**Delivery Methods**
Here you can set which shipping companies you will use as well as set the conditions of those companies for shipping. Clicking the edit button will take you to the page shown below.
Here you can can see an overview of all your shipping methods and the conditions that have been set for them.
Clicking the edit button again will take you to the page above. This will allow you to set the conditions for each delivery method. The **Calculate On** drop down menu will let you set whether delivery will be calculated on price, weight, or location.
## Overview
The Events module is the great way to showcase to your customers anything special you have going on at your business. Once you install the module from the Site Administrator store, you can present a calendar to your visitors of everything exciting you have going on.
Above is a picture of the drop down menu for the events module whenever you we will go over each of these in ascending order.
### Create Category
All you need to do here is give your new events category a name and a description and click save. Then we can dig into how to add events to the category & showcase it. Don't forget to activate the module on the page you want by using the Page Editor.
### Manage Categories
This section lets you edit any event categories you have already made using the edit , add , & delete buttons.
### Create Event
Now for the fun part, you get to create your event.
Here you will set your event name, select the category it is associated with, set a link to more info for the event.
Here you will select general information about the time of the event, be sure to mark the check-box if it is an all day event or not. All of the fields have easy to use drop down menus where you can set the date and times of the event. If it is a recurring event you can set its frequency with the button at the bottom.
Here you will get all the address information, this is just like filling out an address you would mail a letter to.
Finally give your visitors a way to contact you in case you they need more information.
### Manage Events
This section lets you manage any of the events you have created by using the edit , add , & delete buttons.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
**Warning: This module is for developers only, consult with E-link Design staff before using this module.**
## Overview
The staff module will info about members of your staff on your website. You can download it from the Site Administrator store and implement it with ease.
You will find the staff module on the left side with the rest of the modules.
### Create Category
All you need to do here is give your staff category a name and a description and click save. Then we can dig into how to add staff members to the category & showcase it. Don't forget to activate the module on the page you want by using the Page Editor.
### Manage Categories
This section lets you edit any staff categories you have already made using the edit , add , & delete buttons.
### Create Staff
This is where you will fill in information about your staff members, just follow along with the text field prompts and you will be just fine.
### Manage Staff
This section lets you edit any staff members you have already made using the edit , add , & delete buttons.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The shipping module lets you select your preferred methods of shipping, these are found in the Site Administrator Store. It is best to consult with your shipping carriers so you can make the best choice for delivering your products. Currently we are working on adding more functionality to this module.
## Overview
The payments module lets you select multiple methods of payments for your merchandise, be it Visa, Paypal, Stripe, etc. choose the option that works best for your customers and you, these are found in the Site Administrator Store. Currently we are working on adding more functionality to this module.
## Overview
The Members module is the best way to keep track of all of your customers info, here you will store their unique information, not just their name but their address, phone number, tax exemptions, and discounts. After installing the Members Module from the SA Store you can visit it along with the rest of your modules on the left side under the dashboard. You can edit any of the members info that join your site, however the best part about it is, your members can fill it out themselves when they join!
Above is the drop down menu of the Members Module, we will go over each section in ascending order.
### Manage Members
This section lets you create members, input valuable information about them, and manage this information.
By clicking the add button you can create a new member taking you to the page above. You can fill out basic information about the member, change their picture(avatar), leave comments, and the Bottom drop down menus will let you set if the member can join or if they are an active user.
The Miscellaneous tab lets you set social media info for your member, when they joined and, their old ID if they have one.
The last 2 tabs are for special cases when a customer is a awarded a discount for whatever reason you see fit, they also may have special tax exemptions which sets them apart from most. Using the edit button you can edit any of the member information.
Back on the Manage Members page you will find a login as user button. This will let you see everything as if you were the member/customer using their account. This is useful for troubleshooting problems a customer might be having with their account.
You will be taken to a screen with these icons, all the information is laid out very similarly to the way it it laid out in Site Administrator.
### Manage Groups
The Manage Groups page lets you add , edit , & delete groups from your site. This is great for keeping information on broad categorize of members.
## Overview
The chat modules will let your members chat with one another.To use the Chat Module you must first have the [Member Module](http://guide.elinkdesign.com/#mod_members) installed.
Once you have installed the Chat Module from the SA store you will find a drop down menu for it with these tabs. Currently you will need the assistance of an E-Link developer to setup the chat module.
Once you have the chat module setup you can exchange messages between other users.
More information coming soon!
## Overview
In the navigation on the left you will find the Settings tab
Clicking it will open a drop down menu like the one above
Many sections display their own drop down menu as well, the file tree below shows displays this.
* Files
* Manage Files
* Messages
* Manage Emails
* Manage SMS
* Manage Voice Messages
* Users
* Manage SA Users
* Create SA Users
* General Settings
The next Sections will give more details about each settings page in ascending order.
## Overview
The files section gives you a view of all the files you have uploaded. You can search,view, and delete whatever you have uploaded as well.
You can find the files section under the settings tab, click the drop down menu and select manage files.
Here you can view all of your uploads, you can choose to sort, search, show, or delete any of these.
Above you will notice the categories bar separating information on your uploads
To sort your files for convenience click the sort button shown above to arrange them by folder, filename, or the date they were created.
In the top right you will find the search button, by clicking this you will open a menu the search menu.
Fill in your files folder, name, or date created to quickly extract all files matching the criteria you have input.
The show button displays your uploaded image so you can see exactly what visitors to your site will see from Site Administrator
The delete button will remove the image from your website.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
## Overview
The Messages setting contains all of your websites emails, text messages, and voice messages, you can click on any of the information in the rows holding your messages including the edit button. You can also Delete any of these items using the delete button.
This is a view of the Emails tab.
This is a view of the SMS or Text Messaging tab.
This is a view of the Voice Messages tab.
## Overview
The Users Setting lets you Create and Manage who can use Site Administrator to edit your website as well as what they can edit. One of the most important reasons to have individual users for each person who logs into Site Administrator is to keep track of who is making changes. This can help prevent security breaks and promote best practices for using your website.
The Users tab will drop a menu down on click displaying "Manage SA Users" and "Create SA Users", we will explore Manage SA Users first.
### Manage Users
The picture Above shows an empty SA User page. You will see many columns displaying user information (Last Name, First Name, Username, Last Log on, Is Active), clicking on any of these columns will allow you to sort the users information by that field.
When you do have users you can edit or delete their accounts using the buttons seen on the far right.
The edit button is shown above, this will let you edit any information about the users account. We will go over what can be edited in further detail in the Create User Section
The Delete button will remove a users information.
**Important note - deleting a news item cannot be reversed. Click this at your own risk.**
On the far right you will notice a button like the one above. This is the Create Users Icon, it is a shortcut to the Create SA Users page.
### Create Users
You can reach the Create Users page by doing one of the following.
* Clicking the Create SA Users Tab on the far left just under Manage SA Users as shown above.
* Clicking Create User shortcut listed above.
* Clicking the edit User shortcut listed above.
No matter which way you choose, you will be greeted by the page shown below.
Here on the basic information page you can add or edit basic user information but the most important things to consider are the **Is Active, Is Super User, Username,** & **Password** fields.
* **Is Active -** Lets you store a users information while removing they're ability to edit content on the website. This is a great alternative to deleting a user.
* **Is Super User -** A super user has permission to edit anything, it is suggested to only give this privilege to those you can trust to edit any part of the website.
* **Username -** This is the same username they will type in to enter Site Administrator.
* **Password -** This is the same password they will type in to enter Site Administrator.
The Permissions tab lists all the things that a user can do, for example, you can give a user the ability to add and view files, but not delete them. This is a great setting to prevent any sensitive information you might have from being lost. Click on the check boxes to select what you want to allow each user edit and then click the blue Save button at the bottom of the page.
Approved Devices: Coming Soon!
The Login history Tab displays details about when a user has logged in. This can assist with tracking user behavior and address issues with changes you might not want.
## Overview
The General Settings section is where you will edit many important details of your website. Because of how broad this category is, its best to check out each category and determine if you will need anything.
Page Editor Simple: Here you can toggle Pages Search Results on or off.
The System section: We'll go over each of these rows from left to right
* API SA User Log: This logs all Site Administrator members API use.
* Enable Revision Tracking: This saves the changes done to your website, you may want to set your website back to how it was a week before. This setting allows you to save instances of your website so that you can roll it back if necessary.
* Require SSL: This adds a layer of protection to your website, you can see a short video on this here
* Timezone Default: Your website may have things dependent on your timezone, you can set these timezones using the text in bold below.
* Eastern ........... **America/New\_York**
* Central ........... **America/Chicago**
* Mountain .......... **America/Denver**
* Mountain no DST ... **America/Phoenix**
* Pacific ........... **America/Los\_Angeles**
* Alaska ............ **America/Anchorage**
* Hawaii ............ **America/Adak**
* Hawaii no DST ..... **Pacific/Honolulu**
If your timezone is outside of the United States you can find a more comprehensive list here at
* Public Directory: If you would like to change the path of your website, this can be done here.
* Site URL: If you have another domain you would like to set your website to, you can set it here.
* Secure Site URL: This is your SSL URL.
* Session Domain: When your visitors come to your website, all of their data will be stored a this URL.
Filling out these SMTP settings will help you make your email transfers even more Secure.
* SMTP From: This stores where you will safely send email from.
* SMTP From Name: This is the name you will send mail from.
* SMTP Host: This is the IP Address your mail will be sent to.
* SMTP SMTP Auth: Check here to have your mail SMTP Validated
* SMTP Username: Set a username for your email.
* SMTP Password: Set a password for your email.
* Site Email: Set the address your site will receive emails
* Version: Coming Soon!
*
* Recaptcha is authentication measure taken to prevent bots from spamming your website, a picture is presented to the visitor and instructions must be followed to prove that you are a human being. You can set this up through google here
* Recaptcha Public: This is where you will place the public key you get from Google Recaptcha.
* Recaptcha Private: This is where you will place the private key you get from Google Recaptcha.
* SA Session Time: Here you can set the amount of time Site Administrator will keep you logged in when left Idle. This is a security measure taken to prevent misuse of your account. The session times are stored in minutes.
* Sa Device Verify: This Settings verifies that a device connecting to Site Administrator is safe to use.
*
* Twilio is a cloud communications company based in San Francisco, California. Twilio allows software developers to programmatically make and receive phone calls and send and receive text messages using its web service APIs.
* Twilio Sid:The Message SID is the unique ID for any message successfully created by Twilio’s API. You can find more information here at
* Twilio Token: This is your unique identifier, you can find more information about this here at
* Twilio Phone Number: This is the phone number associated with your twilio account.
* Site Admin Image: This is the image you will find in the upper left hand corner of site administrator, you can set it to whatever you like.
* Site Admin Login Image: This is the image you will find when logging into site administrator, you can set it to whatever you like.
* Allow Cli Composer: This is a switch that forces composer to use either the command line and execute on the command line or to be included and run as php. This is an advance feature that the end user should not touch unless told otherwise.
The Theme section lets you set information to be dynamically inserted into your website, it's best to fill out **all** of these forms. If your theme has a place for this information it will check on this page to see that it exist and insert it into your page. More information on the themes setting is below.
## Overview
The themes module lets you use one of our custom themes or even install your own, to give your website a more unique style.
### Getting started
Like all new modules you can find themes in the SA store, simply click install and you're ready to hit the ground running.
To set a theme open the settings tab on the left in Site Administrator as seen here and click the general settings tab.
Now that you're in the general settings, your page should look similar to the one shown above. Click the "theme" tab.
On the themes page you will find a drop down menu in the top left just under the Theme category. This will show you a list of all the themes available to you. Select whichever theme you would like to try.
You can also fill in all of the forms in this section to add content dynamically to your website.
With your new theme selected, all that's left to do is click the "save" button at the bottom of the page. Open or refresh your websites page and you're all done!
## Setting up a new theme
Now for something a bit more advanced, for some people creating your own theme may be the way to go. If you have the expertise to create your own, Site Administrator lets you do this as well.
## How to set up a new theme
1. Log in to Filezilla(or your ftp client) using the ftp information for the site(ftp information coming soon).
2. A list of files should appear, select siteadmin.
3. Select the themes folder.
4. In this directory, right click and select ‘create directory’. A prompt will pop up to create a name for the folder. Typically, using the site’s name for the theme is the easiest way to go.
5. After creating the folder, select the folder. In the folder you just created, add two more directories named assets and views.
6. In the assets folder you can place the css, js, and image files needed for the template.
7. Select the views folder. In this folder you are going to create another directory and title it vtemplates.
8. Enter the folder you just made. Right click within the folder and select create new file. This file you are going to label as master.php.
9. Open the file you created in your text editor. In this file you need to place the following: header,{views},footer
10. Save the document and exit it.
11. Return to the views folder using the ‘..’ or select the folder from the lists above the file box.
12. Next we are going to create two new files. One will be named header.php and the other will be named footer.php.
13. The header file will contain the header portion of the website, including the navigation. The footer will contain everything needed for the footer. These two sections will not be able to be edited through the Site Admin Page Editor. If you need to make changes to any of the code, you will need to access these files in order to do so.
14. After the previous steps have been completed, log into the site admin section of the website.
15. Click Settings located in the menu on the left side of the page. A drop down box will appear, select General Settings.
16. Navigate to the Theme Tab. Under that tab, the section box will be labeled Theme as well. Select the theme you just created from the drop down and save the changes.
17. To begin working on your homepage layout, create a layout for the page.
After creating a layout, create a page titled Home. Under the Page Details section, the page type will be Link to a URL. The File Name/URL will be "/" (forward slash) to place this page as the Home Page of the website. Save your changes.
Examples The following libraries and plugins have been used to power different parts of Ace admin template.\
You can find documentation and examples for each one on their respective pages or you may want to check out Ace HTML files for examples.
* jQuery 2.0.3
* jQuery UI 1.10.3 (Custom Build)
* Twitter Bootstrap 3.0.0
* FontAwesome 3.2.1
* LESS 1.4.1
* Mustache
* Twitter Hogan.js
* Mustache.js
* Mustache for PHP
* Google Fonts "Open Sans"
*
* jQuery Flot Charts 0.8.1
* jQuery Sparklines 2.1.2
* Easy Pie Chart 1.2.5
* jQuery Knob 1.2.0
*
* Mindmup Wysiwyg Editor
* Toopay Markdown Editor 1.1.4
* jQuery Validate 1.11.1
* FuelUX 2.3.0 (Spinner, Wizard & Treeview)
* Dropzone.js 3.0
*
* FullCalendar 1.6.4
* jQuery ColorBox 1.4.27
* jQuery dataTables 1.9.4
* jQuery jqGrid 4.5.2
*
* X-editable 1.4.6
* Select2 3.4.2
* jQuery Chosen 1.0.0
* jQuery Masked Input 1.3.1
* jQuery Input Limiter 1.3.1
* jQuery AutoSize 1.17.7
* Bootstrap Tags 2.2.5
* Nestable Lists
*
* Bootstrap Colorpicker
* Bootstrap Datepicker
* Bootstrap Timepicker v0.2.3
* Bootstrap DateRange Picker 1.2
*
* Bootbox.js 4
* jQuery Gritter 1.2
* jQuery slimScroll 1.2.0
* Spin.js 1.3.0
*
* jQuery Mobile 1.3.2 (Custom Build)
* jQuery UI Touch Punch 0.2.2
* Google Code Prettify
* ExplorerCanvas
# Site Administrator
Site Administrator is a Content Management System (CMS) that allows any individual or business to manage the routine changes of text and graphics on their website, intranet or extranet without the knowledge of HTML or web programming. It is further integrated into catalog and order processing management for e-commerce sites, project management in Intranets, and countless other uses. The CMS is designed to be very user friendly and robust with powerful tools to design, build and manage web content.
The CMS framework allows us to integrate custom modules into the system to make it perform any functions you require with ease. The module-based approach allows eLink to provide customized solutions for all of our clients needs, with quick implementation and effective support. Your new website is enhanced with the E-Link Design Content Management System, allowing you to keep content on your website up-to-date. The following instructions tell you how to log in and update the content.
Site Administrator is a very robust Content Management System that can help you easily make your website great. Some of this will be considered required reading to get up and running but many of the modules you will not need to know anything about until you plan on implementing them. Be sure to read the entire Introduction, Changes & Updates, Settings, and the Modules: Dashboard and Page Editor section. Beyond that you can treat this as a choose your own adventure book, be sure to read up on any new modules you install and come back to this whenever you have trouble implementing any changes to your website.
Below are the steps required to install the latest version of Site Administrator.
1. Download the latest Installation file *sa.install.php*, [click here](http://www.siteadministrator.com/downloads/sa.install.zip).
2. Unzip and upload *sa.install.php* to the root directory of the website.
3. Visit the installation file at
4. Follow the installation instructions.
Requirements: PHP 5.6.2+ with Multibyte String, GD Library & MySQL 5.5+
First, point your web browser to **[www.acmecompany.com/siteadmin](http://www.acmecompany.com/siteadmin)** Where ‘acmecompany.com’ is the URL of your website. When you get there, you will see this screen:
You will be given a username and password to log into the site. The default username and password is ‘admin’ and ‘admin’ on all new websites, but you will be prompted to change your username and password the first time you log in.
Note Username and passwords are configured during the installation.
If you have any issues logging in please make sure to contact support. Two factor authentication is available but must be configured.
Once you’ve logged in, you will see a number of sections on the left. These sections allow you to control the content on your live website and any other particular modules you have. There is also a navigation menu in the top right corner.
The navigation menu in the top right shows common actions you will be performing in Site Administrator. Here is a description from left to right.
Link Icon will open your website in a new tab so that you can view new changes you have made without having to open a new tab and typing the address on your own.
This icon is a shortcut to edit your website with the page editor tools, we will go over their use later just know this is here for now.
This icon displays comments and follower notification from your website and connected social media websites.
The user info button (Dark Gray "Welcome" button) opens a drop down menu when clicked. We will go over the 1st two buttons in more detail later, for now just know they are here.
* The Settings tab is a shortcut to the general settings page.
* The Software Updates tab is a shortcut to SA Store.
* The Log Out button will log the user out of Site Administrator.
You can also log out with the navigation menu on the left
Logging Out is one simple way to keep your content out of the hands of people who have malicious intent or just aren't trained well enough to use the CMS. It is also a good practice to have only one person assigned to each account, this helps keep track of who is making changes on your website.
Note The navigation bar on the left hand of the screen contains all that ‘modules’ that ultimately control all the content on your website. The following pages detail these modules.
Browse and download Modules, Themes and APIs to Site Administrator. SA Store is accessible via the main navigation. Site Administrator will be continuously patched and updated periodically and through the Store as well.
The best way to be sure you have the greatest experience with Site Administrator is to periodically check for updates and be sure to install them whenever available. You can do this by going to the SA Store and clicking "Update All" under System Summary. When no more system updates or module updates are available you are good to go!
The modules within Site Administrator(SA) make up the heart of the system. Not all modules appear in the main navigation but all are managed within the SA Store.
You will find the SA store within the navigation tabs on the left close to the bottom of the list.
When you open the SA store tab, you will find a System Summary and a Modules menu. Lets go over the system summary 1st.
* **System Updates -** This tells you if there are any system updates available.
* **Module Updates -** This tells you if there are any module updates available. You can update them individually(in the modules sections) or you can can click the update all button
* **Modules Installed -** This tells you how many modules you have installed.
* **Themes -** This tells you how many themes you have installed.
You do not want to see any red in your System Summary, if it is gray you have the latest version of Site Administrator as well as the latest versions of your installed SA modules.
If your System Summary looks more like this with information highlighted in red, it is recommend that you click the big red "Update All" button and install the latest versions. This will in sure that you have the best and most secure experience that is available.
## Installing A Module
To install a new module locate the one you you would like in the site administrator store, for example the "Catalog Module" seen here.
Then click the install button and wait through the installation process.
A module update screen will pop up that looks similar to the one above, this is just letting you know that your module is being installed. You will have to wait for a short time before it is finished. Once you see the text stating you're ready to go.
Now if you look through your browsing tabs you will find your module (in this case the Catalog) installed.
As stated above you can update modules individually by finding them in the SA store list, just look for the modules that have an update button and you're ready to pick and choose what you would like to update. If your module says installed, there is nothing for you to do with it which is a good thing!
## Overview
The dashboard is the 1st screen you will see once you log into Site Administrator. This will give you a brief overview of all of your modules, new items displaying to your customers, and recent changes that have been made on your website. This is meant to give you preview of important and new things happening on your website.
## Contents
* Catalog
* Recent Form Submissions(Coming Soon!)
* Recent Reports(Coming Soon!)
* User Activity(Coming Soon!)
* Page Visits(Coming Soon!)
* Social Media(Coming Soon!)
* Statistics(Coming Soon!)
## Catalog
Here you will find general information about your Catalog Module
You will receive key information about your products here, updating you on things like how many products you have left and behavior of your customers over the past 30 days.
## Overview
The page editor module is probably one of the most important parts of your CMS (if not the most). It allows you to access the text and images that appear in key parts of your website and change them with an editing tool similar in nature to tools such as Microsoft Word.
## The Interface
When you first log in to the CMS you will see the Page Editor item in the menu on the left side of the screen. Clicking on it will reveal the menu, which contains "Manage Pages". Click on "Manage Pages" to load the document tree:
The page editor is going to be your greatest asset as it is the best way to organize documents on your website. Think of your computer and the way it stores your files. If you are familiar with files and folders, you probably have your files organized so that certain files are categorized in certain folders. Also, folders can be inside other folders.
Now, apply this idea to pages. Perhaps you have a page that contains an overview of what your organization is about. Perhaps you would also like to go into more detail about different aspects but don't want to do that all on the same page. Having a structure like the one shown above allows you to organize your pages so that all the pages pertaining to the description of your organization are grouped together underneath your 'overview'.
In other words, the main reason behind the structure displayed above is organization only. An added benefit is the fact that we can use this structure to dictate certain things on the website such as a websites menu. This is not always the case (depending on the website).
Now you probably have some questions about all of the buttons you are seeing so we're going to go over each of them.
### Key Buttons
**The icons on the left signify certain actions:**
This icons lets you drag and drop your pages in the tree. You can only move a page up if it is not already at the top of the list of pages in the same 'level' as other pages. Likewise, you cannot move a page down if it is not already at the bottom of the same 'level' as other pages.
This icon signifies that a page has no children
Maximize Button - This is the default button for pages with children. You can view the children of this page by clicking this button
Minimize Button - This is the button you will see after you have clicked the expand button. You can click this to minimize the children of a page if you are not viewing them to help keep yourself organized.
If you are not sure if a page is on the same level as other pages, you should notice that the pages in figure 1 all have dotted lines joining them. Notice that the image to the left has the tree highlighted with different colors. These two colors indicate the separation of the different levels for the pages displayed.
**The icons on the right signify certain actions:**
The Active/Inactive indicators. If the green icon is 'lit up' it means that the site is active and can be accessed by anyone. If the red icon is 'lit up', the page is inactive and will not be accessible by anyone. Instead, they will get an error message indicating that they cannot access the site. To change the status of a page between active and inactive, click the green (to set a page as active) or red icon (to set a page as inactive)
Clicking this "edit" button will open the page in a new window as it appears on the website.
Clicking this "settings" button will allow you to change certain attributes of the page such as the page's title and where it appears in the document tree.
Clicking this red "Delete" button will allow you to remove a page from the document tree.
The Gray delete button will not work because you need to remove its children first.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
Paste From Word
This set of buttons will help you cut, copy, and past however the button on the far right is the Paste From Word button. This is a critical button used whenever you have content in a Microsoft Word document that you want ultimately want on the website. Instead of copy and pasting directly from Word, you must first open the Paste From Word box and paste it there. This ensures all the odd formatting features of Word are not transferred to the site. Essentially Word documents do not translate well to the Page Editor and must first be stripped down using this feature.
Undo and Redo
As the name implies, this feature will let you correct a change you just made, or revert back to the original change with one easy click.
Spell Check - This will allow you to check your text for spelling and grammar errors.
Hyperlink - Inserts a new hyperlink or edits the selected hyperlink. Also allows you to add a document for download from the site.
Insert Picture – This allows you to insert a picture into your content.
Code Snippet - This feature will allow you to insert a snippet of code and format it to the language of your choice.
Table - This allows you to insert, and edit a table into your content sorting and for adding or changing borders to selected text, paragraphs, cells, or objects.
Line -This allows you to easily insert a line into your content.
Special Characters - Allows access special characters for the page, i.e. dollar signs and other special characters.
View/Edit Source -This feature allows you to view/edit the source code on any given page.
This will allow you to bold, make italic, and underline the text on your page.
Remove Formatting - This removes the formatting of your document.
Ordered list - This allows you to create an ordered list.
unordered list - This allows you to make the content appear with bullets that can be numerical or symbolic in nature.
Indent - This feature allows you the ability to indent your content to the left and right on the page.
Block Quote -This feature will allow you to put any highlighted text in a block quote.
Alignment - This area controls the alignment of the text on your page. From left to right, you can align left, align in the middle, align right, and justify full.
Styles and Formatting - These buttons allow you to create/edit various styles and formatting within the page.
Format Field - This allows you to change headings on your text.
Font Name - This will change your font style.
Font Size - This will change your font size.
Colors - The Foreground Color will allow you to change the color of your text, while the background color will let you modify the background color.
About CKE Editor - This gives a short description of the CKE editor.
## Tutorials
To view a list of tutorials, please click on the link provided below:
Coming Soon!
You can reach this section in the page editor by clicking on the hyperlink button shown above.
on the link info Tab, choose a link types of URL, set an anchor point on your page to scroll to, or link to an email. Then fill out their associated form.
This is the target tab
Using this you can set you what action will occur whenever someone visiting your page clicks a link you've created.
**\ -** Opens link with the default action.
**\ -** Opens the linked document in a named frame.
**New Window(\_blank) -** Opens the linked document in a new window or tab.
**Topmost Window(\_top) -** Opens the linked document in the full body of the window.
**Same Window(\_self) -** Opens the linked document in the same frame as it was clicked (this is default).
**Parent Window(\_parent) -** Opens the linked document in the parent frame.
The Manage Layouts page will look something like this. Click on the icon to proceed to creating a layout
Begin by giving your layout a name in the properties section on the right.
Site Administrator sets your pages up for your visitors by using a responsive grid system. This is done using a series of rows and columns inside of containers which will hold your pages content. Choose a "New Container"(content will not span full width of screen) or "New Fluid Container"(content will span full width of screen).
The Container or Fluid Container will be shown on your screen with a dashed line. With your container selected, click the Row button. This will set a grid spanning the entire width of your screen for content to be entered. You can add as many rows as you like to a container.
With your row highlighted you can now add a Column with the "New Column" button.
You will notice that the Column that appears will not span the full length of the row. Below we will discuss how you will resize your columns to display your content however you see fit.
When you have the column selected you will notice buttons that look like this. The 1st 3 are (Delete, Show/Hide, and Move) buttons have been covered in a previous section. We will be looking at the resize button.
The resize button you will hold click and drag to the desired size of your content on your page. So you can make column span the entire length of the page or as little as 1/12th of the page. It is important to consider what type of device your users will be visiting this page on however. As a general rule, on small devices such as tablets or phones your columns should be very wide, often the full width of the screen. For desktops however breaking the page content up into 1/4 size of the screen will display the content well. It's all up to you, just keep your visitors experience on your site in mind.
You will notice the tabs in the upper left corner of the screen showing Medium/Large Screen, Small Screen, and Extra Small Screen. As you might guess, this is how your layout will appear to your visitors on those screens. Be sure to check each tab for how your columns are structured.
The lower section of the toolbox on the right is the last part of the equation before you begin adding content. Here you will select the type of content you will be adding. You will edit this content in the Manage Pages tab of the Page Editor. Then click on the corresponding element shown on the page.
This is the Create Page section, it will let you create a page as well as set attributes on it. We will review these details below.
The 1st detail we see on the left side on Page Details is the parent drop down menu, here you can set the page you're creating to stand alone or if you would like you can set it so that it is a child of another page. Think of child pages as you would a typical folder structure, you probably have a Documents(Parent) folder. Inside of that Documents folder there may be files, these would be considered the Document folders children. The rest of the items seen above have a description attached to them.
We discussed page layouts in the Manage Layouts section above, here you can use any of the layouts you have created to give your pages a well designed look. The Page Type drop down menu lets you use a normal page or give the full URL to the page. Most people find it easier to leave the Page Type as normal.
The SEO Page is where you will enter information that will help browsers search your website, for more information on this and robots you can visit or call (859) 422-9165 and ask for the SEO team.
The access page lets you set if only members of your website can see the corresponding page or if anyone can see it at all. Setting a page as inactive is a great substitute for deleting a page especially if you only want people to see it whenever you're advertising a monthly event or something else that is recurring but not always active.
Under the Advance settings you can add special features to your pages. Using Header Image you can select or upload an image to be used on your website, you can inherit an image from a parent site, or add an html tag to add an image. The View Template setting will allow you to link your own header and footer rather than the default. The Icon Name will let you add Font Awesome Icons to your navigations. You can also choose to show or hide the page and sub-nav on the main navigation.
### Miscellaneous Coming Soon
## Overview
FAQ sections are comprised of answers to frequently asked questions, and other important questions to aide your visitors. Additionally, these sections can be sub-divided any way you would like. Using the FAQs Module in your CMS, you will be able to cater the FAQs section to your exact specifications and then continually update/delete the content in real time. The FAQs are logged into separate databases for easy browsing and searching. When you choose to utilize your FAQs Module, you will click the ‘FAQs’ button under the main navigation of your CMS, and the FAQs options will expand below.
## Create A New Category
When you want to post FAQs, and have never used the FAQs Module before, you must first create a category to post the FAQs in. To do this, you will simply click the ‘Create Category’ button under the FAQs heading in the navigation.
Note Simply type in the name of your category and click the ‘Create’ button to create the FAQs category.\
You may have as many categories as needed.
## Create New FAQs
When you want to add FAQs to the website, simply click the ‘Create FAQ button under the FAQs heading in the navigation.
Note From here you will be able to post FAQs to your website, with categories, questions, and answers.
The first thing to note is the category in which the FAQ will fall. In this example ‘Sample FAQ’ is the appropriate category for this FAQ. After all the fields you want to use are completed, simply click the ‘Create’ button to save it and to make it live on your website.
## Manage FAQs
When you want to modify/edit an existing FAQ on the website, simply click the Manage FAQs button under the FAQs heading in the navigation.
Note This screen gives you a few options and information. For one, it tells you how many categories you have, and how many FAQs fall under each one.
### Key Buttons
Clicking this icon will expand the FAQ
Clicking this button will close the drop down window you had previously expanded
When you hover over an item in the FAQs module this icon will appear. When you hold down click you can move the FAQs up and down on the page in real-time. You can only move a FAQ up if it is not already at the top of the list of FAQ in the same 'level' as other FAQs. Likewise, you cannot move a FAQ down if it is not already at the bottom of the same 'level' as other FAQs.
Clicking this "Edit" button will allow you to change certain attributes of the FAQ
Clicking this "Delete" button will allow you to delete a FAQ from the FAQs page. Important note - deleting a FAQ cannot be reversed. Click this at your own risk.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The News Module will allow you to add, edit, and remove news articles with titles, bodies, and embedded images in real-time. Using the page editor described above, you can design news articles with saved styles and with a visual editor; older articles will automatically be archived for a specified amount of time.
## Manage News
If you select the Manage News icon under the main News navigation, you will be able to edit older news articles and move them up or down on the page.
### Key Buttons
Clicking this icon will expand the news.
Clicking this button will close the drop down window you had previously expanded.
\
These icons let you move the news up and down on the page in real-time. You can only move a news item up if it is not already at the top of the list of news in the same 'level' as other news. Likewise, you cannot move a news item down if it is not already at the bottom of the same 'level' as other news.
\
Clicking this "Edit" button will allow you to change certain attributes of the news
\
Clicking this "Delete" button will allow you to delete a news item from the news page. Important note - deleting a news item cannot be reversed. Click this at your own risk.
## Create A New Category
When you want to post news, and have never used the news Module before, you must first create a category to post the news in. To do this, you will simply click the ‘Create Category’ button under the news heading in the navigation.
Note Simply type in the name of your category and click the ‘Create’ button to create the news category.\
You may have as many categories as needed.
## Create News
When you want to post a new article, simply click the ‘Create News’ button under the News heading in the navigation. You will then see a screen like this:
From here you can insert and post new articles to the site, with images, titles, short description and a more detailed section for the actual article. This utilizes the page editor interface and should be very straightforward. Once you have completed an article, simply click the save button. We will go over these items from top to bottom.
## Manage Comments
Coming soon!
## Manage RSS Feeds
In this section you can edit and delete any RSS feeds you have created.
## Create RSS Feed
When you want to post a new RSS feed, simply click the ‘Create News’ button under the News heading in the navigation. You will then see a screen like this:
From here you can simply give it a name, select a category from the drop down menu, drop in your RSS link and click the save button. That's it you're all done!
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Photo Gallery will allow you to add, edit, and remove photos with titles, descriptions in real-time.
## Manage Photo Galleries
The Manage Galleries tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
### Galleries
This column displays the name of your saved galleries.
### #Photos
This displays how many photos your gallery contains.
### Key Buttons
The Manage Galleries tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
Clicking this "edit" button will open the page in a new window as it appears on the website.
Clicking this "settings" button will allow you to change certain attributes of the page such as the page's title and where it appears in the document tree.
Clicking this "Delete" button will allow you to a page from the document tree.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
To add a new gallery from this page you can click the add Gallery button
\
You won't see this icon until you hold down a "click" with your on top of a gallery, you can move any gallery item to order them as you like. This will not effect how they are displayed on website, this is just for the sake of your own organization.
### Photo Gallery Settings
The Photo Gallery Settings tab will allow you to add, edit, and remove photos with titles, and set to active or inactive in real-time.
### Create Photo Galleries
The Photo Gallery will allow you to add, edit, and remove photos with titles, descriptions in real-time.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Forms Module is what you'll use to collect valuable information from your visitors. You can Create a form for just about anything you'd like, but first you'll have to download the forms module from the SA Store. See the SA Store heading for more information on installing a module.
You will find the forms module on the left side of the site administrator screen, opening the tab it will look like this
* Manage Forms
* Create Forms
* View Submissions
We'll start with Manage Forms
## Manage Forms
The Manage Forms section lets you create, edit, and delete any forms you might have
If you click on the search function a window like the one above will appear, this will help you filter out any unwanted forms and just bring up the one you want. You can also click on the Name and Route tab to order them alphabetically.
This is a shortcut to the Create Forms page, we'll go over how to use this more in the Create Forms section below.
The View Form Submission Data button will take you to another page where you can search through all of the user data that has been submitted for that particular form. You can also search through data you have archived. You will navigate it similarly to this page just mouse over any buttons you have questions about.
The change settings button will allow you to edit any of the settings originally stated. We will review this in the Create Forms sections.
### Edit Forms
The Edit Pages button will let you structure your forms however you like. Just click on the page you want to edit to adjust the forms.
In the next screen you will see how many pages your form has, click on the page that you want to structure.
If this is the first time you're editing your form, your page will look similar to this.
On the right hand side of the screen there will be a toolbox to help you put together your forms
Before you do anything you need to add a new row, this will start a layout for the forms you intend to have your visitors use.
By default, you can set 3 forms side by side. If you click the settings button on the far left you can edit how wide they are.
The Row Properties window may seem a little foreign but its easy to understand. At the top you will see 4 column possibilities. Each row under that you will see 4 different Widths relating to different types of devices. Each width field will accept a value of 0-12, that is because each row that will be displayed on your website will span a maximum of 12 units from edge to edge.
In the default example you will see 3 columns are being used(column 1 is always on). The X-Small and Small Columns each have 12 units in all of their fields while the Medium and Large Widths each have 4. Below you can see a visual representation of how that will be displayed to the visitors to your site.
* X-small Width - This is your view for phones with 12 units for each of the 3 columns.
* Small Width - This is your view for tablet sized devices with 12 units for each of the 3 columns.
* Medium Width - This is your view for desktop devices with 4 units for each of the 3 columns.
* Large Width - This is your view for larger desktop devices with 4 units for each of the 3 columns.
On smaller screens such as phones it is best to have a wide form field (such as 12 units per column), while on a larger desktop screen this could leave your screen looking unbalanced. Take this into consideration when making a form for your visitors.
Now that you have handled the layout of your forms you need to fill them out. You can use the toolbox or you can click the button to add a standard label. Click on the fields to open a more detailed view of the forms.
Here on the Section Properties page you can edit the information your form will request from your visitors. Selecting Type will list all of the different input fields they can enter, the Help Text(optional) field is here to give your visitors hints about what information they should give in the form. Here is a descriptive list of each of those fields.
* **Header -** This is just a Heading you can set for your forms.
* **Label -** This is a label you can give your form
* **Divider -** This helps divide and layout your forms with even more detail
* **Single Line Text -** Use this form for any general information you would like to ask your visitors that can be answered briefly, such as "What is your mother's maiden name?".
* **Paragraph Text -** Use this form for any general information you would like to ask your visitors that would require a more in depth answer, such as "Tell us about the last time you used our services".
* **Drop Down -** Use this whenever you want to your users to choose from a select number of option, Add the options in the Options/Values section of the Section Properties menu. Separate each value with a semi-colon (i.e. Option 1; Option 2; Option 3;)
* **Check Box -** Great for yes or no answers
* **Radio Button -** Once your visitor clicks this button they cannot remove it, they can only select other radio buttons.
* **State Selection -** This lets you choose between all 50 states.
* **Date -** Month, Day, Year Format.
* **Email -** This Form will only accept emails.
* **Phone -** Use this for requesting phone numbers
* **Radio Buttons(Multiple) -** Once your visitor clicks this button they cannot remove it, they can only select other radio buttons.
To add your newly made form to the your page you will need to go back to the page editor. A detailed explanation about adding the Form Module as well as other modules will be found in the page editor section
The delete button will remove the form you have selected completely
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
## Create Forms
Creating forms is as easy as filling out some short information here, will go over what each input does below.
* **Name -** This is the name of your Form.
* **Route -** This is the URI Path you will take to your form (i.e. example.com/your-path).
* **Is Protected -** Information Coming Soon!
* **Show Title -** This display the title of your form.
* **Is Resumable -** This lets your visitors save their form information and return to it later.
* **Show Progress -** This displays a bar so your visitors can track their progress on the form.
* **Submit Action -** Information Coming Soon!
* **Submit Button Text -** This is the Text that will appear in your submit button.
* **View Template -** Information Coming Soon!
* **Submission Text -** This is the text that will be displayed to your visitor after they have submitted a form.
* **Submission Email -** Information Coming Soon!
* **Other -** Information Coming Soon!
* **Style Class -** Information Coming Soon!
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The Catalog module is your solution to E-Commerce, this is one of the most robust modules in the SA store especially if you have a lot of products. Here you will add all of the information about your products including, photos, stock, price, and much more. After installing the Catalog from the SA Store you can visit it along with the rest of your modules on the left side under the dashboard.
Above is the drop down menu of the catalog, we will go over each section in ascending order.
## Overview
Clicking the & buttons will allow you to view and hide items within those categories. Just like in the page editor you must delete the children of the category before you can delete it.
Clicking the View Products buttons will take you to the page above, here you can add, edit, and delete products.
The Button will let you customize how your columns are sorted, there are a number of options, from price, notes, and of course name. Use what works best for you and your company.
### Add New Products
The Button will let take you to a page where you will fill out all of your products information. A detailed example of each window will be below. To get the most out of the Catalog module be sure to check every item out.
* **Basic Information**
* **Name -** This is the text that will appear in the site map and other links to this page.
* **Title -** This is the text found in the browser's title bar.
* **Header -** This is the text that will appear as the main heading of the page.
* **Style/Product Number -** This gives your product another description to identify it
* **Is Available -** This lets you toggle if a product is available or not
* **Is Featured -** This lets you highlight a product, be it for a sale, season, or any reason you like.
* **Is New -** This lets you highlight a product if it is new.
* **Manufacturer -** This lets you set the manufacturer of the product.
* **Description**
This lets you set a description of the product, the tool-bar buttons are discussed in the key buttons section of the page editor.
* **Images**
Add and edit photos in this section.
* **Price**
Set the retail price, sale price, and sale length of a product here.
* **Attributes**
Here you can edit very specific information about products such as size, quantity, SKU and much more. Visit this area to adjust the finer details of your products.
* **Categories**
Set all of the Categories your product belongs in here.
* **Related Products**
Here you can suggest similar products your customers might buy.
* **URL's**
Set all of the routes your product is associated with here. You can choose to use full URL or select the Prepend Parent Category Routes check-box to type in a shorter version (i.e. "yourproduct" instead of "products/yourproduct").
* **SEO**
Here you will fill out keywords and other search information that helps browsers find your website and your product.
* **Shipping**
Fill out details about the products Shipping, including price and weight.
* **Taxes**
Set Sales tax or remove it.
* **Customization**
List whether the product is customizable or not.
* **Misc**
Fill out special notes, and details about the product here.
* **Remove/Show Tabs**
This button toggles the tabs, letting you organize the product information however you prefer.
Back on the Category page you will also find a settings button next to the edit button, we will go over the settings below.
* **Settings**
* **Store -** You can change the location of where the products are at with the store drop down menu.
* **Inherit Parent Store -** Set it receive the store set by the parent category instead of setting the store itself.
* **Parent Category -** Set Category to be the child of another Category or be on its own.
* **Is Active -** Turn off/on category info in the Site Map.
* **Name -** Name the Category
* **Title -** In your browser you will see Tabs at the very top showing you which website you are currently viewing, this is the text your visitors will see when viewing this tab.
* **Header -** This is the Heading of your page.
* **Price Adjustment -** This is a conditional price.
* **Amount or Percent -** This toggles whether your Price Adjustment will be set to an amount or percent.
* **Inherit Product Images as Category Box image -** Inherit images from the categories parent.
* **Description**
Here you will find a word like document to edit the description of your product. You can find information about the toolbar in the key buttons section of the Page Editor documentation.
* **Images**
When you upload an image for your category, a tool-bar will pop up. Displaying the image in a box will set it to a fixed height and width, displaying as a banner will set it as a full width image.
* **URL's**
Here you can set your category to be accessed by multiple URL's, Clicking the "Prepend Parent Category Routes" check-box will allow you simply type the end URL while the parent URL's are added for you (i.e. your category instead of parentcategory/yourcategory ).
* **SEO**
This section allows you set keywords for search engines to better find your website. You can consult with our SEO Team for tips at or by calling 859-422-9165.
* **Misc**
This section lets you set secondary descriptions and more.
## Overview
This is a shortcut to the Add New Products button of the Categories/Products Section, if you missed it you can read all of the information above in the blue heading.
## Overview
Once your visitors have made a purchase you can visit here to check on the status of their order.
There is a filter drop down menu in the upper right hand corner of the screen allowing you to set a number of different options to sort your products, a long with the traditional ordering you can do by clicking on the columns.
The edit button will take you to a more detailed page about the orders status.
Here you can review the information your customers have submitted, add notes, save information for your own records, and of course process/ship pending orders.
## Overview
* **Customize Order Status**
Some clients do not like the default format on the order status, you can edit in whatever way works best for your company. It's pretty straight forward, use the edit , add , &, delete buttons change the status of your orders. Also by clicking the check-box you can set where your customers will be charged, though this is usually the last step.
By clicking on the empty fields you can add icons to your orders as well.
* **Order E-mail Templates**
Unfortunately the transfer of goods isn't always as seamless as we would like it to be, email communication is often necessary to keep good relations with your customers and it can be one of the most time consuming things for your business. Fortunately many of the issues that come up are common and you can set up templates for recurring issues.
As usual you can use the use the edit , add , &, delete buttons to navigate the templates. Common issues that occur are cancelled orders, out of stock orders, address verifications, etc. below will list an example of a common template
> Dear {{customer\_name}}:\
> Thank you for your order, {{purchase\_order}}. As soon as we receive your permission to add an estimated $ USD to your order for the US Postal Service postage to send your package, we will continue processing your order. (\*Note: Cost is only for what USPS charges on postage- we do not add any additional shipping or handling fees for postage).\
> Your order will be on hold about a week. If after that time we have not heard back from you, your order will be canceled.\
> Thank you
You will notice the odd characters **{{customer\_name}}** & **{{purchase\_order}}**. These are special variables that have been created so you can plugin unique identifying information for your customers. This way you wont have to customize each email that is sent out for each customer. In the upper right hand corner of the add/edit template page you will find a blue icon like the one shown here. Click here to open the drop down menu.
Here you can find the value you wish to use on the right side, on the left side you will just copy and paste the code you will insert in the document.
* **Price Groups**
You will have average customers visiting your website however, you may want to set price groups those meeting special conditions. So you may set a base price but also provide a discounted price to customers who are purchasing an item on sale, or perhaps you have some customers who may be apart of a premium group(like amazon prime members), frequent buyers, or even other businesses that order from you at a discounted rate. Here is where you will organize this information. Edit , add , &, delete groups using the buttons and follow along with the prompts shown to input information.
* **Promo Codes**
During the checkout process your customers will have a chance to enter a promo code you have marketed to reduce the price of their items. On this page you can set, edit, & delete these promotions.
Exporting and Downloading Promo Codes turns these into a CSV file.
If you select the add, or edit buttons you will be taken a to a page like this. Here you can enter the information you want about your promo codes and the conditions for their use. Most of the fields are easy to understand but we will go over the ones you may not be as familiar with.
* **Name -** Name you want to give the promotion.
* **Code -** This is the information your customer will have to enter to use the your promotional codes. Most people elect to use something that is identifiable with the sale the promotional code is offering, but not easy to guess. Such as NoShippingCost4197, this is obvious to the person who found your promotional code advertisement but not obvious to someone trying guess it.
* **is Active -** This toggles the promotion on and off if you would like to use it once a a year for a holiday such as black Friday.
* **Auto-Generate Codes -** By toggling this field you can eliminate the need to name a promotional code and set a limit on how many codes are given away depending upon the advertisement. See **"How Many"** section below.
* **How Many? -** To the right of Auto-Generate Codes you can set the number of promo codes that are generated.
* **Expiration Date -** Set an expiration date for your promotion here or leave it without an expiration by default.
* **Number of Uses -** This sets the amount of time a customer can use the code to purchase items, by default it is set to unlimited, so take care to select number of uses according to your budget.
* **Discount Amount -** Set the amount you will be discounting the items for your customers, the drop down menu to the right of this lets you set the discount to a dollar or percentage.
* **Max Limit -** This sets the maximum amount off a customer can use the promotional code for, so if its for a wide range of items and you do not want to give a discount for higher than $500, set this here.
* **Exempt Order From Taxes? -** Here you can toggle whether you want taxes to be included for your customers with this promotional code or not.
* **Conditions -** Here you can add as many conditions for the promotion as you would like such as a minimum amount the order must be, the category, or even the specific product that the promotional code is for.
* **Tax Groups**
Here you can set the Tax Groups you want to include your customers in, customize each by state, do only your state, or none at all. Click edit , add , &, delete groups using the buttons and follow along with the prompts shown to input information.
In the edit & add menu you can give your groups a name, set them to active, set a default and select the condition that groups your customers into this tax status.
* **Attributes**
Coming Soon!
* **Manufacturers**
Here you will add the manufacturer of the products you provide on your website with the edit , add , &, delete buttons.
* **Settings -** On the settings tab whenever you add or edit a manufacturer you can set the name, title, and route. It is best to keep the route simple by using the manufacturers name, this way a customer can search for a specific manufacturer.
* **Description -** Here you can edit the description of the manufacturer with the same tools you would use to edit in the Page Editor. Reference the Key Buttons section in the Page Editor Section if you have trouble understanding any of the tools.
* **Images -** Here you can select or drag and drop images to be added to the manufacturer information. Once added a the menu below will appear that letting you edit how the images will appear.
* **Meta Tags -** These are the key words that will help your customers search for your product.
* **Misc -** Check this section for more details you can edit on the manufacturer.
* **Stores**
Many customers do not actually house the products they are intending to sell, rather than that they dropship their products. Here you will list the information about the stores that house your products as well as the details of those stores. Navigate this menu using the edit , add , &, delete buttons.
**Add/Edit Stores**
Each store has a lot of details you can edit about it, we will be going over each of these details in ascending order.
* **Name -** This is where you put the name of the store.
* **Theme -** Coming Soon!
* **Route -** This is the route to just this stores products.
* **Is Default -** Toggle if this will be the default store listed if no others are chosen.
* **Logo Color -** Set Color of your logo.
* **Header Background Color -** Sets the background color of the header.
* **Background Color -** Sets the background color.
* **Primary Color -** Sets the primary color.
* **Secondary Color -** Sets the secondary color.
* **Logo -** Selects an image of your logo.
* **Homepage Slide show -** Selects a slide show you have from the Photo Gallery module.
* **Welcome Copy -** This is the text that will appear on the stores homepage.
* **Contact Name -** Sets the store contact name.
* **Contact Phone -** Sets the store contact phone number.
* **Contact Email -** Sets the store contact email.
* **Accept Credit Card -** Toggles credit card acceptance.
* **Accept Invoice Company -** Toggles invoice company.
* **Billing Address -** Sets the store billing address.
* **Billing Address 2 -** Sets the store billing address line 2.
* **Billing City -** Sets the store billing city.
* **Billing State -** Sets the store billing state.
* **Billing Postal Code -** Sets the store billing postal code.
* **Ship to Company -** Toggles shipping to this company.
* **Shipping Address -** Sets Shipping Address.
* **Shipping Address 2 -** Sets Shipping Address 2.
* **Shipping City -** Sets Shipping City.
* **Shipping State -** Sets Shipping State.
* **Shipping Postal Code -** Sets Shipping Postal Code.
* **Order Thank You Subject -** Sets subject of the the thank you.
* **Order Thank You Email Template -** Choose a thank you email template here, you can create a template in the **Order E-mail Templates** section of the Manage Catalog page.
* **Cart Email Subject -** Sets email subject for carts filled out for this store.
* **Cart Email Template -** Sets template email used for this car, you can create a template in the **Order E-mail Templates** section of the Manage Catalog page.
* **Referral Options -** Coming Soon!
* **Custom Checkout Fields -** Add a customized checkout field here for your store.
* **SA2 Import**
If previously had a the catalog module in our SA2 CMS you can use this tool to import your catalog information.
All you have to do is type in your credentials, mark the check-boxes for the information you want to import and click the Big Blue Import button.
* **Customization**
Coming Soon!
* **Fonts -**Here you can bring in fonts that are not native to site administrator for your catalog.
* **Colors -**Here you can set default colors for your catalog.
* **Patterns -**Here you can set custom images to be used in your catalog.
* **Designations -**Coming Soon!
* **Locations -**Coming Soon!
* **Shipping**
**Delivery Methods**
Here you can set which shipping companies you will use as well as set the conditions of those companies for shipping. Clicking the edit button will take you to the page shown below.
Here you can can see an overview of all your shipping methods and the conditions that have been set for them.
Clicking the edit button again will take you to the page above. This will allow you to set the conditions for each delivery method. The **Calculate On** drop down menu will let you set whether delivery will be calculated on price, weight, or location.
## Overview
The Events module is the great way to showcase to your customers anything special you have going on at your business. Once you install the module from the Site Administrator store, you can present a calendar to your visitors of everything exciting you have going on.
Above is a picture of the drop down menu for the events module whenever you we will go over each of these in ascending order.
### Create Category
All you need to do here is give your new events category a name and a description and click save. Then we can dig into how to add events to the category & showcase it. Don't forget to activate the module on the page you want by using the Page Editor.
### Manage Categories
This section lets you edit any event categories you have already made using the edit , add , & delete buttons.
### Create Event
Now for the fun part, you get to create your event.
Here you will set your event name, select the category it is associated with, set a link to more info for the event.
Here you will select general information about the time of the event, be sure to mark the check-box if it is an all day event or not. All of the fields have easy to use drop down menus where you can set the date and times of the event. If it is a recurring event you can set its frequency with the button at the bottom.
Here you will get all the address information, this is just like filling out an address you would mail a letter to.
Finally give your visitors a way to contact you in case you they need more information.
### Manage Events
This section lets you manage any of the events you have created by using the edit , add , & delete buttons.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
**Warning: This module is for developers only, consult with E-link Design staff before using this module.**
## Overview
The staff module will info about members of your staff on your website. You can download it from the Site Administrator store and implement it with ease.
You will find the staff module on the left side with the rest of the modules.
### Create Category
All you need to do here is give your staff category a name and a description and click save. Then we can dig into how to add staff members to the category & showcase it. Don't forget to activate the module on the page you want by using the Page Editor.
### Manage Categories
This section lets you edit any staff categories you have already made using the edit , add , & delete buttons.
### Create Staff
This is where you will fill in information about your staff members, just follow along with the text field prompts and you will be just fine.
### Manage Staff
This section lets you edit any staff members you have already made using the edit , add , & delete buttons.
Note See the Add Modules documentation under Manage Layouts in the Page Editor section to display this module on your page.
## Overview
The shipping module lets you select your preferred methods of shipping, these are found in the Site Administrator Store. It is best to consult with your shipping carriers so you can make the best choice for delivering your products. Currently we are working on adding more functionality to this module.
## Overview
The payments module lets you select multiple methods of payments for your merchandise, be it Visa, Paypal, Stripe, etc. choose the option that works best for your customers and you, these are found in the Site Administrator Store. Currently we are working on adding more functionality to this module.
## Overview
The Members module is the best way to keep track of all of your customers info, here you will store their unique information, not just their name but their address, phone number, tax exemptions, and discounts. After installing the Members Module from the SA Store you can visit it along with the rest of your modules on the left side under the dashboard. You can edit any of the members info that join your site, however the best part about it is, your members can fill it out themselves when they join!
Above is the drop down menu of the Members Module, we will go over each section in ascending order.
### Manage Members
This section lets you create members, input valuable information about them, and manage this information.
By clicking the add button you can create a new member taking you to the page above. You can fill out basic information about the member, change their picture(avatar), leave comments, and the Bottom drop down menus will let you set if the member can join or if they are an active user.
The Miscellaneous tab lets you set social media info for your member, when they joined and, their old ID if they have one.
The last 2 tabs are for special cases when a customer is a awarded a discount for whatever reason you see fit, they also may have special tax exemptions which sets them apart from most. Using the edit button you can edit any of the member information.
Back on the Manage Members page you will find a login as user button. This will let you see everything as if you were the member/customer using their account. This is useful for troubleshooting problems a customer might be having with their account.
You will be taken to a screen with these icons, all the information is laid out very similarly to the way it it laid out in Site Administrator.
### Manage Groups
The Manage Groups page lets you add , edit , & delete groups from your site. This is great for keeping information on broad categorize of members.
## Overview
The chat modules will let your members chat with one another.To use the Chat Module you must first have the [Member Module](/old-guide/credits-third-party/site-administrator#mod_members) installed.
Once you have installed the Chat Module from the SA store you will find a drop down menu for it with these tabs. Currently you will need the assistance of an E-Link developer to setup the chat module.
Once you have the chat module setup you can exchange messages between other users.
More information coming soon!
## Overview
In the navigation on the left you will find the Settings tab
Clicking it will open a drop down menu like the one above
Many sections display their own drop down menu as well, the file tree below shows displays this.
* Files
* Manage Files
* Messages
* Manage Emails
* Manage SMS
* Manage Voice Messages
* Users
* Manage SA Users
* Create SA Users
* General Settings
The next Sections will give more details about each settings page in ascending order.
## Overview
The files section gives you a view of all the files you have uploaded. You can search,view, and delete whatever you have uploaded as well.
You can find the files section under the settings tab, click the drop down menu and select manage files.
Here you can view all of your uploads, you can choose to sort, search, show, or delete any of these.
Above you will notice the categories bar separating information on your uploads
To sort your files for convenience click the sort button shown above to arrange them by folder, filename, or the date they were created.
In the top right you will find the search button, by clicking this you will open a menu the search menu.
Fill in your files folder, name, or date created to quickly extract all files matching the criteria you have input.
The show button displays your uploaded image so you can see exactly what visitors to your site will see from Site Administrator
The delete button will remove the image from your website.
**Important note - deleting a page cannot be reversed. Certain pages have that ability locked out, but obviously not all of them (note some of the 'X' icons in the document tree in fig. 1 are grayed out). Click this at your own risk.**
## Overview
The Messages setting contains all of your websites emails, text messages, and voice messages, you can click on any of the information in the rows holding your messages including the edit button. You can also Delete any of these items using the delete button.
This is a view of the Emails tab.
This is a view of the SMS or Text Messaging tab.
This is a view of the Voice Messages tab.
## Overview
The Users Setting lets you Create and Manage who can use Site Administrator to edit your website as well as what they can edit. One of the most important reasons to have individual users for each person who logs into Site Administrator is to keep track of who is making changes. This can help prevent security breaks and promote best practices for using your website.
The Users tab will drop a menu down on click displaying "Manage SA Users" and "Create SA Users", we will explore Manage SA Users first.
### Manage Users
The picture Above shows an empty SA User page. You will see many columns displaying user information (Last Name, First Name, Username, Last Log on, Is Active), clicking on any of these columns will allow you to sort the users information by that field.
When you do have users you can edit or delete their accounts using the buttons seen on the far right.
The edit button is shown above, this will let you edit any information about the users account. We will go over what can be edited in further detail in the Create User Section
The Delete button will remove a users information.
**Important note - deleting a news item cannot be reversed. Click this at your own risk.**
On the far right you will notice a button like the one above. This is the Create Users Icon, it is a shortcut to the Create SA Users page.
### Create Users
You can reach the Create Users page by doing one of the following.
* Clicking the Create SA Users Tab on the far left just under Manage SA Users as shown above.
* Clicking Create User shortcut listed above.
* Clicking the edit User shortcut listed above.
No matter which way you choose, you will be greeted by the page shown below.
Here on the basic information page you can add or edit basic user information but the most important things to consider are the **Is Active, Is Super User, Username,** & **Password** fields.
* **Is Active -** Lets you store a users information while removing they're ability to edit content on the website. This is a great alternative to deleting a user.
* **Is Super User -** A super user has permission to edit anything, it is suggested to only give this privilege to those you can trust to edit any part of the website.
* **Username -** This is the same username they will type in to enter Site Administrator.
* **Password -** This is the same password they will type in to enter Site Administrator.
The Permissions tab lists all the things that a user can do, for example, you can give a user the ability to add and view files, but not delete them. This is a great setting to prevent any sensitive information you might have from being lost. Click on the check boxes to select what you want to allow each user edit and then click the blue Save button at the bottom of the page.
Approved Devices: Coming Soon!
The Login history Tab displays details about when a user has logged in. This can assist with tracking user behavior and address issues with changes you might not want.
## Overview
The General Settings section is where you will edit many important details of your website. Because of how broad this category is, its best to check out each category and determine if you will need anything.
Page Editor Simple: Here you can toggle Pages Search Results on or off.
The System section: We'll go over each of these rows from left to right
* API SA User Log: This logs all Site Administrator members API use.
* Enable Revision Tracking: This saves the changes done to your website, you may want to set your website back to how it was a week before. This setting allows you to save instances of your website so that you can roll it back if necessary.
* Require SSL: This adds a layer of protection to your website, you can see a short video on this here
* Timezone Default: Your website may have things dependent on your timezone, you can set these timezones using the text in bold below.
* Eastern ........... **America/New\_York**
* Central ........... **America/Chicago**
* Mountain .......... **America/Denver**
* Mountain no DST ... **America/Phoenix**
* Pacific ........... **America/Los\_Angeles**
* Alaska ............ **America/Anchorage**
* Hawaii ............ **America/Adak**
* Hawaii no DST ..... **Pacific/Honolulu**
If your timezone is outside of the United States you can find a more comprehensive list here at
* Public Directory: If you would like to change the path of your website, this can be done here.
* Site URL: If you have another domain you would like to set your website to, you can set it here.
* Secure Site URL: This is your SSL URL.
* Session Domain: When your visitors come to your website, all of their data will be stored a this URL.
Filling out these SMTP settings will help you make your email transfers even more Secure.
* SMTP From: This stores where you will safely send email from.
* SMTP From Name: This is the name you will send mail from.
* SMTP Host: This is the IP Address your mail will be sent to.
* SMTP SMTP Auth: Check here to have your mail SMTP Validated
* SMTP Username: Set a username for your email.
* SMTP Password: Set a password for your email.
* Site Email: Set the address your site will receive emails
* Version: Coming Soon!
*
* Recaptcha is authentication measure taken to prevent bots from spamming your website, a picture is presented to the visitor and instructions must be followed to prove that you are a human being. You can set this up through google here
* Recaptcha Public: This is where you will place the public key you get from Google Recaptcha.
* Recaptcha Private: This is where you will place the private key you get from Google Recaptcha.
* SA Session Time: Here you can set the amount of time Site Administrator will keep you logged in when left Idle. This is a security measure taken to prevent misuse of your account. The session times are stored in minutes.
* Sa Device Verify: This Settings verifies that a device connecting to Site Administrator is safe to use.
*
* Twilio is a cloud communications company based in San Francisco, California. Twilio allows software developers to programmatically make and receive phone calls and send and receive text messages using its web service APIs.
* Twilio Sid:The Message SID is the unique ID for any message successfully created by Twilio’s API. You can find more information here at
* Twilio Token: This is your unique identifier, you can find more information about this here at
* Twilio Phone Number: This is the phone number associated with your twilio account.
* Site Admin Image: This is the image you will find in the upper left hand corner of site administrator, you can set it to whatever you like.
* Site Admin Login Image: This is the image you will find when logging into site administrator, you can set it to whatever you like.
* Allow Cli Composer: This is a switch that forces composer to use either the command line and execute on the command line or to be included and run as php. This is an advance feature that the end user should not touch unless told otherwise.
The Theme section lets you set information to be dynamically inserted into your website, it's best to fill out **all** of these forms. If your theme has a place for this information it will check on this page to see that it exist and insert it into your page. More information on the themes setting is below.
## Overview
The themes module lets you use one of our custom themes or even install your own, to give your website a more unique style.
### Getting started
Like all new modules you can find themes in the SA store, simply click install and you're ready to hit the ground running.
To set a theme open the settings tab on the left in Site Administrator as seen here and click the general settings tab.
Now that you're in the general settings, your page should look similar to the one shown above. Click the "theme" tab.
On the themes page you will find a drop down menu in the top left just under the Theme category. This will show you a list of all the themes available to you. Select whichever theme you would like to try.
You can also fill in all of the forms in this section to add content dynamically to your website.
With your new theme selected, all that's left to do is click the "save" button at the bottom of the page. Open or refresh your websites page and you're all done!
## Setting up a new theme
Now for something a bit more advanced, for some people creating your own theme may be the way to go. If you have the expertise to create your own, Site Administrator lets you do this as well.
## How to set up a new theme
1. Log in to Filezilla(or your ftp client) using the ftp information for the site(ftp information coming soon).
2. A list of files should appear, select siteadmin.
3. Select the themes folder.
4. In this directory, right click and select ‘create directory’. A prompt will pop up to create a name for the folder. Typically, using the site’s name for the theme is the easiest way to go.
5. After creating the folder, select the folder. In the folder you just created, add two more directories named assets and views.
6. In the assets folder you can place the css, js, and image files needed for the template.
7. Select the views folder. In this folder you are going to create another directory and title it vtemplates.
8. Enter the folder you just made. Right click within the folder and select create new file. This file you are going to label as master.php.
9. Open the file you created in your text editor. In this file you need to place the following: header,{views},footer
10. Save the document and exit it.
11. Return to the views folder using the ‘..’ or select the folder from the lists above the file box.
12. Next we are going to create two new files. One will be named header.php and the other will be named footer.php.
13. The header file will contain the header portion of the website, including the navigation. The footer will contain everything needed for the footer. These two sections will not be able to be edited through the Site Admin Page Editor. If you need to make changes to any of the code, you will need to access these files in order to do so.
14. After the previous steps have been completed, log into the site admin section of the website.
15. Click Settings located in the menu on the left side of the page. A drop down box will appear, select General Settings.
16. Navigate to the Theme Tab. Under that tab, the section box will be labeled Theme as well. Select the theme you just created from the drop down and save the changes.
17. To begin working on your homepage layout, create a layout for the page.
After creating a layout, create a page titled Home. Under the Page Details section, the page type will be Link to a URL. The File Name/URL will be "/" (forward slash) to place this page as the Home Page of the website. Save your changes.
Examples The following libraries and plugins have been used to power different parts of Ace admin template.\
You can find documentation and examples for each one on their respective pages or you may want to check out Ace HTML files for examples.
* jQuery 2.0.3
* jQuery UI 1.10.3 (Custom Build)
* Twitter Bootstrap 3.0.0
* FontAwesome 3.2.1
* LESS 1.4.1
* Mustache
* Twitter Hogan.js
* Mustache.js
* Mustache for PHP
* Google Fonts "Open Sans"
*
* jQuery Flot Charts 0.8.1
* jQuery Sparklines 2.1.2
* Easy Pie Chart 1.2.5
* jQuery Knob 1.2.0
*
* Mindmup Wysiwyg Editor
* Toopay Markdown Editor 1.1.4
* jQuery Validate 1.11.1
* FuelUX 2.3.0 (Spinner, Wizard & Treeview)
* Dropzone.js 3.0
*
* FullCalendar 1.6.4
* jQuery ColorBox 1.4.27
* jQuery dataTables 1.9.4
* jQuery jqGrid 4.5.2
*
* X-editable 1.4.6
* Select2 3.4.2
* jQuery Chosen 1.0.0
* jQuery Masked Input 1.3.1
* jQuery Input Limiter 1.3.1
* jQuery AutoSize 1.17.7
* Bootstrap Tags 2.2.5
* Nestable Lists
*
* Bootstrap Colorpicker
* Bootstrap Datepicker
* Bootstrap Timepicker v0.2.3
* Bootstrap DateRange Picker 1.2
*
* Bootbox.js 4
* jQuery Gritter 1.2
* jQuery slimScroll 1.2.0
* Spin.js 1.3.0
*
* jQuery Mobile 1.3.2 (Custom Build)
* jQuery UI Touch Punch 0.2.2
* Google Code Prettify
* ExplorerCanvas
