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.