osc v3 – something brewing? 1 day to go?

I’ve never seen more than 1 Team Member on…

and today there have been 3 already! Something brewing regards the promised release of v3 of osCommerce do you think?

Forget “mother” as that’s just a generic team member who does nothing. The other two, “Yuen” and “Odom” don’t do much except to look after the Live Shops area.

This post is just a bit of fun in the countdown to v3, don’t think too hard about it 😉

osCommerce Multiple Images using Fancy Box

The other day I spent some time “doing up” a site. I had a list of to-do’s and was basically given carte-blanche to do whatever was needed to make it work…

One of the requests was the ability for some products to have more than 1 image in the pop-up. I know that there are a handful of image mods available, but I wanted to do something that hasn’t been done before…

As I use “Fancy Box” quite a lot for thumbnail/large image purposes, I decided to utilise the core code and have an extra 5 images, for 6 in total;

1 thumbnail – used everywhere as per normal osCommerce
5 large images – used in the pop-up

Admin Section – product adding/editing page

In here I added the ability to upload an extra 5 images (in addition to the usual thumbnail).

Shop Section – product info page

The usual thumbnail image shows, when it is clicked on the old style popup is no longer used. In it’s place is “Fancy Box”. As you can see in the video, Fancy Box enables us to have a previous & next arrow system to scroll through the multiple images.

I think it looks good. What do you think?

Contribution Talk: QPBPP 1242

Whenever I use a pre-existing contribution, I’ll make a short blog post to let you know how the install went, and how easy the contribution is to install.

Quantity Price Breaks Per Product (aka QPBPP)

http://www.oscommerce.com/community/contributions,1242

The task was to install this on a very highly modified shop. This shops admin category page has at least 5 other contributions code changes, some custom coded by me, some added by the client. Hence I could not just “drop in” the files.

I had to merge the files one by one, by hand. Using winmerge makes it rather easy, however I decided to simply follow the install instructions as they are put together quite well…

In use, it works flawlessly. I managed to easily add price breaks to the product.

Overall

Ease of Install: 6/10 (good considering the shop is highly modified)
Ease of Use: 8/10
How it looks: 3/10 (it’s ugly in the extreme, I modified a file to change this)

Changes I would like to see

The NEW files added to a folder so that any new files can just be dropped in, without accidentally over-writing existing files.

Extra Info

I have modded the PriceFormatter.php file to output the price breaks in a cleaner fashion. If anyone wants this, please let me know, feel free to “beer” me for quicker service. Burp.

Before (takes the style of the infoBox):

After:

Paypal. osCommerce. Prices.

In general I really like osCommerce, but some areas of it are just dire. In particular, 2 areas of osCommerce really annoy me…

Paypal Implementation

All of the available Paypal modules bypass checkout_process.php ! The checkout_process.php file is a workhorse file that inserts the order into the database (as well as doing other things). Any payment method that bypasses this file is doomed to failure, unless that payment module duplicates the checkout_process code. What this means is that any contribution coded to “oscommerce standards” will simply not work properly if Paypal payment method is used.

Price Display

Wouldn’t it be nice to have 1 function to control all price display. Then it would be simple to update the look of the prices across the whole site. As an example, let’s say I wanted to add the words “our price” in front of eery price. The wy that osCommerce is coded, I have to amend probably 20 different files to do this! Not good.

Both of these moans relate to 1 thing. Overuse of code. My feeling is that once a piece of code has been written, it should be utilised properly.

ClubosC Discount System and WPosC

WP.osC (WP-osCommerce) is a modified version of osCommerce, one of the most popular ecommerce solutions. The main difference between WP.osC and osCommerce, is that WP.osC uses the same Theme system as WordPress.

Seems as though this is (another) fork of osCommerce. Anyway, I have been playing with this system for a couple of hours and can confirm that my own ClubosC Discount System does work with this fork (with a bit of finagling!).

As my Discount System touches very few files, it’s probably the only Discount System that will work as intended with wposc, as wposc changes files considerably.

For installation of my Discount System on your wposc shop, please contact me directly on oscshops@gmail.com

How Much To Spend For Free Shipping

On the osCommerce Forum, Jim asks;

I notice that oscommerce has the default ability to have all orders over a certain amount to qualify for free shipping. Is there a contribution that would add text to the effect of

“You are only [X amount of money] away from qualifying for free shipping.”

With the amount of money being based on the cart contents of the time. It would be a nice device to have to push up the average order amount, anyone know of such a contribution?

There probably is a contribution, but by the time you’ve found it, and checked to make sure the code is OK, it’s quicker to simply come up with some code that does the same thing.

Step 1. make the language definitions

Open up includes/languages/english.php and add the following lines of code directly before the end ?> in the file

[php]define(‘SHIPPING_CHARGE’, ‘Only another %s until you qualify for free shipping.’);
define(‘SHIPPING_FREE’, ‘You qualified for FREE shipping!’);[/php]

These lines have to be in the english.php as one or the other of these will show in ALL osCommerce pages in your store. Did you notice the %s rather than the actual price? We’re going to do something special with that, read on 🙂

Step 2: Amend the Shopping Cart infoBox

In this file we are going to paste code which shows one or other of the language definitions based upon the value of the cart contents!

So, open up /includes/boxes/shopping_cart.php and paste the following code directly before this line of code <!– shopping_cart_eof //–>

[php]

show_total() < MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER) ? sprintf(SHIPPING_CHARGE, tep_output_string_protected($currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER – $cart->show_total()))) : SHIPPING_FREE; ?>

[/php]

Save both files and upload. Voila. Easy as 123.

Deconstructing the PHP

1. We know that the value of the cart contents is assigned to $cart->show_total()
2. We know that the value of the free shipping in the order_total module is assigned to MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER

So this piece of code: $cart->show_total() < MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER compares the two. Depending upon which is true (which is greater than the other), this piece of code: sprintf(SHIPPING_CHARGE, tep_output_string_protected($currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER – $cart->show_total()))) : SHIPPING_FREE; shows either the SHIPPING_CHARGE language, or the SHIPPING_FREE language.

How about that %s ?

Well, that is used by the sprintf() function to format data that is passed to it. You can see that part of our code looks like this: sprintf(SHIPPING_CHARGE, tep_output_string_protected($currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER – $cart->show_total()))) – the 2nd part of this code is the value %s (in other words the total of the free shipping amount LESS the cart total). Make sense?

Images, images, images

When the value of the cart is LESS than the Free Ship Amount;

And when the value of the cart is equal to or greater than the Free Ship Amount;

Easy as 123!

FAQ: Free Shipping in osCommerce

Another question that I see asked time after time is;

How do set up osCommerce so that any order over £50 has free shipping?

The easiest way is to go into your admin area > modules > order_total

Now click on the shipping module, and press [edit]. This brings up a screen like this:

The bit that we are particularly interested in is this:

Simply insert a number in that box! If you want free shipping over £50, insert 50. Free shipping over £75, insert 75. And so on. Once done, press [update].

Note that this order_total module setting OVER-RIDES any charge that is applied via a shipping module.

Isn’t that easy?

FAQ: remove infobox corners

osCommerce is kinda coded a bit clunky – we have to take into account that the majority of the codebase has not been updated in around 8 years. For this reson some things are done in osCommerce, which now, as webdesigners, we laugh at. But 8 years ago, it was almost cutting edge…

A question that I see posed almost daily on the osCommerce forum is;

I’m trying to change the original install color “grey” to blue, especially on each boxes header.

The problem here is that part of the infoBox is made out of color via css and the corners are made by the use of matching grey images (rounded corner images and square images). What I am going to do in this post is show you a few ways to get rid of those boxes once and for all!

So, let’s assume you changed the loo of your infoBox from the standard grey to blue;

As you can see, those grey images are showing and really interfere with the design. How to remove them?

Option 1: Via CSS

In the stylesheet.css file, you could do something as simple as;

.infoBoxHeading img { display: none; }

Just add that code at the bottom of the stylesheet, upload it and refresh the page. Now the infoBoxes look like this;

You can see that the text of the infobox now is aligned left. This might suit your needs. If not, you can try;

Option 2: In the boxes class file

Take that line of code back out of stylesheet.css so the grey boxes reappear in your design. Open up includes/classes/boxes.php and find;

[php]if ($left_corner == true) {
$left_corner = tep_image(DIR_WS_IMAGES . ‘infobox/corner_left.gif’);
} else {
$left_corner = tep_image(DIR_WS_IMAGES . ‘infobox/corner_right_left.gif’);
}
if ($right_arrow == true) {
$right_arrow = ‘‘ . tep_image(DIR_WS_IMAGES . ‘infobox/arrow_right.gif’, ICON_ARROW_RIGHT) . ‘‘;
} else {
$right_arrow = ”;
}
if ($right_corner == true) {
$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . ‘infobox/corner_right.gif’);
} else {
$right_corner = $right_arrow . tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
}[/php]

Change it to;

[php]if ($left_corner == true) {
$left_corner = tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
} else {
$left_corner = tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
}
if ($right_arrow == true) {
$right_arrow = ‘‘ . tep_image(DIR_WS_IMAGES . ‘infobox/arrow_right.gif’, ICON_ARROW_RIGHT) . ‘‘;
} else {
$right_arrow = ”;
}
if ($right_corner == true) {
$right_corner = $right_arrow . tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
} else {
$right_corner = $right_arrow . tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’);
}[/php]

And find;

[php]$info_box_contents[] = array(array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_image(DIR_WS_IMAGES . ‘infobox/corner_left.gif’)),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading” width=”100%”‘,
‘text’ => $contents[0][‘text’]),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_image(DIR_WS_IMAGES . ‘infobox/corner_right_left.gif’)));[/php]

Change this to;

[php]$info_box_contents[] = array(array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’)),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading” width=”100%”‘,
‘text’ => $contents[0][‘text’]),
array(‘params’ => ‘height=”14″ class=”infoBoxHeading”‘,
‘text’ => tep_draw_separator(‘pixel_trans.gif’, ’11’, ’14’)));[/php]

Save the file and upload and your boxes should now look like this:

As you can see, this way preserves the spacing in the header area of the infoBoxes.

If that way does not float your boat, then try;

Option 3: Change the actual images

Undo the changes you made (if you tried Option 1 or Option 2). Now make yourself some corner images and replace the images you find in /images/infobox/ – the good thing about doing it this way is that you can still have rounded corners;

So, there you have 3 ways in which to change the appearance of your infoBox Corners. Easiest way is Option 1 in my opinion.

In a future post, I will show how to completely change the style of the infoBoxes to allow rounded corners without using images! How to make all 4 corners rounded and much more.

Snow, not osCommerce

A post that is not about osCommerce!

Apologies to regular readers for the lack of posts – here in the UK we’ve been having “severe” weather problems with snow (which is something that we are simply not used to). My ISP decided to give up and has only in the last couple of days been able to give me a connection that is halfway decent.

I’ve been having to use my iPhone to access emails as and when I can – so my apologies if I haven’t gotten back to you – I have a backlog of over 100 mails to get through.

Fortunately I have been able to carry on with the work already booked out in my diary, although because of the ISP problems it’s been a bit of a Pain In The Arse!