Surfalot CMS

Operation Guide

 

 

Operation

 

Guide

 

  1. 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.

    1. Click on New Page on the sidebar or under the Item List
    2. 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.
    3. 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.
    4. 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.
    5. 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.
    6. 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.
    7. 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.
    8. 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.
    9. Page Title entry:
      Enter the page title of the content. This is displayed on the page as the title.
    10. 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).
    11. 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.
    12. 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 ]

     

  2. 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.

    1. Click the New Menu Item button on the Surfalot CMS List All page to start a new Menu Item.
    2. 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.
    3. 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.
    4. Sort Order entry:
      This is the order in which the content will be inserted into the Navbar or Sidebar box menu list.
    5. 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.
    6. 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.
    7. 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.
    8. 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.

    1. Click the New Nav-submenu link or button to add.
    2. Sort Order entry:
      This is the order in which the content will be inserted into the Nav list.
    3. 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.
    4. 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.
    5. 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 ]

     

  3. 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.

    1. Click the New Navbar Block button from the Surfalot CMS Admin List All menu.
    2. 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.
    3. 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.
    4. 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.
    5. Title: (admin only) entry:
      Text to be displayed in the admin to identify this content to you.
    6. 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 ]

     

  4. Add Text Boxes to Left and Right Box Columns

    Adding text, links and graphics to the Sidebar Area without creating a module is easy.

    1. Click the New Navbar Block button from the Surfalot CMS Admin List All menu.
    2. Group Name entry:
      Select Box: Left Column, Box: Right Column.
    3. Sort Order entry:
      This is the order in which the content will be inserted into the SurfCMS Navigation Bar module and SurfCMS Sidebar Box.
    4. Status selector:
      Status is a way to enable or disable the content item.
    5. Title: (admin only) entry:
      Text to be displayed in the admin to identify this content to you.
    6. 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 ]

     

  5. 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.

    1. The name of the shortcode must directly follow the opening bracket without spaces as such:
        Correct: [sc_facebook_plugin]
        WRONG: [ sc_facebook_plugin ]
    2. There must be no spaces between the parameter name and its value:
        Correct: width="400"
        WRONG: width = "400"
    3. 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 ]

     

  6. 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