Surfalot CMS

Installation and Configuration

 

 

Installation Instructions

Please backup your files and database before installing this and any add-on. Great care has been taken to produce quality code, but I accept no responsibility for any damages, either business or private, as a result of using this code. This code is provided "as is" and you are solely responsible for support and maintenance of the code and your shop.

  1. You will find three "catalog" folders in the package. The catalog (new files) folder can be uploaded in its entirety. They are all new files there that will not conflict with your current shop files. Please take care to maintain the folder structure intact.
  2. Files Specifically for osCommerce Community Edition GOLD
    The folder catalog (useful edge modules) contains some modules from the edge build of osCommerce Community Edition. Copy them into place in your shop. Most of them are can be used with Surfalot CMS. More about those modules in the Configuration section below.
  3. The folder catalog (modified osCommerce files) contains some modified existing shop files.
    There are three options to proceed here:
    Compare: Use comparison software like Beyond Compare to merge changes into your current shop.
    Copy Over Unmodified Files: If you haven't modified them yet, you can simply copy them into place from this folder.
    Manually Modify Files: the following are the changes you will need to make to two files.

    Manually Modify Files

    As usual, the "catalog" part of each file path refers to the root of the shop, not an actual folder.

    1. In: catalog/includes/application_top.php add the following code to the very end, just before the final ?>



      Finished! Upload catalog/includes/application_top.php


    2. In: catalog/includes/template_top.php The following change will insert the necessary Template getContent for the Surfalot CMS Navigation module that is included. If you do not wish to use or install the integrated navigation module, this step can be skipped.

      In the file catalog/includes/template_top.php

      Find


      Add after

      Finished! Upload catalog/includes/template_top.php


    3. In: catalog/includes/classes/osc_template.php Find this code near the top:

      Find


      Immediately after, add the following

    4. Also in the file catalog/includes/classes/osc_template.php find near line 58:

      Find


      Replace with

    5. Also in the file catalog/includes/classes/osc_template.php find near line 66:

      Find


      Replace with (one line added)

    6. Also in the file catalog/includes/classes/osc_template.php find near line 97:

      Find


      Replace with (one line added)

    7. Also in the file catalog/includes/classes/osc_template.php find near line 110:

      Find


      Replace with

    8. Also in the file catalog/includes/classes/osc_template.php find near line 142:

      Find


      Replace with (one line added)

    9. Also in the file catalog/includes/classes/osc_template.php find near line 155:

      Find


      Replace with (one line added)

      Finished! Upload catalog/includes/classes/osc_template.php

 

 

[ top ]

 

Configuration Instructions

Surfalot CMS automatically installs the database component when it is accessed for the first time. You can do this by going to the new Administrative group in the Admin called Surfalot CMS. Click on List All. Alternatively, you can open your shop's home page.

 

Surfalot CMS Admin Configuration Options Once installed, you may wish to review the configuration options in the Configuration section of the Admin under Surfalot CMS. You should see a direct link to the Configuration in the upper right corner of the List All page called Configure.

 

Install Header Tags Modules One Header Tags module that is required to help Surfalot CMS function completely. Please Go to Admin > Modules > Header Tags > Install Module button To install the SEO - Pages Module. In that same Header Tags module administrator should be a module called Surfalot CMS CSS that was included with this package. It will fix some width issues with nesting 960 Grid System and DIV blocks. Install Surfalot CMS CSS.

 

SurfCMS Information Box Module The SurfCMS App Pages module is a Box module included with Surfalot CMS that you can fill with pages and links. If you wish to use it, install it in the Shop's Admin Modules Administrator here: Modules > Boxes > Install Module > SurfCMS App Pages

 

SurfCMS Navigation Bar Content Module The Navigation Bar is a Content Module you can use to display your shop's main navigation menu. To the Surfalot CMS Navbar you can add current pages, create new pages, other links, and osCommerce Community Edition Edge Navbar modules. This module was designed for osCommerce Community Edition and was included here in the osCommerce Online Merchant v2.3.4 Official release version of Surfalot CMS with installation instructions for your convenience. It is not entirely efficient to include Bootstrap with the osC Official release, but it works fine.

I have included the navigation bar modules from the Edge Community Edition with Surfalot CMS. Online Merchant v2.3.4 Official shop owners can use these within Surfalot CMS. Install the SurfCMS Navigation Bar in the Shop's Admin Modules Administrator here: Modules > Content > Install Module > SurfCMS Navigation Bar.

The following 2 Header Tags modules are required for the Navigation module to work. The Surfalot CMS Navbar required the overhead of Bootstrap and Font Awesome. Please be aware that it adds additional CSS and JS to your shop's load. Install them now:
Modules > Header Tags > Install Module > Bootstrap Head Link
Modules > Header Tags > Install Module > Font Awesome Head Link

You may use wish to install the Sample Menu for a head start. Go to the Surfalot CMS Admin menu and select Utilities/Guide. Then on the right, click the Insert a Sample Menu button, and confirm install. This menu is similar to the Navbar that is included with osCommerce Community Edition GOLD.

 

osCommerce Home Page Template Content Adding more Template Content areas to your shop is easy. In this example I will demonstrate adding Template Content to the home page and other Template content areas available in Community Edition Edge shops.

  1. Open catalog/index.php from your shop's root folder.
  2. Scroll down to near line 44 in Online Merchant v2.3.4 Official Shops. You will see this block of code:

    Find

    Change to this, One line was inserted

  3. Scroll down close to the bottom of the page near line 254. You will see this block of code:

    Find

    Replace it with

  4. Finished! Save and upload catalog/index.php

    You now can use the "index" and "index_nested" content groups in Surfalot CMS and the shop's Template to insert anything at the top of the content area of your home page ("index" group) and at the top of the content area of your Nested Categories ("index_nested" group). You can move or adjust the placement of these as needed for your design.

 

osCommerce Header Template Content The Online Merchant v2.3.4 Official shops originally have the store logo and some links to My Account and Checkout, etc. You can place this link for header content before, after, or in place of that content. Lots of options. This bit of instruction will place the content under the original logo and links.

  1. Open catalog/includes/header.php
  2. Find near line 33

    Find

    Place this after

  3. Finished! Save and upload catalog/includes/header.php

    You now can use the "header" content group in Surfalot CMS and the shop's Template to insert anything at the bottom of the header for every page. You can move or adjust the placement of these as needed for your design.

 

osCommerce Footer Template Content The Online Merchant v2.3.4 Official shops originally have FOOTER_TEXT_BODY text block in the footer. This instruction will demonstrate adding two content blocks. One will be above the FOOTER_TEXT_BODY text and one will be below the FOOTER_TEXT_BODY text block. This is similar to the osCommerce Community Edition versions.

  1. Open catalog/includes/footer.php
  2. Find near line 16

    Find

    Place this before

    Place this after

  3. Finished! Save and upload catalog/includes/footer.php

    You now can use the "footer" and "footer_suffix" content groups in Surfalot CMS and the shop's Template to insert anything in the footer for every page. You can move or adjust the placement of these as needed for your design.

See the Operation Guide for more help adding content using Surfalot CMS.

 

Surfalot CMS Shortcode Modules The last items you may want to install are the Surfalot CMS Shortcode modules. You may even wish to create one yourself. These modules allow you to insert dynamic content into text blocks with a WordPress-like shortcode. The nice thing about Surfalot CMS shortcodes is it was designed so the shortcode modules will be loaded only once per page load, no matter where or how many times this service is used throughout the shop. A shortcode looks like this: [sc_facebook_plugin]

There is more information on using shortcodes in the Operation Guide.

SurfCMS Modules are located in the includes/modules/shortcode_modules/ folder. They are enabled from the modules administration tool here: Modules > SurfCMS Modules

Modules consist of three files:
  includes/modules/shortcode_modules/surfcms_module.php
  includes/modules/shortcode_modules/templates/surfcms_module.php
  includes/languages/(language)/modules/shortcode_modules/surfcms_module.php

 

Use Shortcodes Throughout Your Shop Shortcodes can be used anywhere within osCommerce with a quick and easy setup at each location. For example, if you would like to place a shortcode in your Product Description, you can do the following update to product_info.php in the root of your shop.

Now you will be able to insert shortcodes into your Product Descriptions!

If you are using $surfcms->replaceContentShortcodes() to replace shortcodes in functions or class methods, you will also need this snippet placed within the top of the function:


 

 

[ top ]

 

Local TinyMCE WYSIWYG Editor Installation

If you desire a local installation of TinyMCE instead of a CDN retrieval, this is how. Surfalot CMS is setup to look for a local installation first. All you need to do is download the TinyMCE Community version and install it on your server. At the date of this publication, the download place is: https://www.tinymce.com/download/

Within the download package you will find several folders. Find the tinymce folder that contains the file tinymce.min.js. Copy that tinymce folder to the shop folder catalog/ext/. The full path to the tinymce.min.js file should be: catalog/ext/tinymce/tinymce.min.js.

** As usual, "catalog" refers to the root of your shop, not the first subfolder.

 

[ top ]

 

Local Bootstrap and Font Awesome Installation

Please Note: This is optional and not necessarily preferred for production shops. Mainly for those developing on local platforms. Do your own research and make your own judgement on CDN vs Local installation.

 

Local Bootstrap Install for osCommerce v2.3.4 Official Only Those of you with the osCommerce Community Editions can skip this. It is already locally installed on your shop.

If you desire a local installation of Bootstrap CSS, Bootstrap Javascript, and Font Awesome instead of a CDN retrieval, this is how. Surfalot CMS is setup to look for a local installation first. All you need to do is download the files and install it on your server. At the date of this publication, the download place is: https://getbootstrap.com/docs/3.3/

Create a new folder called bootstrap in your shop's catalog/ext/ folder.

Within the download package you will find several folders.

Find the css folder that contains the file bootstrap.min.css. Copy the css folder from the bootstrap download to your new shop folder: catalog/ext/bootstrap. The full path to the bootstrap.min.css file should be:
catalog/ext/bootstrap/css/bootstrap.min.css

Find the js folder that contains bootstrap.min.js. Copy the js folder from the bootstrap download to your new shop folder: catalog/ext/bootstrap. The full path to the bootstrap.min.js file should be:
catalog/ext/bootstrap/js/bootstrap.min.js

** As usual, "catalog" refers to the root of your shop, not the first subfolder.

 

Font Awesome Install for osCommerce v2.3.4 All Versions Now we'll download and install Font Awesome. At the date of this publication, the download place is: http://fontawesome.io/

Create a folder called font-awesome in your shop's catalog/ext/ folder.

Within the download package you will find several folders.

Find the css folder that contains the file font-awesome.min.css. Copy the css folder from the download package to your new shop folder: catalog/ext/font-awesome. The full path to the font-awesome.min.css file should be: catalog/ext/font-awesome/css/font-awesome.min.css.

Find the fonts folder that contains the file fontawesome-webfont.woff2. Copy the fonts folder from the download package to your new shop folder: catalog/ext/font-awesome. The full path to the fontawesome-webfont.woff2 file should be: catalog/ext/font-awesome/fonts/fontawesome-webfont.woff2.

** As usual, "catalog" refers to the root of your shop, not the first subfolder.

For osCommerce v2.3.4 Official shop folks:
When installed, the Header Tags module: Font Awesome Head Link included with Surfalot CMS will add the Font Awesome link tag in your shop's header.

For osCommerce v2.3.4 Community Edition shop folks:
In order to utilize the local installation of Font Awesome, you must make a change to your template_top.php file.

Find in catalog/includes/template_top.php


Replace with

Finished! Upload catalog/includes/template_top.php

 

[ top ]

 

 

Surfalot CMS © 2017 Todd Holforty . mtholforty [at] surfalot [dot] com