So here's the deal – if you have a form and an element in the form is named "submit" – if you try to call document.myform.submit() – you'll end up getting the "submit is not a function" javascript error. (Because to javascript – "submit" is now that object element in your form – not a function)

So the simple solution is if you plan on using the javascript function submit() – do not name any of your form elements "submit".

That's all well and good except if you're working on code that isn't completely yours – and if the PHP code to process the form is specifically looking for $_POST['submit'] like so:

if (isset($_POST['submit'])) { // process form }

then you now have another problem.

This was the case I ran into with CubeCart recently. Most of the forms do not require a submit element to be in the form in order to process it – but a handful did. The design I was working on needed all the buttons designed and to look the same. So my options were:

1) Just use the regular input type="submit" button on those forms. (Ok – but then the site is inconsistent)

2) search for all instances of (isset($_POST['submit']) in the code and change it to some other element I can add to the page… ie:

<input type="hidden" name="formsubmitted" />

and then in the code:

if (isset($_POST['formsubmitted'])) { // process form }

(Obviously this is not recommended in the case of CubeCart as it will make it really annoying to maintain/upgrade the cart!)

3) add that other "formsubmitted" element I noted above to the pages that need it – then towards the top of the MAIN index.php page (which is called with all pages on the store) add the following:

if (isset($_POST['formsubmitted'])) $_POST['submit'] = 1;

Thereby setting the value of $_POST['submit'] so it will process the form…

Another tip with using css-styled links for buttons that will submit forms in CubeCart – you don't need to use document.FORMNAME.submit() – from any form you can use their "submitDoc('FORMNAME')" function like so:

<a href="javascript:submitDoc('FORMNAME');" class="myButtonStyle">Send Form</a>

Just make sure the form has a name (some of them don't).

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

This has a small explanation on how to add PHP code to your template. For example – adding a date generated by PHP

And this one is really ironic. /cry
This mod (for a reasonable fee) would have solved my problem that I had with shipping last time I tried Cube Cart.

From the same people that made the shipping mod mentioned above:
This free mod will redirect the user to the shopping cart basket after they add a product.

Here's a mod to make CubeCart more SEO friendly (Haven't tried it, but thinking about it…)

If you're allowing users to ship product to addresses other than the address on file, you'll get a step where it wants you to specify the shipping address. If the user is NOT going to take advantage of this, it's kind of annoying – and I think probably you'll more likely want those users that want a different shipping address to take the step of clicking a line to change the shipping addres… this mod will skip that annoying step:
Do Not Force Step 3

*****************************************
I'll list below any mods I made myself:
**PLEASE NOTE – I strongly recommend you either make a backup copy of any file you edit and/or indicate in the file you're making changes where your change begins and ends using PHP comments.

If there is no text for a product – do not show just the "…" on the category page.
Open up viewCat.inc.php (found in the YOURSTORE/includes/content/ directory) and find this line:
$view_cat->assign("TXT_DESC",substr(strip_tags($productResults[$i]['description']),0,$config['productPrecis'])."…");
Replace with this:
if ($productResults[$i]['description'] == "") {
$view_cat->assign("TXT_DESC","");
} else {
$view_cat->assign("TXT_DESC",substr(strip_tags($productResults[$i]['description']),0,$config['productPrecis'])."…");
}

If there is no text for a product – do not show the "Product Information" header on the view product page
Open up viewProd.inc.php (found in the YOURSTORE/includes/content directory) and find this line:
$view_prod->assign("LANG_PRODINFO",$lang['front']['viewProd']['product_info']);
Replace with this:
if ($prodArray[0]['description'] == "" || $prodArray[0]['description'] == " ") {
$view_prod->assign("LANG_PRODINFO","");
} else {
$view_prod->assign("LANG_PRODINFO",$lang['front']['viewProd']['product_info']);
}

Make it so that you can pull in feature product descriptions on the home page
Open up index.inc.php (fround in the YOURSTORE/includes/content directory) and find this line:
$latestProducts = $db->select("SELECT productId, image, price, name, sale_price FROM ".$glob['dbprefix']."CubeCart_inventory WHERE `showFeatured` = 1 ORDER BY productId DESC LIMIT ".$config['noLatestProds']);
Replace with this:
$latestProducts = $db->select("SELECT productId, image, price, name, sale_price, description FROM ".$glob['dbprefix']."CubeCart_inventory WHERE `showFeatured` = 1 ORDER BY productId DESC LIMIT ".$config['noLatestProds']);
Then, locate this line:
$index->assign("VAL_PRODUCT_NAME",validHTML($latestProducts[$i]['name']));
and add this line below it:
$index->assign("TXT_DESC",strip_tags($latestProducts[$i]['description']));
Now you can use the {TXT_DESC} tag in your index.tpl template file (found in the YOURSTORE/skins/YOURSKIN/global/ directory)

Sort products on category page by product ID # (this ID is only shown in the Admin – this is NOT the same as the product code)
Open up viewcat.inc.php (found in YOURSTORE/includes/content directory) and find this line:
$productListQuery = "SELECT ".$glob['dbprefix']."CubeCart_cats_idx.cat_id, ".$glob['dbprefix']."CubeCart_cats_idx.productId, productCode, quantity, description, image, price, name, popularity, sale_price, stock_level, useStockLevel FROM ".$glob['dbprefix']."CubeCart_cats_idx INNER JOIN ".$glob['dbprefix']."CubeCart_inventory ON ".$glob['dbprefix']."CubeCart_cats_idx.productId = ".$glob['dbprefix']."CubeCart_inventory.productId WHERE ".$glob['dbprefix']."CubeCart_cats_idx.cat_id = ".$db->mySQLSafe($_GET['catId']);
Change it to this:
$productListQuery = "SELECT ".$glob['dbprefix']."CubeCart_cats_idx.cat_id, ".$glob['dbprefix']."CubeCart_cats_idx.productId, productCode, quantity, description, image, price, name, popularity, sale_price, stock_level, useStockLevel FROM ".$glob['dbprefix']."CubeCart_cats_idx INNER JOIN ".$glob['dbprefix']."CubeCart_inventory ON ".$glob['dbprefix']."CubeCart_cats_idx.productId = ".$glob['dbprefix']."CubeCart_inventory.productId WHERE ".$glob['dbprefix']."CubeCart_cats_idx.cat_id = ".$db->mySQLSafe($_GET['catId'])." ORDER BY ".$glob['dbprefix']."CubeCart_cats_idx.productId ASC";

**THIS POST IS A WORK IN PROGRESS – I WILL BE MAKING UPDATES OVER THE NEXT FEW DAYS – I'LL UPDATE THIS LINE WHEN I"M DONE** (See latest update below)

Disclaimers:
* I know there's a bunch of people that use Zen Cart and love it – more power to you. This is nothing against you personally – it just doesn't do it for me. It was pretty easy to install, but customizing the templates was a real pain in the ass for me and I personally never want to look at another Zen Cart template again. LOL

Update 7/8/07: After only a few days, the cart is running and the template is roughly 95% complete. I have some minor tweaks to do – but this took very little time overall. Now my 20/20 hindsight on CubeCart – it's GREAT for what I'm using it for – a few products, don't need a lot of features – and the cart is free (with the copyright on the bottom). If I was working on a larger store, I'd probably want something different that had more geek-knobs. (Of course, I'd still want them in a better admin-UI than Zen Cart had) There are quite a number of mods out there for Cube Cart – most of them seem to be pretty inexpensive, but I think some of the more expensive shopping carts still end up ahead in the feature-department.

Update 7/19/07: My CubeCart installation is all set now. There was one VERY large hack that I made that I still need to document and post here. The client wanted to accept donations through the store. There is no add on, or setting that I could find, that would make it so that the price field was "open" and user-determined. I did see two methods for taking donations: One was to set up "products" of specific donation amounts ($10, $20, $50, etc). The other was to set up a "$1" product, and ask users to enter the number of dollars of their donation in the "quantity" field. Both of these options, we felt, weren't terribly usable. So what I did was hack a number of pages to hide the fact that, for that particular (donation) "product", the quantity field was not in fact the quantity field, and made it look as if it was a "donation amount" field. It relied on the fact that there were no other "$1" products in the inventory – so if the product's price was $1 – it had to be the "donation" product. I also hacked the supporting pages, like the category page, cart page, to change how they looked as well to be consistent with how we were treating that product. It's A LOT of hacking. (Yes, I know this will make upgrades more difficult, but the client really really really wanted it this way)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.