This article describes the basics of our how the SOPHIO CMS works. It is intended for web designers, web marketers and those who know at least a little about HTML code and web development. The Sophio CMS was written with Visual Studio tools by Microsoft. This means that editors such as FrontPage or Visual Studio would work wonderfully well. If you are not a Microsoft guy, you can simply use any text editor to edit the pages that make up your store. All pages generated by the Sophio CMS are a collection of HTML, CSS, Javscript, and most importantly, use the jquery theming engine.
Checkout the page storesetup.wws before you do anything else!
If you visit your store setup (storesetup.wws) page you will see a 'design' tab. Simply add storesetup.wws to your site's URL; for example, http://www.site.com/storesetup.wws. To access this page you will need administrator-level access. Once there, click the 'design' tab. There are many options here that you must consider while designing your pages. The first decision to make is whether or not you want to use a system layout or a custom layout. This page is intended for those who want to create their own layout by modifying files in the file manager or via FTP. We suggest before trying to create your own layout, you choose one of the system layouts and color themes found on the storesetup.wws page.
Let's dive in.
When you visit a Sophio webstore, the web server looks for a file called 'start.wws' in the root directory of the site. This file can be empty, but it needs to exist. This file tells the web server (Microsoft IIS 7) that the site is a Sophio-powered store. Start.wws triggers the Sophio CMS to look for the default document used at the website, a.k.a. 'the home page'. The Sophio CMS uses two new file extensions that you likely have not seen before. These are .epc and .wws. These are referred to as 'scriptmaps' by the web server. The two extensions point requests to either catalog requests (.epc) or store requests (.wws). Each page you see at your site such as 'index.wws' will be an HTML page simply saved with the .wws extension and stored in your templates folder.
The reason we created a different extension for our HTML files was so that users who want to mix other languages in and around their site will be able to tell those files from Sophio’s. All of these files are HTML files, but the scriptmap extensions tell the Sophio CMS that there may or may not be scripts inside of them that need to be interpreted by the CMS engine. You should be able to update your HTML editor’s configuration so that it can easily edit a .wws file. Some of our files may have the file extension .wc. This is just a legacy version of the .wws. Both of these extensions should be setup in your HTML editor.
You will discover several folders in your store’s directory structure. The most important folder is 'templates'. The templates folder will store content and layout files which make up your site’s design/layout. If you want to create your own folders at the same level as the templates folder, you can do so. You could also create folders below the templates folder. In a moment we'll show you some examples of how to reference these files.
The home page of your site is named index.wws. It is stored in the templates folder. This file is an HTML file and can be edited in any HTML editor or text editor (such as Notepad) as mentioned above. In this file you can put any valid HTML, js, jquery, and CSS code that you would on any other website or web server. As you learn more about the advanced capabilities of our CMS, you will see that you can create entire applications or reference them within any page. Once you click a link such as 'catalog' or 'shopping cart' or 'privacy', you will come to what we refer to as the 'second level'. The second level uses the page templates/default.wc. This 'default.wc' file is just another HTML file like index.wws; however, it is used on every single page throughout the user’s visit, provided the page is http (unsecure) and not https.
Index.wws -vs.- default.wc.
The index.wws page is the home page. Anytime you or a visitor visits your domain name, the server looks for start.wws, then looks for index.wws. If it finds index.wws, it renders it. If it does NOT find index.wws, it looks for default.wc, and renders that. The idea here is simply that your home page can have a different navigation or look and feel than the rest of your pages. You will often discover that a home page might have an image-based slideshow, or a group of links for landing pages, or simply items that are changing frequently like a 'new items widget', etc. The default.wc might be an exact replica of index.wws; however, one very important tag will be found in it.
How is this working?
The Sophio CMS generates HTML, CSS, and Javascript 'from within'. When a page is generated internally it is saved to a special variable called 'pclist'. We probably should have named this variable 'content' but instead we named it pclist. The simple requirement is that it must be in the default.wc page and it must be defined specifically like this: <%=pclist%> . If you remove this tag, your site will still function, but you will not see any of the content that the system generates. You will end up with a page with a big hole in the center. When a link like shopping cart is clicked, the system will generate the HTML and save it to pclist. Then, when the page is displayed, pclist becomes the HTML code from the shoppingcart routine. More on this shortly.
Your site could have a single page called 'default.wc' with a single dynamic HTML tag in it, and it would work just fine. In fact, some clients render their store in an iFrame and this is all they have— a single empty page called default.wc with the one tag in it. This is not recommended, but it is certainly possible.
Where are all the HTML files?
Let's say for a second that you did not read this article and you created an index.html page and stored it in the root folder (above templates). Our web servers would render that page just fine. The problem with creating HTML pages in the Sophio system is that an HTML page is a static page that cannot be used to track a visitor from page-to-page. The cookie system used in Sophio is more than just your standard HTML/Javascript cookie-tracking system. As such, you must rename all .html pages to .wws so that users can be tracked. If you fail to do this and a user has his cookies turned off, or has Javascript turned off, the system will not function properly. Shopping carts would be lost, the catalog would not work, and your visitor would say 'bye bye'.
So, the HTML files that make up your site seem to be missing? Where the heck are they? The system uses a shared content folder on your store’s web server. This shared content folder houses thousands of templates. These templates are HTML files named the same as the links that use them (for the most part). This means that every link you see on a Sophio store can be customized. How cool is that? To retrieve one of these templates, you visit the template editor. When you open the template editor, you will see a 'tree' view of the many templates. You will not find them all, but you will find the most popular ones. When you click on one, the system copies the file from the shared template folder on the server to your templates folder. This in turn allows you to make changes. We call this a 'sub-classed template'. The system will always use your sub-classed template if it finds it in your templates folder. If you goof it up, or want to start over, rename the template and the system will refer to using the shared one.
So my store is really just one file?
No, not really. Your site’s layout may be just one file. Normally you will discover that the default.wc is more like a container that references many other templates that make up your site’s layout. The Sophio system layouts will often be built as follows: Let's say your site is a two-column layout. You will see a header, footer, and right column file in your templates folder. We would name the files section-header.wc, section-footer.wc, section-right.wc, and we would render them like this: <%= Process.oView.GetPage("section-header.wc") %>
When the method 'process.oview.getpage' is called, it is doing the equivalent of a server side included in basic HTML. The page is assumed to be in your templates folder and is just another HTML file with references to any possible HTML element you want to use. You can also put any Sophio CMS tag in there you like. Some users will put catalog widgets, vehicle widgets, store locator widgets, or third party chat scripts.
The possibilities are endless.
