Coming Soon, Links Manager for 2.3.1

There are a couple of add-ons for managing links, I have tried them and I have not been impressed with any of them. Some are bloated, some have redundant code, some are just plain dangerous when it comes to using them for SEO. All are ugly.

My idea is to code up a new system to allow the Shop Owner to add links. And then have page, using tabs, to show the link category and links, a bit like this mockup;

Should be interesting to see what I can come up with.

In my opinion, the point of a links module is to allow the Shop Owner to help customers get to other sites. Reciprocal links (or in other words, you link to me, I’ll link to you) are outdated and should not be used for SEO purposes. What’s your thoughts on links to/from other sites?

WordPress and osCommerce – Admin 404

I cleaned and secured a osCommerce site the other day which is run in a subdirectory of a hosting account, like so /public_html/shop/.

The admin area is at /public_html/shop/admin/ [ actually it’s in a randomly named admin folder, but for the blog post, let’s assume it is at /shop/admin/ ]

In the root of the website hosting or in other words /public_html/ is an installation of WordPress. With me so far?

/public_html/ <-- wordpress /public_html/shop/ <-- oscommerce /public_html/shop/admin/ <- oscommerce admin area Part of the security lockdown is to protect the admin area by htaccess and htpasswd. This is server level security that ALL osCommerce sites MUST have.

I then delivered the finished site to the client and all was well. Fast forward a day or two, and I get an email stating that the admin area was returning a 404 error. That is odd, as it is definitely there.

So, what changed from when I delivered a working shop and admin area? Only 1 thing – the htaccess in the public_html that controls the wordpress URL rewriting.

The client went ahead and removed the htpasswd protection from the osCommerce admin area, which allowed access. Obviously this is undesirable and I let the client know this. I was shocked and amazed at this response from the clients host to the client;

The htaccess and htpassword files are a security measure against a problem that does not exist anymore in the newest version of osC.

What an absolute joke – this host really needs to get a clue!

What is needed is a way for WordPress to do it’s rewriting AND for osCommerce Admin area to be secured via htpasswd…

The Solution

With some Google digging, it transpires that WordPress sometimes has problems with htpasswd’d folders higher up in the website hosting account. Hence the 404 error.

With a bit more Google digging, the solution is as presented on this page. Simply make a couple of error pages, and add in the two ErrorDocument directives to the WORDPRESS htaccess file.

So, next time your osCommerce Admin area presents a 404, and you are running WordPress on the same hosting account, this could be the solution for you.

Important note; I don’t really know enough about WordPress to state for certain just exactly what the problem is. What I am able to do is hunt Google, copy and paste, and write a blog post about it for people having similar problems in the future.

You’ve added XYZ to your cart

For the build I’ve been working on for the last couple of days, a really nice feature is a message that shows when the buyer adds something to their cart. Basically it’s a reinforcement of the action they just took;

Let me know what you think.

The code is based on the last added product ID in the cart item list array. I had to create 1 function to grab the product model to get it working as I wanted.

In the video you might also notice a kinky “Best Sellers” box – I might blog about that tomorrow.

Quick Add To Cart using Product Model

Over the next couple of days, I’ve been tasked to recreate the look/theme of a Magento site, to osCommerce. In addition, I also will port as many of the features as I can (given the complexity of code and time frame).

One of the features on the Magento site is a “quick add to cart” box, where the buyer can insert the product model and quantity – this then reacts with the shopping cart to add the given product…

I don’t know Magento well enough to say if this is a core feature, or a commercial extension. But it looks like this (in my clients Magento cart);

With a bit of thought, I was able to make some -experimental- code to to do the same job, here is how it looks in osCommerce;

Note; I will obviously be re-styling this to look like the Magento example!

And here it is in action;

Note that in the example I inserted the product model “pc-twof” which in a base install of osCommerce is the product called “The Wheel of Time”. If you can read between the lines, this functionality requires every product to have a unique product model.

I guess it is good if you have a shop that has a printed catalog that carries the product models – the good news is that customer won’t have to search or drill down through the category structure to press the buy button.

Let me know what you think of this idea? Can you see any drawbacks or benefits?

Clean and Healthy 2.3.1 Template

Here is another template, ready for purchase…

Overall View

Logo, Currencies and Languages in the Header

Good looking Cart Contents box in the Header

Rounded Infoboxes, Category box includes arrow images

Nice display of Products in the Product Listing pages

Sexy “Payment Images” in the Footer area

“More Info” buttons in the Whats New and Special Infoboxes

And, of course, my own coded solution for Banner Rotation.

Summary

A clean and cool template perfect for any type of shop!

Cost

Normal Price $199. Special Offer from now until the end of January, just $99. Price inclusive of installation. Interested? Email me on oscshops AT gmail DOT com

Technical Notes

This is an osCommerce 2.3.1 template, it will not work in any earlier versions of osCommerce. It is a TRUE template, not a full download of osCommerce like most template vendors sell.

Column backgrounds in css

So, now that 2.3.1 uses the 960 grid system, we no longer have “trusty” tables to give full depth column styles. Instead we need to create the illusion of columns by using a technique known as “faux columns”. It’s very easy.

We know that a typical 2.3.1 osCommerce site is 960 pixels wide, so the first thing to do is create a blank image of that width, and approximately 100 pixels deep. I did this in photoshop, but you can use whichever graphics application you are comfortable with.

We now need to ascertain the width of the left and right column. To do this, we simply need to open up /includes/classes/osc_template.php and find the line of code that begins;

[php]var $_grid_column_width =[/php]

The number is how many columns (aka grids) the column is in width. In my example that I am using, the line of code reads;

[php]var $_grid_column_width = 6;[/php]

We further can work out that 1 grid is worth 40 pixels. How; 960 divided by 24 is 40. So, 6 grids is 240 pixels.

Go back to that blank canvas that you created, and make the right hand portion of it a solid colour that is 240 pixels wide. Do similar for the left hand portion 240 pixels wide – remember that if your “grid_column_width” is 4, then you would make these portions 4 by 40 wide (160 pixels)…

I further “prettied” mine by adding a thin vertical black strip…

Save the image you created as bg.gif into the /images/ directory of your website.

Now open up stylesheet.css and find this;

[php]#bodyWrapper {
}[/php]

Change it to this;

[php]#bodyWrapper {
background: url(images/bg.gif) repeat-y;
}[/php]

If you don’t understand that, please read a primer on css.

Save the stylesheet and view your site. It should look somewhat like this;

Which you can plainly see has the column showing the purple background. If you scroll down the page, you will further see that the purple extends all the way to the bottom of the page, even though the column actually ends halfway up the page – hence why this technique is known as “faux column”. Faux means false, in french.

If your faux columns don’t show, then there is one more thing that you need to do. And that is to “clear” the divs. So open up /includes/template_bottom.php and change it like this;

That’s it! An introduction to how to create columns in a div based css layout. It’s not the only way, but it is certainly a very easy way.

You may have noticed that the columns also show in the header area, which is probably not desirable. In the future I’ll write a complementary blog post to show how to change that to something a little better looking.

Easy as 123, or clear as mud ? You decide.

Reviews in Product Page?

Just a quick post as I wanted to remind myself to write more on this. Presently working on some ideas for a client, one of his needs is to have the “reviews” adding functionality in the product page.

As we know that to place a review the customer MUST be logged in, I decided to test if the customer is logged in and then present the information like this;

If NOT logged in;

The form is not active, and I lowered the opacity, as well as put a “you must login” message underneath.

If they ARE logged in;

The form becomes active, the opacity is removed, and the button appears instead of the message!

A nice little mod, that did not take too long to code up, as most of the code already exists in other pages, so just a matter of copy/paste. I also made a little graphic to link to already written reviews – this does not show if there is no reviews on the product being looked at.

102 and counting…

Last week I cleaned a locked down another 4 hacked osCommerce sites – which takes the total to 102 that I have personally cleaned, I suspect there are a few more developers who have cleaned as many if not more. osCommerce is a magnet for hackers.

Anyway, of the 102 that I have cleaned, only 1 has been subject to rehack – after much investigation it -appears- that the clients computer is infected, possibly using a variant of Gumblar, as it seems that each time he FTPs using a certain piece of software, his site is hacked within a few hours. It’s a strange case.

I’m seeing more and more hacked osCommerce sites – with some shop owners completely unaware until Google tells them it’s a “malware” site – then it’s noticed pretty quickly.

If you are unsure about your osCommerce security, contact me on oscshops@gmail.com to book a quick scan of your site – I’ll let you know about any insecurities and give you a guideline on how it can be cleaned and/or secured.

Remove all Items from Shopping Cart

In this post, I’m going to show you how to add a new button into the shopping cart page that will allow your customers to remove all items from their shopping cart in just one click…

In standard osCommerce, each product has it’s own individual “remove” link – which is fine and works well. My idea is to remove the whole lot in one go…

It looks like this:

Step 1 – add the new button to the shopping cart page

All we need to do here is add a new button just like the existing “checkout” button in shopping_cart.php – but we make it different by using different parameters;

Explanation of parameters;

text – the text that the button shows, see step 2.
icon – the tiny icon that shows in the button, I’ll cover this in a future post, but you can see the available icons at the bottom of this page.
action – what the button does, see step 3

Step 2 – add the language define to the english language file

Should be completely self explanatory…

Step 3 – making the “action”

This is where we delve a little bit into the “engine” of osCommerce. Open up the file includes/application_top.php and find this line of code;

switch ($HTTP_GET_VARS[‘action’]) {

This is where we can set up the new action called “clear_cart”. Without going into too much depth, the action needs to do the following;

1. Clear the Cart
2. Redirect back to the shopping_cart.php page
3. Stop the script continuing by “breaking” it

To clear the cart, we can use the inbuilt function “remove_all” from the shopping cart class. To use it, we need a line of code like this; $cart->remove_all();

To redirect, we can use the inbuilt redirect function called “tep_redirect” – we just need to tell it where to redirect to.

To stop the script continuing to process, we use the php break command.

So the portion of new code looks like this;

And here it is in action;

Recently Viewed infoBox in 2.3.1

I needed to code up a feature for a client which tracks a visitor “product_info.php” page views to basically show them what they recently viewed. I have to say that although I never thought about it, this is quite handy to have, as I have often been on the point of buying, looked at something else, then forgotten what product I was about to buy.

So, as the client is on 2.3.1 and we all know that there are barely any well written contributions for it, I decided to hack up an older contribution from kymation (Jim Keebaugh) who I know writes code in a very decent way…his contribution is here (5 Nov 2008 download).

The parts I used were the changes in product_info.php and logoff.php, this gives enough information to build an array of product IDs that have been visited. The array of product IDs is stored as part of the browsing session.

I then created a new infoBox to take that array and build up a gallery of recently viewed products. It looks like this;

I particularly made the images quite small in order to fit 4 in a row. The images are also linked to their respective product pages.

If there is nothing in the array (or, in plain english, the person viewing your site has not looked at any products) then this box does not show at all, no point in showing a box that has no contents!

I’m still fine-tuning the system, but overall, it seems to be solid.

Give me your views on it, please. Can it be changed to make it better, more interesting? I did think about changing the code showing the images to make it more like a fade in and out type effect, but then thought “whats the point” – after all this is a navigation history so everything needs to be seen at the same time.