Surfalot CMS
Operation Guide
- Create and Edit Page Content
You can dynamically create site pages and link them into your menu easily and automatically.
You can create only one Page entry in Surfalot CMS under any given Page or Group name.
You may add additional Page Content entries to that Page/Group name that will be added together
to form the full content of that page. For example, you can create one Page named
"my_page" with a width of 3 (Bootstrap width). Then you can create three more Page Content
entries named "my_page", each with the width of 3. Or you may create an additional Page Content
entry named "my_page" with the width of 3 and one more with the width of 6.
Remember a full Bootstrap page width is a total of 12 "widths". You may continue and create more for additional rows of content.
- Click on New Page on the sidebar or under the Item List
- Page Name entry:
Existing Page
You may choose an existing page from the drop down list. When you choose an existing page,
you may need to add a small code snippet to the PHP page to enable inserting the page Body content.
Some pages like Conditions, Shipping, and Privacy have the constant TEXT_INFORMATION
already embedded. In those cases, you don't need to change the existing page. Other pages
may require having the following snippet installed. You may choose either of these two options
to embed the Body of your content into the desired page. Existing pages can be automatically inserted
into the SurfCMS Navigation Bar content module and SurfCMS App Pages boxes module.
Page Constant method
Template getContent Code method
Replace page_name in the snippet with the actual page name you created
(without the .php extention).
Custom/New Page
You may choose to create a page that doesn't exist on the site. In this case simply enter a unique name into the
Page Name entry box. The page will be accessible from your domain at: mydomain.com/surfcms.php?pg=3.
The 3 in that address will be the actual ID of the page when it is saved. After saving your page, Surfalot CMS will display the page address in the info box to the right of the page list. Custom pages can be automatically inserted
into the SurfCMS Navigation Bar content module and SurfCMS App Pages boxes module by selecting the appropriate radio buttons.
Beside the existing page names within the osCommerce shop, there are some reserved names that should not be used for Page Name. Those are:
navigation, header, footer, footer_suffix.
Multiple Content Groups on a Single Page
It is certainly possible to create multiple Content Groups on a single page. Lets say you
want to have a block above and below a product's information on to Product Info page. You would create a Page
with the Page Name as product_info. You can enter the content details for the first
block here. You may also create additional Page Content with the Page Name product_info
and they will all be grouped together in this area. Place the following code where you want it to appear
on the page product_info.php
You can now create another Content Group for below the product's information. Select New Page Content
button and use the Page Name of product_info_second_area. Enter the content you wish in this area,
and save it. You can create multiple blocks using this new Content Group here also. Now place the
following code in product_info.php
where you wish the content to appear.
To make multiple content areas to work on a single page, the Page Name for the second or third areas need to begin with the original
Page Name you started with. Surfalot CMS will collect all the Content Groups that start with the original Page Name
and be ready to display them when that page loads.
- Page Query String entry:
If the menu link to your page requires a Query String, enter it here. It is not necessary to enter the "?" at the beginning.
- Sort Order entry:
This is the order in which the content will be inserted into the SurfCMS Navigation Bar content module and SurfCMS App Pages boxes module. This is also the sort order used if you create multiple content blocks for a single page or Content Group.
- Status, In Navbar, In Side Box selectors:
Status is a way to enable or disable the content item.
In Navbar specifies whether this content will be inserted into the SurfCMS Navigation Bar content module and where.
In Side Box specifies whether this content will be inserted into the SurfCMS App Pages boxes module.
- Navbar Parent entry:
In the SurfCMS Navigation Bar Content Module, you may specify whether this content page is displayed in the root of the menu or a
submenu item. Pages cannot be a Navbar submenu parent themselves. Submenu parents are clickable/tapable to expose
the submenu only.
- Nav Menu Icon entry:
Font Awesome icons are available for
use in osCommerce Community Edition. You may enter a code here for be shown on the SurfCMS Navigation Bar content module.
- Nav Menu Text entry:
The text to be displayed on the SurfCMS Navigation Bar content module and SurfCMS App Pages boxes module. This can be different from the page title for SEO value.
- Page Title entry:
Enter the page title of the content. This is displayed on the page as the title.
- Content Width selector:
This is the width do be used in a Bootstrap container. If zero is specified, no Bootstrap container will be used. (12 = full width, 6 = half width, 4 = third width, 3 = quarter width).
- Body entry:
Enter all the content you desire to be displayed. When using the WYSIWYG editor, there are some osCommerce specific presets available. For more control, you may wish to insert a preset to start, and save your content, then return to edit the HTML without the WYSIWYG editor afterward.
- Breadcrumb Title, Meta Title, Meta Description, Meta Keywords entry:
These entries will override the default, which is using the page title. For Meta Title, Meta Description, and Meta Keywords to work, you must
enable this Header Tags module: Modules > Header Tags > Install Module > SEO - Pages
This will not override these following modules that dynamically update the META content based on your shop's products and categories in the Edge Edition: Category SEO, Manufacturer SEO, and Product SEO.
[ top ]
- Manage Surfalot CMS Navigation Bar
You must install the SurfCMS Navigation Bar content module from
Admin > Modules > Content > Install Module > SurfCMS Navigation Bar to
enable the navbar menu management. You can add current pages, create new pages,
add standard osCommerce Navbar modules, and other links all from the admin.
The SurfCMS Navigation Bar content module will display standard osCommerce Navbar modules along with other content links.
The standard osCommerce Navbar modules do not need to be installed through the Admin > Modules utility themselves, generally.
If you find a Navbar module that doesn't behave correctly or needs its settings, install the Navbar module in
Modules > Navbar Modules > Install Module, then set
Enable to False. That will
cause the module not to display on its own, but will display in the SurfCMS Navigation Bar content module.
You may use Surfalot CMS to manage the entire Navbar menu if you wish. Surfalot CMS was designed to allow
the user flexibility to use both the standard osCommerce Navbar Module Installer and Surfalot CMS at the same time. Items from each should sort together and play nicely. If you wish to use Surfalot CMS to manage the entire Navbar menu, you should remove modules from the standard
Navbar Module Installer now. In Modules > Navbar Modules, click on a module and then click the
Remove Module button on the right. Leave the Hamburger Button installed and enabled here. It is
required to display a menu on smaller devices.
You will find a set of radio buttons on Pages, Menu Items, Navbar Submenu, and Navbar Block content entry forms called In Navbar. The In Navbar radio selectors are Home, Left, Right, Disabled. You will select the section each content item is placed if you decide to show the Content on this SurfCMS Navigation Bar. On the Block content entry page
those radio buttons are read-only. They are selected automatically depending on the Navbar block area you choose.
Pages
The pages you create, or existing pages you're editing via Surfalot CMS may be added to the SurfCMS Navigation Bar module by
simply activating the In Navbar setting within the page editor. The Sort Order setting tells Surfalot CMS where to place
the menu item in the list. The Page Content entry form is described above.
Menu Items
Menu Items option is available to insert any URL into the Navbar or Sidebar menus. No actions or
translations are performed on this item. It is linked and displayed as entered.
- Click the New Menu Item button on the Surfalot CMS List All page to start a new Menu Item.
- Navbar Module selector:
You may select an existing Navbar Module to be place in this menu position. Modules cannot be placed on a submenu. If a Navbar Module item is chosen, the Link URL will be locked out since you can't do both.
- Link URL entry:
You may enter a local or off-site URL here. The URL will be placed on the Navbar or Sidebar box as entered.
If this item is entered, the Navbar Module will be locked out. Can't do both.
- Sort Order entry:
This is the order in which the content will be inserted into the Navbar or Sidebar box menu list.
- Status, In Navbar, In Side Box selectors:
Status is a way to enable or disable the content item.
In Navbar specifies the section where this content will be shown in the Navbar or whether it is
disabled.
In Side Box specifies whether this content will be inserted into the SurfCMS Sidebar Box. Navbar Content Modules cannot be placed on the Sidebar.
- Navbar Parent entry:
In the SurfCMS Navigation Bar module, you may specify whether this content page is display in the root of the menu or a
submenu item. Pages cannot be a Navbar Submenu parent themselves. Submenu parents are clickable/tapable to expose
the submenu only.
- Nav Menu Icon entry:
Font Awesome icons are available for
use in osCommerce Community Edition shops. You may enter a code here for be shown on the SurfCMS Navigation Bar module.
- Nav Menu Text entry:
The text to be displayed on the SurfCMS Navigation Bar module. This can be different from the page title for SEO value.
Navbar Submenu Items
Submenu items are triggers to open a submenu. They cannot be a submenu item themselves.
- Click the New Nav-submenu link or button to add.
- Sort Order entry:
This is the order in which the content will be inserted into the Nav list.
- Status and In Navbar selectors:
Status is a way to enable or disable the content item.
In Navbar specifies the section where this content will be shown in the Navbar. Submenu items
cannot be disabled within the In Navbar selectors. Submenu items also cannot be placed in the Home position.
- Nav Menu Icon entry:
Font Awesome icons are available
for use in osCommerce Community Edition shops. You may enter a code here for be shown on the SurfCMS Navigation Bar module.
- Nav Menu Text entry:
The text to be displayed on the SurfCMS Navigation Bar module. This can be different from the page title for SEO value.
[ top ]
- Add Text and Links to the Surfalot CMS Navigation Bar
Block items are content that will be inserted into the Navbar as written / coded on the content entry page. Block items can be
text, links, graphics, or really anything. Adding text and links to the Navbar Area without creating a module is easy.
- Click the New Navbar Block button from the Surfalot CMS Admin List All menu.
- Group Name entry:
Select Navbar: Left, Navbar: Right, or if you currently do not have a site logo or
title in the Navbar Home position, you may choose that also.
- Sort Order selector:
This is the order in which the content will be inserted into the SurfCMS Navigation Bar module and SurfCMS Sidebar Box. The item will be sorted into
Surfalot CMS items as well as any other modules installed using the osCommerce Module Administrator.
- Status and In Navbar selectors:
Status is a way to enable or disable the content item.
In Navbar specifies the section where this content will be shown in the Navbar. With
Block content, this is automatically selected based on the Group you choose above.
- Title: (admin only) entry:
Text to be displayed in the admin to identify this content to you.
- Body entry:
Enter all the content you desire to be displayed here. When using the WYSIWYG editor, there are some
osCommerce specific presets available in the osC Custom drop menu. For Navbar Area
content you will want to start with the Navbar Text Block or Navbar Link Block
items from that osC Custom menu to achieve the correct spacing.
** A special note regarding the WYSIWYG editor: It will auto-correct HTML while saving. The correct way to
build this osC Template Navbar Area content is to start and end the content with List Item HTML tags without
either the Ordered List <ol> or Unordered List <ul> tags. It will look like this:
The WYSIWYG editor will add the Ordered List <ol> or Unordered List <ul> tags
if you use it to create this content. To create this correctly, you may wish to avoid the WYSIWYG editor.
Also note: the content for this osC Template Navbar Area is white text on a dark background, so it may not show in
the WYSIWYG editor. You may wish to insert the block, save it, and then return to edit it
without the WYSIWYG editor to complete the content.
[ top ]
- Add Text Boxes to Left and Right Box Columns
Adding text, links and graphics to the Sidebar Area without creating a module is easy.
- Click the New Navbar Block button from the Surfalot CMS Admin List All menu.
- Group Name entry:
Select Box: Left Column, Box: Right Column.
- Sort Order entry:
This is the order in which the content will be inserted into the SurfCMS Navigation Bar module and SurfCMS Sidebar Box.
- Status selector:
Status is a way to enable or disable the content item.
- Title: (admin only) entry:
Text to be displayed in the admin to identify this content to you.
- Body entry:
Enter all the content you desire to be displayed here. When using the WYSIWYG editor, there is a
osCommerce specific presets available in the osC Custom drop menu. For Sidebar Area
content you may want to start with the Sidebar: Box with Header
item to match the default sidebar boxes (Bootstrap Panel).
[ top ]
- Surfalot CMS Modules and Shortcode Content
This module is available as a bonus reward for a donation of $5 or more toward the development of Surfalot CMS.
Surfalot CMS accepts content modules for the purpose of fulfilling shortcodes placed in the Surfalot CMS content body.
Currently included shortcode modules are; Date/Time, Buy Now Button, Generic Link Button, Insert Contact Form, Product Thumbnail, Product Special Thumbnail, YouTube Video, and Facebook Plugin.
We will use Facebook Page Plugin included in the App as an example. First, you will need to enable it in
the modules administration tool: Modules > Shortcode Modules > Install Module > Facebook Page Plugin
You will add a shortcode snippet in a Surfalot CMS content body. It looks like this: [sc_facebook_plugin]
When being displayed, Surfalot CMS will replace that shortcode snippet with a Facebook Page Plugin. Most of the options for the plugin
have been added to this module as parameters for demonstration value.
This is an example of a shortcode with some parameters:
[sc_facebook_plugin url="https://www.facebook.com/facebook" width="400" height="250"]
These are the conventions used in the parameters. It is important to keep this in mind since the code will have trouble
parsing the parameters if formatted incorrectly.
- The name of the shortcode must directly follow the opening bracket without spaces as such:
Correct: [sc_facebook_plugin]
WRONG: [ sc_facebook_plugin ]
- There must be no spaces between the parameter name and its value:
Correct: width="400"
WRONG: width = "400"
- The shortcode name and each parameter must be separated with at least one space:
Correct: [sc_facebook_plugin width="400" height="250"]
WRONG: [sc_facebook_plugin width="400"height="250"]
[ top ]
- Manage Surfalot CMS Sidebar Info Box
You must install the SurfCMS App Pages module from Modules > Boxes module administrator.
You may automatically place a page or link on the SurfCMS Sidebar Box using the In Side Box
setting within the page editor or the stoplight button on the SurfCMS List Items page.
Page Content and Menu Item links are available to be displayed in the Sidebar Info Box. Submenu's items are not
actually content links and will not display in the Info Box. The content items actually contained in the Navbar
Submenus can be displayed and are simply ordered as the item's sort
order would denote. Font Awesome icons are not displayed in the SurfCMS Sidebar Info Box.
[ top ]
Surfalot CMS © 2017 Todd Holforty . mtholforty [at] surfalot [dot] com