This week 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.

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

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)

So the actual minimum for a properly formed page is:

<!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"/>

OK, now if you're loony and want some punishment you can go read the standard.

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:

http://www.w3schools.com/html/html_attributes.asp

To 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>
</head>
<body>
</body>

</html>

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">

<head>

<title>Show This on the Top Browser Bar</title>
<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>
</head>

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

http://www.w3schools.com/css/css_syntax.asp

In our example, there are four places in the head that included css:

<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">

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" media="print" href="./print_stylesheet.css">
<link rel="stylesheet" type="text/css" media="print" href="./print_stylesheet2.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.

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

div

Address by id with:

#contactUsNoticeContent

If you add some structure you add more ways to address the element.

<div class="testclass">
<ul>
<li>
</ul>
</div>

Now I can address all list items within the testclass with:

.testclass li

Check out more on this at:

http://www.w3schools.com/cssref/css_selectors.asp

In 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/filter

What 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:

http://www.w3schools.com/php/

http://www.zen-cart.com/content.php?2-FAQs-and-Tutorials

To start the PHP in each php file in Zen Cart you'll see:

<?php

To '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:

<?php
/**
* 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
}
}
?>

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

Notice that here the php command ends, but the bracket hasn't ended:

if ($banner->RecordCount() > 0) {
?>
<div id="bannerOne" class="banners">

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.

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';
$footer_template = 'tpl_footer.php';
$left_column_file = 'column_left.php';
$right_column_file = 'column_right.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.

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.

Science and Logic

Monday, October 7, 2013

Blender, OMG

Saturday, July 20, 2013

Zen Cart, PHP, HTML, CSS, and oh yah Javascript

HTML Very Basic

HTML Almost Useful

HTML Useful with Javascript

CSS

PHP