scriptygoddess

05 Jan, 2008

Some CubeCart 4 minor mods (including select box image changer)

Posted by: Jennifer In: cubecart

I've now used CubeCart 4 for a number of clients recently, and I have to say I'm pretty impressed. As with any cart – the features still have to match your needs, but for the most part, the clients I've implemented this for were able to get the features they had wanted. Then add in a few mods, and we're in even better shape. I also want to mention that CubeCart 4's support has been fantastic! Great customer service, helpful responses, with reasonable response time. They're in a different time zone than me, but normal requests would be answered within a day – when I had a critical issue it was responded to within a few hours that same day. And as before, customizing their template has been pretty painless. I've been really happy with them and they've moved up to the top of my recommended list for cart software.

So to get things working just so with a few of my recent implementations, here are a some tricks I did: (Some of these little hacks were actually given to me by CubeCart's support, although they do specifically say they don't support changes to core application files.)

Alternating background row colors on home page:
I wanted to list the "latest products" and alternate background row colors – but this isn't something that's done automatically (it is on other pages, but for some reason it's not on the home page).

In this file:
includes/content/index.inc.php

After this line:
$index->assign("VAL_PRODUCT_NAME", validHTML($latestProducts[$i]['name']));

I added the following:
if ($i % 2) {
$index->assign("ROWCLASS", "altrow");
} else {
$index->assign("ROWCLASS", "normrow");
}

Which gives you class="{ROWCLASS}" and thye styles "altrow" and "normrow" to customize in use in your yourskin/styleTemplates/content/index.tpl template file where the "latest products" are listed.

Stopping the "Order received, awaiting payment" emails
The store sends out a lot of emails (in my opinion). When you're in the checkout process – and you've submitted your order but haven't filled out the credit card page yet – the store sends an email because at that point, the order is saved. It's kind of unnecessary – because I think most people are either going to fill out their credit card information right away – or just completely abandon making their purchase. In any case, to turn off those emails I did the following:

In this file:
/classes/cart/order.php

At about line 688 is the following:
$mail->send(array($this->orderSum['email']), $config['mailMethod']);

Comment it out by adding "//" before the line, like so:
//$mail->send(array($this->orderSum['email']), $config['mailMethod']);

Stopping the "Order canceled" emails
The other kind of annoying email that goes out is whenever an order gets canceled (whether it's because the customer never followed through and entered their payment – or the store owner was clearing out orders that got abandoned). To turn those off:

Again in this file:
/classes/cart/order.php

At about line 390 is the following:
$mail->send(array($this->orderSum['email']), $config['mailMethod']);

Again, comment it out by adding "//" before the line like so:
//$mail->send(array($this->orderSum['email']), $config['mailMethod']);

Cart navigation
When you're on one of the cart pages, the cart navigation is reverse of what is typical (I think) – I also think this caused some usability problems with one of the customers. For example, on all the other store pages, "Homepage" is the top link, but on the cart page "Empy cart" is the top link, and "homepage" is the LAST link. The customer said that the cart would empty everytime he'd go back in the store to add additional items to his cart. I tried to duplicate his error and couldn't – but I did notice myself almost clicking "Empty cart" when I meant to go back to the homepage… heh. To change the order of the navigation items in the cart, I did the following:

In this file:
/includes/boxes/cartNavi.inc.php

Around line 89, is the following code:
if($_GET['_a']!=="step3") {
$links[] = array (
'link' => "index.php",
'text' => $lang['cartNavi']['homepage']
);
}

Added this line after that section:
$links = array_reverse($links);

Change product image based on option selection
One of my clients wanted to change the main product image based on the option selected. (i.e. the options were different colors of the product, and they wanted the image to show the image of the color selected in the option list). This was a little trickier because there is no association in CubeCart of options to images. So this had to be done manually – they uploaded all the images – and added all the options to the catalog. Then I created a javascript file that had all of it set up in an array.

initialize the array:
var optionimages = new Array();
Then for each option:
optionimages[OPTION-ID-GOES-HERE]="PATH-TO-IMAGE-FILE-HERE";
(here's an example)
optionimages[3] = "/store/images/uploads/redoption.jpg";

(I actually first set it all up in an excel file to organize it all (copied from the cubecart admin screen and pasted into excel) – and then used CONCATENATE to combine it all together.) This list will need to be udpated if/when they add more products/options.

Also in that javascript file I had the following function:
function changeProdImage() {
var prodoptions = document.getElementById("productionOpts");
var optionChoice = prodoptions.options[prodoptions.selectedIndex].value;
if (optionimages[optionChoice] && optionimages[optionChoice] != "") {
document.images.MainProdImage.src = optionimages[optionChoice];
document.getElementById("optionname").style.display="block";
document.getElementById("optionname").innerHTML = prodoptions.options[prodoptions.selectedIndex].text;
}
}

To get just the images for the options on the particular product page you're on, I added this function to that javascript file as well:
function preloadOptionImages() {
var prodoptions = document.getElementById("productionOpts");
var imagearray = new Array();
for (var i =0; i < prodoptions.options.length; i++) {
imagearray[i] = new Image();
imagearray[i].src = optionimages[i] ;
}
}

This javascript file gets included on the yourskin/styleTemplates/global/index.tpl file. Like this in the head section:
<script type="text/javascript" src="/js/options.js"></script>
(which assumes you have a directory in your root named "js" with this javascript file in it, and you have named it "options.js")

And on the yourskin/styleTemplates/content/viewProd.tpl, I added the following:

Where the select drop down box shows up like this:
<select name="productOptions[]" class="OptionsStyle">

I changed it to this:
<select name="productOptions[]" class="OptionsStyle" id="productionOpts" onchange="changeProdImage();">

And to have the "name" of the option displayed under the photo I have this:
<div id="optionname"></div>
And hide it until we start changing options by doing this in the stylesheet:
#optionname {
display: none;
text-align: center;
font-size: 14px;
font-weight: bold;
}

(that div will get populated with whatever text is shown in the options box… so if they select the option that says "red polka dots" – then it will switch out the main photo for whichever photo was associted with that option, and will display the text "red polka dots" underneath it.)

To get the image preloader going, I add the following somewhere on the product template page (yourskin/styleTemplates/content/viewProd.tpl) after the option select box:
<script type="text/javascript">
preloadOptionImages();
</script>

Here's a (static) example of the product/option/photo changer thigy™ lol!

Add text to Order Complete email
One of my clients wanted their terms and conditions included in the email that goes out when the order is complete.

In this file:
/classes/cart/order.php

after this:
$macroArray = array(
"PRODUCT_QUANTITY" => $this->orderInv[$i]['quantity'],
"PRODUCT_CODE" => $this->orderInv[$i]['productCode'],
"PRODUCT_PRICE" => priceFormat($this->orderInv[$i]['price'],true)
);
$text .= macroSub($lang['email']['order_breakdown_6'],$macroArray);
unset($macroArray);
}

That should end at about line 309. To add text to that email I added this
$text .= "ADDITIONAL TEXT GOES HERE, etc. etc. etc.";

Purchased Mods
A few mods I purchased in some cases:
Estelle's All In One Shipping Mod. This adds some functionality to the shipping options – allowing you to specify more zones, to a more detailed level than the one that comes default with CubeCart. (An additional note about that Mod Store. There was a small problem I had with the mod after installing it – I contacted the developer, got a quick reply and it was fixed within a day. A+ customer service and the mod was perfect!)

Another mod from Estelle – Stock Levels for Product Options. It makes no sense to me why this isn't built into CubeCart, but ok. This mod was a bit tricky to install, but as the instructions say "take it slow, and read the instructions carefully" and I was fine.

7 Responses to "Some CubeCart 4 minor mods (including select box image changer)"

1 | sterling | bizlift blog

February 7th, 2008 at 10:34 pm

Avatar

Thanks for sharing your CubeCart hacks! Just curious, what is your favorite cart so far?

I love OFBiz/Opentaps, but they're hardcore enterprise java and often overkill for many client's needs. I'm always looking out for simpler carts, but most of the php ones I've used are a jumbled mess of code.

Thanks!

2 | Tegan Snyder

July 14th, 2008 at 4:26 pm

Avatar

Thanks for sharing your hack for color changes based on option selections. This is actually what I've been looking for.

3 | Tegan Snyder

July 17th, 2008 at 2:34 pm

Avatar

Thanks for sharing. I took your idea a few steps farther.

http://www.cubecartforums.org/index.php?showtopic=5341

4 | Jody

November 23rd, 2008 at 3:41 am

Avatar

Hi there,

Do you happen to know of a shipping mod for CC4 that will allow me to have several flat rate shipping options? I do not need weight or post or zip codes or anything like that. Just the ability to give the customer the option of paying $15.00 or $25.00 depending on how fast they want their order delivered. Does such a thing exist for CC4?

Many thanks,
Jody

6 | Meir

January 21st, 2009 at 3:23 am

Avatar

Your "Stopping the Order canceled emails" comment was just what we needed. Thanks greatly!

7 | Julian Moore

October 30th, 2009 at 8:15 am

Avatar

We would like to have a flash movie that shows falling snow on either side (currently red) and I would like to know if you have tried to use a flash movie in the background of cubecart 4 site?

Thanks for everything you have published here, very helpful indeed.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements