This is an old post, moved to keep my stuff in one blog.
If you don't want to set up your own carts, then give GEE Video Production a call and we'll get you a site. The reason for going with ZenCart in the first place what they call EZ pages and Define Pages. Its like having a Word Press (or if you're really new to content editors, like having a word processor such as Microsoft Word) editor for your entire store - sounds nice, right? It's even better than that! Way less bulky, fast results, and totally customizable without a million plugins.
I've been training someone in using ZenCart. I love the software, the customizability, and the speed at which I can accomplish a reasonable website with shopping card.
The issue is that I know HTML, CSS, and only had to pick up some PHP to accomplish a site. My very bright friend, however, had to pick it all up. This is his first website and his creativity drove some awesome modifications. It was totally worth having someone on board who didn't know any limits or just want to get things done quickly. I don't think he gets how important that is sometimes.
However, I think the rest of the world might be able to use Zen Cart way faster if there was a quick outline about what to look for on the web. So, here's my outline.
If you don't want to set up your own carts, then give GEE Video Production a call and we'll get you a site. The reason for going with ZenCart in the first place what they call EZ pages and Define Pages. Its like having a Word Press (or if you're really new to content editors, like having a word processor such as Microsoft Word) editor for your entire store - sounds nice, right? It's even better than that! Way less bulky, fast results, and totally customizable without a million plugins.
I've been training someone in using ZenCart. I love the software, the customizability, and the speed at which I can accomplish a reasonable website with shopping card.
The issue is that I know HTML, CSS, and only had to pick up some PHP to accomplish a site. My very bright friend, however, had to pick it all up. This is his first website and his creativity drove some awesome modifications. It was totally worth having someone on board who didn't know any limits or just want to get things done quickly. I don't think he gets how important that is sometimes.
However, I think the rest of the world might be able to use Zen Cart way faster if there was a quick outline about what to look for on the web. So, here's my outline.
HTML Very Basic
First, the basics. HTML. What is it and how to get it done.
To use the CSS Zen Cart offers you really should follow your best standards... ZenCart is HTML transitional, most likely in case you mess up, I found very few Zen Cart issues with going HTML 4 at least. What does that mean?
Well, I can't explain it all quickly, but here are the basics of an HTML page.
Tags and elements define things... The first tag/element you come across actually breaks the rules most of the rest of the tags, it doesn't end. The tag defines what kind of page it is. Most people just copy this and put it in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What does it mean in layman's terms? That I can use some old and some new tags and browsers won't try to die if the structure is a bit broken. What does mean in programming terms? Well, that's quite a read and shouldn't be attempted until I finish explaining a basic page. However, here's the link... for later:
http://www.w3.org/TR/xhtml1
Normal HTML tags have a beginning and an end. These include the outside tags. So, the minimum to make a webpage is to tell the browser we are using HTML.
Remember every tag that start has to end. To end html we can either:
To use the CSS Zen Cart offers you really should follow your best standards... ZenCart is HTML transitional, most likely in case you mess up, I found very few Zen Cart issues with going HTML 4 at least. What does that mean?
Well, I can't explain it all quickly, but here are the basics of an HTML page.
Tags and elements define things... The first tag/element you come across actually breaks the rules most of the rest of the tags, it doesn't end. The tag defines what kind of page it is. Most people just copy this and put it in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
What does it mean in layman's terms? That I can use some old and some new tags and browsers won't try to die if the structure is a bit broken. What does mean in programming terms? Well, that's quite a read and shouldn't be attempted until I finish explaining a basic page. However, here's the link... for later:
http://www.w3.org/TR/xhtml1
Normal HTML tags have a beginning and an end. These include the outside tags. So, the minimum to make a webpage is to tell the browser we are using HTML.
<html>The html tag (element) is the first time you run into properly formed element with attributes. The basics of attributes are that they occur after whitespace and after the main tag declaration (html, in this case). The first attribute here is xmlns. xmlns tells us something about the html tag. In this case, the immediately following quoted text is telling the browser where to look up any needed interpretations of the elements we are about to use. dir is the second attribute, and the assigned value (the stuff in the quotes) tells us we are in a language that reads 'ltr' or left-to-right. lang is the third properly and tells us to use english (default is US).
</html>
Remember every tag that start has to end. To end html we can either:
- <html></html> start and end the HTML node separately OR
- <html/> end and start with the same tag (OK, don't do this.... there are some browsers that have their own rules, but let us assume that basic W3C rules actually work)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">OK, now if you're loony and want some punishment you can go read the standard.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"/>
HTML Almost Useful
Beyond the end of the previous section, I will skip explaining most attributes, you can look them up later, when you need to use them. from:
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
Head holds the header and some programming code, everything you want search engines to look at want the browser to pre-load. It has a few more of those weird tags that don't really end.
Meta areas contain data that are typically used by search engines. Other exceptions are link and base areas, they tell the browser where to look for the webpage content on the Internet.
Body holds all of the basic HTML tags, and some inline code from other languages... Just think of it as what the browser will actually show to the person visiting your page.
http://www.w3schools.com/html/html_attributes.aspTo make a page that actually does something you need to fill some areas in.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head></html>
</head>
<body>
</body>
Head holds the header and some programming code, everything you want search engines to look at want the browser to pre-load. It has a few more of those weird tags that don't really end.
e.g., <meta name="keywords" content="webpage, basic, empty">
Meta areas contain data that are typically used by search engines. Other exceptions are link and base areas, they tell the browser where to look for the webpage content on the Internet.
Body holds all of the basic HTML tags, and some inline code from other languages... Just think of it as what the browser will actually show to the person visiting your page.
HTML Useful with Javascript
HTML is meant for structure. People mistaken structure for layout, this isn't quite true. Once things are in HTML you can move them on the page using CSS. Just keep this in mind, HTML tells you what things belong with what other things while CSS tells you how to make it look. There are defaults in CSS, or else the Internet wouldn't work... or more properly, just structure will give you a good looking page.
This is about where I throw my student into the deep end... The HTML tag has to contain all of the data you need for the page... So, a fairly well thought out page might look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
The above includes two javascripts. The basics of Javascript are that you have a loading area for the script. You can include outside files like:
To run the script you do something like:
This is about where I throw my student into the deep end... The HTML tag has to contain all of the data you need for the page... So, a fairly well thought out page might look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Show This on the Top Browser Bar</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="webpage, basic, empty">
<meta name="description" content="How to make a basic and well thought out page">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
<link rel="stylesheet" type="text/css" href="./stylesheet_css_buttons.css">
<link rel="stylesheet" type="text/css" media="print" href="./print_stylesheet.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="./jscript_tabbedhighlight.js"></script>
<body id="contactusBody" onload=" if (document.contact_us){ if (document.contact_us.contactname) {document.contact_us.contactname.focus()} };" data-twttr-rendered="true">
<div id="mainWrapper">
<p>Show your business in action</p>
<script language="javascript">setPage()</script>
</div>
<script id="hiddenlpsubmitdiv" style="display: none;"></script><script>try{for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++){ var lastpass_f = document.forms[lastpass_iter]; if(typeof(lastpass_f.lpsubmitorig2)=="undefined"){ lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function(){ var form=this; var customEvent = document.createEvent("Event"); customEvent.initEvent("lpCustomEvent", true, true); var d = document.getElementById("hiddenlpsubmitdiv"); for(var i = 0; i < document.forms.length; i++){ if(document.forms[i]==form){ d.innerText=i; } } d.dispatchEvent(customEvent); form.lpsubmitorig2(); } } }}catch(e){}</script>
</body></html>
The above includes two javascripts. The basics of Javascript are that you have a loading area for the script. You can include outside files like:
<script type="text/javascript" src="./jscript_tabbedhighlight.js"></script>or you can put code into the page to pre-load it, but that gets ugly, so lets not.
To run the script you do something like:
<script language="javascript">setPage()</script>You can read more about javascript in webpages at:
http://www.w3schools.com/js/The same basic principles are followed for CGI and some other included languages. The embedding outside code becomes quite handy when we look at other helpers like Flash and QuickTime:
http://www.w3schools.com/html/html_object.asp
CSS
CSS makes things pretty. The layout can change (the look and feel of any element on the page) per element, per attribute, and/or per structure. In my opinion good CSS uses mostly structure with attributes to help locate pieces of structure. The CSS file is an included external file... OK, there is such a thing as inline CSS. Let us ignore that for the moment, please. If you're interested check out.
CSS has rules, but some are broken by specific web browsers. In general CSS looks like
element {
what to change: what you want to change;
}
To understand CSS structure, it is best to play. However, the basics are that CSS cares about what type of attribute you are referencing and is hierarchical.
Here's an element with three four ways to address it:
http://www.w3schools.com/css/css_syntax.aspIn our example, there are four places in the head that included css:
<link rel="stylesheet" type="text/css" href="./stylesheet.css">Based upon the href you can see that their is a main stylesheet, one for buttons, and one for print. CSS is cascading. So, items in ./stylesheet.css can be overridden by items in ./stylesheet_css_buttons.css. CSS is also dependant on the media. This means that, even though the ./print_stylesheet.css follows the previous two it does not override them. However, two print medias in a row would allow for possible overrides.
<link rel="stylesheet" type="text/css" href="./stylesheet_css_buttons.css">
<link rel="stylesheet" type="text/css" media="print" href="./print_stylesheet.css">
<link rel="stylesheet" type="text/css" media="print" href="./print_stylesheet.css">CSS cares what you defined, exactly. In the print example, all of the items in ./print_stylesheet.css will continue to affect the layout of the page when the page is printed unless ./print_stylesheet2.css has an overriding definition.
<link rel="stylesheet" type="text/css" media="print" href="./print_stylesheet2.css">
CSS has rules, but some are broken by specific web browsers. In general CSS looks like
element {
what to change: what you want to change;
}
To understand CSS structure, it is best to play. However, the basics are that CSS cares about what type of attribute you are referencing and is hierarchical.
Here's an element with three four ways to address it:
<div id="contactUsNoticeContent" class="content"/>Address by class with:
.content {}Address by element name with
divAddress by id with:
#contactUsNoticeContentIf you add some structure you add more ways to address the element.
<div class="testclass">Now I can address all list items within the testclass with:
<ul>
<li>
</ul>
</div>
.testclass liCheck out more on this at:
http://www.w3schools.com/cssref/css_selectors.aspIn some cases weird element definitions work, these often break the standard. They are poor form, but often necessary to make sure all of the browsers look the same. Here is a great example, thanks to Microsoft, for creating some weirdness like filter:
http://reference.sitepoint.com/css/filterWhat does this look like in an actual CSS file? I chopped a small section of a CSS file out so that you can see:
/**
* Main CSS Stylesheet
*
*/
body {
margin: 0;
font-family: Gill Sans, Lucida Sans Unicode, Lucida Grande, Tahoma, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #e5edf5;
}
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
color: #3300FF;
text-decoration: none;
}
TEXTAREA {
margin: auto;
display: block;
width: 95%;
}
input:focus, select:focus, textarea:focus {
background: #E4FEF5;
}
PHP
OK, onto PHP, the basic programming language for Zen Cart. It wraps around everything I've previously shown you... And goes right in the middle. In general PHP is used to write out everything in an HTML page and provide the ability to make choices based on outside factors. Where Javascript runs on the client's computer, PHP runs on the server. It is fast, fairly flexible, and quite easy to pick up if you know at least the basics of object oriented programming.
Any attribute on a page and any variable, global variable, or if statement can make a choice. This isn't meant to teach you PHP, this is meant to get you past being able to read the basics. w3schools can help out, but I found that Zen Cart's sites were better once you get past the basics. To be honest, use Google to search zen cart's site.. Their search isn't that great, but here are the links to w3schools and Zen Cart anyway:
A really nice way of writing HTML that is easy to follow is found in some files, but not most. For the most part HTML and PHP are interspersed. The nice way is to keep adding to the string (in this case $content) based on some decisions, then output all of the string in one go (echo $content).
The confusing way (and to be honest, the way most of the files are written) is to intersperse the two languages and decision trees. I'll only give a partial example:
Notice that here the php command ends, but the bracket hasn't ended:
Notice that it is good practice to copy out any variables you need into something that doesn't conflict before using them:
All right, well, that's the basics. Good luck from there. At least you can find the start and end of things and avoid the conflicts. The rest is up to you to learn, remember Zen Cart has tons of online help and support. Use it.
Any attribute on a page and any variable, global variable, or if statement can make a choice. This isn't meant to teach you PHP, this is meant to get you past being able to read the basics. w3schools can help out, but I found that Zen Cart's sites were better once you get past the basics. To be honest, use Google to search zen cart's site.. Their search isn't that great, but here are the links to w3schools and Zen Cart anyway:
http://www.w3schools.com/php/
http://www.zen-cart.com/content.php?2-FAQs-and-TutorialsTo start the PHP in each php file in Zen Cart you'll see:
<?phpTo 'end' PHP you'll see
?>However, if the PHP includes a curly bracket, it will keep including the results of the following statements until the end of the bracket
<?php if something {?>
<html><body><p><?php $content = "the text to write out"; echo $content; ?></p></body></html>
<?php } ?>
A really nice way of writing HTML that is easy to follow is found in some files, but not most. For the most part HTML and PHP are interspersed. The nice way is to keep adding to the string (in this case $content) based on some decisions, then output all of the string in one go (echo $content).
<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_ezpages.php 2982 2006-02-07 07:56:41Z birdbrain $
*/
$content = "";
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';
$content .= "\n" . '<ul style="margin: 0; padding: 0; list-style-type: none;">' . "\n";
for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {
$content .= '<li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>' . "\n" ;
} // end FOR loop
$content .= '</ul>' . "\n";
$content .= '</div>';
echo $content;
The confusing way (and to be honest, the way most of the files are written) is to intersperse the two languages and decision trees. I'll only give a partial example:
<?phpThings in all caps like SHOW_BANNERS_GROUP_SET1 were written as global variables somewhere else. You don't have to do the normal $Global to address them. You just write them in all caps where they are.
/**
* Common Template - tpl_main_page.php...
if (in_array($current_page_base,explode(",",'list_pages_to_skip_all_right_sideboxes_on_here,separated_by_commas,and_no_spaces')) ) {
$flag_disable_right = true;
}
$header_template = 'tpl_header.php';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
$body_id = ($this_is_home_page) ? 'indexHome' : str_replace('_', '', $_GET['main_page']);
?>
<body id="<?php echo $body_id . 'Body'; ?>"<?php if($zv_onload !='') echo ' onload="'.$zv_onload.'"'; ?>>
<?php
if (SHOW_BANNERS_GROUP_SET1 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners">
<?php echo zen_display_banner('static', $banner); ?>
</div>
<?php
}
}
?>
Notice that here the php command ends, but the bracket hasn't ended:
if ($banner->RecordCount() > 0) {That means that everything to the end of that set of brackets will be part of the decisions and output processed for the if statement. Brackets can be nested, and are in the example... and no, I didn't include all of the ends of brackets.
?>
<div id="bannerOne" class="banners">
Notice that it is good practice to copy out any variables you need into something that doesn't conflict before using them:
$header_template = 'tpl_header.php';This doesn't always happen in the files, so watch out as you can change a variable or constant to something and affect more than that page.
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.php';
All right, well, that's the basics. Good luck from there. At least you can find the start and end of things and avoid the conflicts. The rest is up to you to learn, remember Zen Cart has tons of online help and support. Use it.
No comments:
Post a Comment