960 Grid Tutorial – Understanding Alpha and Omega classes

Number three in my short series explaining a little bit about how the 960 Grid system works in osCommerce…

Alpha and Omega Classes

The Alpha and Omega class is used to align the first and last “child” divs of a parent div to the outermost margins of the page…what is a child div? Have a look at this code;

Which produces this layout;

The next image shows the same code with a bit of explanation;

If I remove the alpha and omega class, the display reacts badly;

Why is this? It is because the “alpha” and “omega” classes “remove” the gutter left and right (not exactly but it’s the easiest way to explain it). In the image below I have shown this in red to illustrate the area that adding the “alpha” class changes;

Adding the “alpha” class back in;

shifts the yellow div back over to it’s rightful place;

Yet the pink child div is still in the wrong place. This is because we need to add the “omega” class to it. Once done, everything lines up perfectly;

Summary

The “alpha” class is used on the FIRST “child” div. It shifts the div to the left to make it line up with your design.

The “omega” class is used on the LAST “child” div. It shifts the div to the right to make it line up with your design.

You should use “alpha” and “omega” classes when the div’s you use them on are also grid_* divs, and are inside a parent grid_* div.

As always, if anything looks wrong, let me know – I am by no means an expert on 960 grid, and always looking to learn more about it. These tutorials are only made by my trial and error over the past few weeks.

960 Grid Tutorial – Understanding Push and Pull classes

Number two in a mini-series explaining a little bit about how the 960 Grid system works in osCommerce.

Push and Pull Classes

The Push class is used to “push” the DISPLAY of a div, and the Pull class is used to “pull” the DISPLAY of a div. Imagine an anchor at the left hand edge of your page, and then imagine yourself pushing content away from that anchor, or pulling content towards that anchor…

Take this standard code;

Which we know will produce a 2 column layout; 25% menu and 75% content area, like this;

That should be really easy to understand what is going on, right? Now, what if you want those columns to be the other way around? So, you end up with the menu on the left hand side and the content area on the right?

You could do this;

which would be just fine, and does exactly what we require;

But, the downside of this is that the menu is being rendered before the content, which is undesirable for Search Engine Optimisation (SEO), and undesirable for Accessibility (with regards to screen readers etc).

Instead, we can simply PUSH and PULL the display of our menu and content div’s to achieve the effect we need…and it is very simple…I’m reverting to the code back we started with and will instead add an extra PULL class to the menu div;

This has PULLed the menu div 18 blocks towards our “anchor” (the left hand edge of the page);

However, as you can see, it now displays on top of the content, which is undesirable. So what do we have to do?

The obvious answer is to PUSH the content div away from our anchor by 6 blocks;

so the display now shows;

which is exactly how we want it. And we have achieved this nicely in terms of SEO and of Accessibility. The content is being rendered in our underlying code BEFORE the menu, but the menu is displaying first in our output.

Hopefully this intro to PUSH and PULL classes will help you to design your osCommerce site with thought to SEO and to Accessibility.

Please remember that I am far from expert when it comes to 960 Grid, so if anything looks wrong, please let me know!

Product display in shopping_cart.php in osCommerce

The new 2.3.1 doesn’t look that great in the shopping_cart page when it comes to displaying the products being purchased, particularly if those products have attributes. Here’s how it looks (bear in mind that the attributes chosen in the example add an extra $100 and $50);

What this shows is the final price of the product only (that is the price of the product + any attributes).

So, I preferred the idea of showing the base price of the product and then show individual attribute prices, as so;

I think that this change presents the list of products being bought more clearly. What do you think?

960 Grid Tutorial – Understanding Prefix and Suffix classes

The first in a mini-series of posts explaining a bit about the 960 Grid system that is now used in osCommerce.

The first step for me, to enable you guys to easily see what I am doing is to install the 960 Gridder extension from Andrée Hansson – this useful gadget shows the gridded overlay on top of a website that uses 960! Here’s a couple of examples;

A lingerie template I made;

And the standard osCommerce layout;

You can see that the “green” lines show the padding, and the white in-between “blocks” show the available grids for template positioning. Hopefully this makes sense to you…

Prefix and Suffix

So, as you will already know if you have started playing, the 960 Grid System is a series of “arcane” css tags to control the layout of your page.

Imagine that you want to have a 10 block grid placed in the header, you might do something like this;

That’s pretty straightforward and produces this;

But what if you wanted that block aligned exactly in the center of the page? You could do this;

Where we are adding two extra divs, each of 7 blocks width to align the original div between them. It outputs this, which works fine;

Instead of that, revert the code back to original, and simply add a prefix and suffix class of 7 each!

and what we end up with is exactly the same effect as before, but with a lot less code;

Summary

The prefix and suffix classes are used to horizontally position your block of content. If you think of a “sliding” effect, you’d be pretty close. The suffix class is used to stop any content overflowing into the “tail end” of the area you are working in.

Another quick example;

Say I wanted that pink block to be positioned 3 blocks in from the left, I’d change my code like this;

which produces this;

So, what happens if you wanted the pink area to start 3 blocks in, then a yellow area next door to it, aligned horizontally. Well, it’s easy! Simply don’t use the suffix class, and make a new omega div to fill out to 24 blocks. Did that make sense;

So, the parent is grid_24, and the children add up to 24; grid_11, grid_10, prefix_3 and it looks like this;

I hope that this first tutorial has helped you understand a bit more about osCommerce and the Grid System. Please note that I am not an expert, so if anything looks wrong, tell me!

Pop Quiz! osCommerce. Lets see how good you are…

So, this image shows a SQL command that I have amended from the original;

Can you answer these questions;

1. In which file can the original SQL be found?
2. What add-on have I added to this particular site? Please provide a link to the add-on…
3. What change(s) did I make to the SQL, and for what purpose?

I’ll think up a suitable prize for the first to get all 3 questions mostly correct. Or I might not, as it’s just a bit of fun.

Lingerie Template for osCommerce 2.3.1

Made a nice template for Lingerie shops, here’s the overall view;

And some of the more interesting features…

If the cart is empty, the shopping bag is “black”;

And if it’s not empty, it turns “green”;

And if the shopper places his mouse over the green bag, they see a summary of the cart as product images;

Here’s a video that shows this in a bit more detail;

Cool looking search facility;

Mini “welcome” and “new products”;

Rotating images, no extra code or admin settings needed;

Column shows everywhere except the index page;

Summary

I think a nice looking template that would suit any store that needs to be stylish. Style and colours are very easy to change.

Cost

$199, which includes 1 hour of my time for installation/changes. If interested, please email me on oscshops AT gmail DOT com

Hazardous Materials Surcharge – osCommerce

I have written about this before, but that project evolved into something too complex to be used for anything else other than the client for which it was written. So, when someone else approached me for the same type of thing, it was easier to quote for a rebuild from the ground up – but this for “oscmax” which is a fork of osCommerce. But this can easily be changed to osCommerce 2.2 or 2.3 for future clients…

Admin

The products category listing now has a red/green button flag for easily switching products to HAZMAT or not;

Similarly, the actual product adding/editing page has a radio button that does the same job;

The HAZMAT order_total module has a range of options available;

Sort Order, Minimum Order Fee, Chargable US states. And two prices; 1 for the US states and another for worldwide.

Shop

In the shop, the HAZMAT fee is seen in the checkout_confirmation.php page;

In the example, shipping is to Oman, which is in the Middle East, so Hazmat applies at a rate of $55. This is added to the total to pay.

All in all, it works very well, and is quite flexible. It would not take much work to recode this from osCmax to osCommerce (2.2x or 2.3.x), so if anyone needs it, email me and we can go from there.

Reviews Ticker, jQuery and osCommerce

Spent a few moments looking around the net this morning for an easy to install “News Ticker” coded using jQuery. Ended up at the site of Alex Francois who has put together a nice little script that does exactyl what is needed.

Here is what I wanted to achieve which is a ticker inside the black area underneath some other info (obviously the info in the image is “placeholder” text, so just ignore that);

Step 1 was to follow the instructions as laid out by Alex.

Step 2 was to code up 2 lines of osCommerce standardised code to grab the reviewers name and the first few words of the review text, then link it to the relevant product;

Step 3 was to refresh the page and see it in action;

Quite nice, I think.

Another osCommerce Template for 2.3.1

I spent some time over the past couple of days making up a new theme for 2.3.1. I tried to chop up the structure a lot to make it look less osCommercey than a standard osCommerce site.

Here’s the overall view;

And some features in close-up…

New Product boxes

These boxes contain more information than usual, including a short description of the product with NO cut-off words. In most templates, a substr is used to chop off the description at x number of characters. That’s not good enough for me, so I make sure that words are NOT chopped in half.

Rotating Banners

Just drop a file into the “rotating” folder, and it gets auto-linked to the product you choose! No code or admin changes necessary…

Search in Header

A nice looking search facility, designed to be noticed!

Angled Logo

An angled logo, which is a bit different. Easy to swap out for a new .png image!

Side column

The side column has a cool, clean look. I got rid of the “infoBox” look in favour of a solid background.

How much is the template?

This template costs $99, and comes with 30 minutes of my time for installation and/or minor code changes.

How easy to change the look and colour?

Pretty simple. It’s just .css and images. Make new images, change the .css. The possibilities are endless. Don’t like the green? Change it to pink, blue, red, whatever.

Interested?

Email me on oscshops AT gmail DOT com. This template is ready to go, and by this time tomorrow you could have it live on your osCommerce 2.3.1 webshop.

Google Chrome and SSL in osCommerce

I only use Google Chrome these day for browsing. But when I am creating a design I also test in Internet Explorer and Firefox.

I had an issue the other day when I set up a design I made on localhost to the live server. All went well, until I had to set up the osCommerce site to use SSL – we all know how easy this is…a change in the configure file and all is done.

Then I tested it in Chrome. The browser was telling me there was unsecured content within the page! Well, after a good 30 minutes of checking through my code, I can’t find anything that is insecure!

I then checked the site in both Internet Explorer and Firefox – guess what – padlock SSL is working just fine with no insecure warnings! Try Google Chrome again, and it is still giving me warnings.

I then Googled and found some bug reports for Chrome, one of which is the SSL problem. It seems as though Chrome issues an insecure report when ANY link within a https page is linked to a http page! So this in a https page;

<a href=”http://www.google.com”>google</a>

will make Chrome choke and give an insecure warning – simply because the link is to a http page rather than a https page. This is a bug that needs sorting out, please Google.

Anyway, just wanted to post this to save anyone else from wasting time hunting for a fix when they see Chrome is giving a warning when other browsers are not.