SOPHIO

Site Design Documentation

This page contains information on how a SOPHIO store design is constructed

Overview

A design package for a Sophio © store is a collection of html files that are coded using bootstrap and jquery. We support multiple versions within the system so be sure you have them set properly on the design tab of your store settings. The overall design of your store will be styled using Bootstrap. Older implementations use Jquery UI. Be sure to check the configuration of your store before you begin.

Like most ecommerce and or content management systems, there is a page in the system where the user can control a collection of settings. These settings may control how the system operates or may simply store a value such as 'store name' or 'store phone number' which can be displayed inside any page of your site. If you are wondering where certain values or coming from look inside the source code of your design templates for %= (more about this in a second).

All Sophio pages contain special ASP like tags for generating dynamic content. Depending on the version of our platform that you are using you will see that most pages end with the extension .wws. This is known as a scriptmap and each time the web server renders a page that ends with .wws it will be rendered by the Sophio CMS. If you create a page named test.wws and store it in your templates folder and simply put 'hello world' inside of it, it will render an html page inside of your stores design currently loaded design. The 'currently loaded design' is a store setting that you change on the design tab.

Tip: When you first access your site via FTP or the built in File Manager look for the page /templates/index.wws. This is your stores home page. It is what we call a 'free page' in that you can use any code that you want in this page. The sky is the limit! You do not have to respect the Sophio content management system if you do not want to (in this page). Another words, if you want your home page to use something other than jquery or bootstrap or some specific version, feel free. All other pages that end with .wws will be using your Sophio template pages and the system will inject js and css into your pages. This is done on purpose to make the sure that the system styling is consistent. There are two types of ASP like tags that you will use in the creation of your design and content pages.


1 - <%= variable|function() %> will output the content of the variable or the result of the function where the tag is placed
2 - <% function() %> will execute a function and no output will result

For example, if you want to print your store name inside of a content page you would issue thi
A popular function is using an 'if' statement. Check it out:

The most common function you might encounter have the following syntax:

If .... Else....EndIf

<% if <condition> %>

execute this line if condition is true

<% else %>

execute this line if condition is false

<% endif %>

 

Do Case .... Case....Otherwise...EndCase 

<% do case %>

<% case <condition1> %>

execute this line if condition1 is true

<% case <condition2> %>

execute this line if condition2 is true

<% otherwise %>

execute this line if non of the coditions above were true

<% endcase %>

 

For ..... EndFor

<% for counter_startvalue <= counter_endvalue %>

execute this line

<% endfor %>

 

For Each ..... EndFor

<% for each object in collection %>

execute this line

<% endfor %>

 

1. The Header File - header.wc

A. DOCTYPE and HEAD tags

We are going to create HTML5 compliant pages. 
<!DOCTYPE html>

<html class="no-js <%=get_HTMLTagClass()%>">

	<head>

		<Title><%= get_MetaTitle()%></Title>

		<meta name="description" content="<%= get_MetaDescription()%>" />

		<meta name="keywords" content="<%= get_MetaKeywords()%>" />

		<meta http-equiv="Content-Type" content="text/html; charset=<%= get_MetaCharset()%>" />

		<meta http-equiv="Content-Language" content="<%= get_MetaLanguage()%>" />

		<meta name="robots" content="<%= get_MetaRobots() %>" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<script src="/sophio-shared-assets/js/modernizr.min.js"></script>

		<%= get_FBOpenGraphMetaTags() %>

		<%= get_FavIcon() %>

		<%= get_SystemCSS() %>

	</head>
Functions used:
  • get_HTMLTagClass() - for internal use and required to be implemented
  • get_MetaTitle() - dynamic title getter
  • get_MetaDescription() - dynamic meta description getter
  • get_MetaKeywords() - dynamic meta keywords getter
  • get_MetaCharset() - dynamic meta character set getter
  • get_MetaLanguage() - dynamic meta language getter
  • get_MetaRobots() - dynamic meta robots getter
  • get_FBOpenGraphMetaTags() - face book Open Graph tags, the system will generate them and depending on the store settings will be outputed or not
  • get_FavIcon() - if you are creating a general template, use this so that clients could upload their own fav icons. If you are creating a specific design then you can ignore this function and just add the html tags for the client supplied fav icon.
  • get_SystemCSS() - for internal use and required to be implemented. Among other system required css files it will automatically add the default bootstrap and bootstrap-responsive style sheets!
  • get_BODYTagClass() - for internal use and required to be implemented
  • get_StoreUrl() - This will render the configured store url. Never hard code url's so that your client can easily change domains from the systems store settings if necessary.
  • get_StoreSecureUrl() - This will render the configured SECURE store url. If you are hosting in the Sophio data center your get_StoreSecureUrl will render like https://YOURNAME.sophio.com/. Never hard code an https url unless you OWN the SSL certificate attached to your store.
Other components:
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - needed for responsive layouts
  • <script src="/sophio-shared-assets/js/modernizr.min.js"></script> - use this to provide backward compability for non CSS3, HTML5 capable browsers

B. AREAS

<body class="<%=get_BODYTagClass()%>">
<header id="header-area"> 


  <!-- Top page-->
  <div id="top-page-region" class="clearfix"><%= get_dynamic_widgets('top-page') %> </div>
  
  <!-- Branding-->
  <section id="branding-region" class="clearfix"><%= get_dynamic_widgets('branding') %></section>
  
  <!--  Main Navigation -->
  <nav id="main-menu-region" class="clearfix">  <%= get_dynamic_widgets('main-navigation') %></nav>


</header>

It is recommended that you implement the top-page, branding, and main-navigation regions in this file. You can use any valid html tags for a semantic representation of these areas. You are required to include a call to the <%= get_dynamic_widgets('area') %> system function. This will add future compatibility with Sophio's widget configuration tool yet to be released. This page can be included in any other pages by using this system function <%= get_header() %>

2. The Main Content Page - default.wc

Depending on the layout you choose to implement, default.wc can be full page, one column to the right or left, two columns to the right or left or three columns.
Make use of bootstrap's grid layout to implement the columns. Do not code the content of the columns in this page, instead when needed use sidebar_1.wc and sidebar_2.wc for the content for your columns.
When you have a single column either to the right or to the left, put your content in sidebar_1.wc and you can include this file by using the <%= get_sidebar_1() %> system function.
Using this technique will make it very easy to, switch or provide, left or right colum layout as the column content won't change and you don't need to recode and maintain it twice.
Change only the column position in your main content page and you are done.
For two columns scenario, use sidebar_2.wc for storing content and you can include this file by using the <%= get_sidebar_2() %> system function.

Below there is a sample of a three column layout:

<%= get_header() %><!-- get default header: header.wc-->

<!-- main content -->

<section id="main-content-area" class="clearfix" >

	<div class="container"> 

	<!-- top content -->

		<div id="top-content-region" class="clearfix">

			<%= get_dynamic_widgets('top-content') %>

		</div>

		<section id="main-content-wrap" class="clearfix">

			<div class="row-fluid">

				<!-- left sidebar 1 -->

				<div class="span2">

					<aside id="left-column-1">

						<div id="sidebar-1-region" class="clearfix">

							<%= get_sidebar_1() %>

							<%= get_dynamic_widgets('sidebar-1') %>

						</div>

					</aside>

	   			</div>

	   			<!-- main content -->

	   			<div class="span8">

					<section id="main-column">

						<!-- above dynamic content -->

						<div id="above-content-region" class="clearfix">

           				<%= get_dynamic_widgets('above-content') %>

    					</div>

						<!-- dynamic content -->

						<div id="dynamic-content-region" class="clearfix">

				 			<%=pclist%>

						</div>

						<!-- below dynamic content -->

						<div id="below-content-region" class="clearfix">

							<%= get_dynamic_widgets('above-content') %> 

						</div>

					</section>

	   			</div>

	   			<!-- right sidebar 2 -->

	   			<div  class="span2">

 					<aside id="right-column-1">

		  				<div id="sidebar-2-region">

							<%= get_sidebar_2() %>

							<%= get_dynamic_widgets('sidebar-2') %>

		  				</div>

  					</aside>

	   			</div>

			</div>

		</section>

  	 	<!-- bottom content -->

  	 	<div id="bottom-content-region" class="clearfix">

			<%= get_dynamic_widgets('bottom-content') %>

	 	</div>

	</div>

</section>

<!-- get default footer: footer.wc --> 

<%= get_footer() %>

Look at this page not as a content page but as a layout descriptor. Make it as modular as possible for maxium flexibility.
The framework provides you with inlcude functions that are similar to PHP, ASP or SSI. To include any page from the template directory you would use
<%= get_page('mypage.wws')%> system function.

As a guideline, use the ".wc" extension to pages that describe layout and template and use ".wws" for content.

When including a page, the Sophio system will look in three places for its location in the following order:

  1. The templates subdirectory of the design package you create (app/design/<design-name>/templates/) (read-write, this is where your package is installed)
  2. The templates subdirectory of the application (app/templates/) (read-only, write if the client gives you access)
  3. The system template subdirectory ( read-only)

It is recommended that you implement the top-content, above-content, and below-content regions in this file.
You can use any valid html tags for a semantic representation of these areas.
You are required to include a call to the <%= get_dynamic_widgets('area') %> system function. This will add future compatibility with Sophio's widget configuration tool yet to be released. At the end of the page we use the <%= get_footer() %> to include the footer.wc template page.

Below are variations of page described above:

Two colum layout with a side column on the LEFT:

<%= get_header() %><!-- get default header: header.wc-->

<!-- main content -->

<section id="main-content-area" class="clearfix" >

	<div class="container"> 

	<!-- top content -->

		<div id="top-content-region" class="clearfix">

			<%= get_dynamic_widgets('top-content') %>

		</div>

		<section id="main-content-wrap" class="clearfix">

			<div class="row-fluid">

				<!-- left sidebar 1 -->

				<div class="span3">

					<aside id="left-column-1">

						<div id="sidebar-1-region" class="clearfix">

							<%= get_sidebar_1() %>

							<%= get_dynamic_widgets('sidebar-1') %>

						</div>

					</aside>

	   			</div>

	   			<!-- main content -->

	   			<div class="span9">

					<section id="main-column">

						<!-- above dynamic content -->

						<div id="above-content-region" class="clearfix">

           				<%= get_dynamic_widgets('above-content') %>

    					</div>

						<!-- dynamic content -->

						<div id="dynamic-content-region" class="clearfix">

				 			<%=pclist%>

						</div>

						<!-- below dynamic content -->

						<div id="below-content-region" class="clearfix">

							<%= get_dynamic_widgets('above-content') %> 

						</div>

					</section>

	   			</div>	   			

			</div>

		</section>

  	 	<!-- bottom content -->

  	 	<div id="bottom-content-region" class="clearfix">

			<%= get_dynamic_widgets('bottom-content') %>

	 	</div>

	</div>

</section>

<!-- get default footer: footer.wc --> 

<%= get_footer() %>

Two colum layout with a side column on the RIGHT:

<%= get_header() %><!-- get default header: header.wc-->

<!-- main content -->

<section id="main-content-area" class="clearfix" >

	<div class="container"> 

	<!-- top content -->

		<div id="top-content-region" class="clearfix">

			<%= get_dynamic_widgets('top-content') %>

		</div>

		<section id="main-content-wrap" class="clearfix">

			<div class="row-fluid">

	   			<!-- main content -->

	   			<div class="span9">

					<section id="main-column">

						<!-- above dynamic content -->

						<div id="above-content-region" class="clearfix">

           				<%= get_dynamic_widgets('above-content') %>

    					</div>

						<!-- dynamic content -->

						<div id="dynamic-content-region" class="clearfix">

				 			<%=pclist%>

						</div>

						<!-- below dynamic content -->

						<div id="below-content-region" class="clearfix">

							<%= get_dynamic_widgets('above-content') %> 

						</div>

					</section>

	   			</div>

				<!-- right sidebar 2 -->

	   			<div  class="span3">

 					<aside id="right-column-1">

		  				<div id="sidebar-2-region">

							<%= get_sidebar_1() %>

							<%= get_dynamic_widgets('sidebar-1') %>

		  				</div>

  					</aside>

	   			</div></div>

		</section>

  	 	<!-- bottom content -->

  	 	<div id="bottom-content-region" class="clearfix">

			<%= get_dynamic_widgets('bottom-content') %>

	 	</div>

	</div>

IMPORTANT! Please note that in the above example we are still loading sidebar_1 in the sidebar_2_region position! Sidebar_2 is only used when we have a three column display or we have to display two sidebars. In any other case when we show a single sidebar, sidebar_1 is used regardless if the sidebar is positioned to the left or right of the main content.