Creating A Custom eCommerce Theme in CoreCommerce

CoreCommerce is my favorite eCommerce software to work with simply because it’s easy to develop under. They host the site for you, so you don’t have to worry about hosting, installation or issues. The admin area is easy for both the client and developer to learn, and the FTP area is clean and organized.

I’ve been seriously contemplating writing a book on CoreCommerce theming, but until then, I’ve decided to write up a long tutorial on how to get started with your own themes.

Logging into the Admin

The admin area of CoreCommerce is pretty easy to understand, especially if you’re already used to CMS’s like WordPress or Drupal.

The tabbed navigation houses pretty much everything you’ll need to worry about, as clients will often set up the basics of the store themselves (shipping, products, etc).

To find your FTP information, simply hover over the Account links in the right hand menu and select ‘FTP’, which will give you the username, password and server you’ll need to login. Therefor, when doing this for a client, all you’ll ever need to get started is the main admin login!

The FTP

The file structure of CoreCommerce is laid out nicely and is sparse enough so you never get lost. Upon logging in, your taken to the main file structure for you site only.

Upon logging in, you’ll see that the FTP contains folders with numbers at the top, and several other folders labeled “images”, “templates”, etc. The only confusing part of the FTP, is that you don’t use any of the folders, except for the folders with numbers on them. These folders are themes that the client has installed, and it’s best to start from those when coding, as they contain styles for many parts of the site we often forget about (like the Customer Account area). In the example to the right, my client had installed four different themes, but decided to go with theme 00210-1, as it was the closest in design and colors to the template I would be coding for them (they do this from the admin area and it copies the theme to the FTP).

Inside of the 00210-1 folder (our theme number remember?), we see just two folders, labeled “design” and “templates”. Inside of the design folder, you’ll find folders for the CSS and images, and inside of the templates folder, is where we’ll be able to edit the actual site.

Templates

CoreCommerce works similar to other templated CMS sites, where you’ve got a header and footer file, except there are a few key differences. CoreCommerce has two header files, one named header.tem.php for most of the site, and another labeled secure.header.temp.php for the SSL sections of the site.

One major restriction in CoreCommerce, is that you can’t edit the HTML or PHP in the center of the page, you can only edit the header and footers files except for the product detail page (more on that below). While this seems like a huge restriction, thanks to both CSS and CoreCommerce’s settings page, it’s actually not that restrictive.

Header/Footer Files

The header and footer files look pretty much similar to any other header or footer files. The most important part of these files are some of CoreCommerce’s code that you’ll want to take note of.

For example, customers often wait until the store is finished before transferring their domain. so you never want to use a relative path or use the temporary address as the path. Instead, you’ll used CoreCommerce’s site url call:

<?php if ($config) { echo $config->getValue('merchantURL'); } ?>

This will grab the store’s URL, even if it changes. You use it inside of the url like so:

<?php if ($config) { echo $config->getValue('merchantURL'); } ?>/shopping-cart.php

Really the only difference between header.tem.php and secure.header.tem.php is the use of these URLs, the URL call needs to be changed for all images and links in the secure file, so you would changed the call to:

<?php if ($config) { echo $config->getValue('secureURL'); } ?>

You’ll also need to add the “premium” folder name to the url after the secureURL call. this enables the template to pull from your normal images folder without any SSL errors. And you don’t have to worry about SSL or moving images anywhere else Here what an image URL would look like in the secure header:

<img src="<?php if ($config) { echo $config->getValue('secureURL'); } ?>/premium/00210-1/design/images/image.jpg"/>

For the information in the header file, it’s best to leave everything in between the head tags alone. I do tend to remove the IE stylesheet calls and instead of removing the CSS for the current theme you’re building off of, I start my own custom.css stylesheet and go from there. It’s simply too much a pain to redo everything in the cart, and a lot of pages you’ll never be able to see until people start using the cart. This is especially important because most clients will only give you the design for the homepage, category page and possibly the product detail page.

Also, be sure to leave all the PHP file includes in the head tags alone, otherwise you’ll break the cart. Everything after the body tags is fair game to be deleted if you’d like 🙂

Admin Settings

In the admin area, the “Design”, “Inventory”, and “Site Content” tabs are your best friends. From there, you can change the types of layouts, styles, grid numbers and more for the site’s layout. This allows you to do several things that are impossible from the backend, due to the restriction of being able to mess with the center of the site’s code.

Here are some of the things I’ve been able to use the design area for:

  • Change the category grid to display 2, 3, or 4 products across
  • Change the category widget in the sidebar to show or hide subcategories
  • Hide or show buttons
  • Upload custom button images
  • Drag and drop widgets in the left and/or right sidebars
  • Control how add to cart works

There are a ton of settings you can mess with in these three sections, so make sure you spend some time figuring out what each one does.

Product Details Template

Like I mentioned above, you can’t edit any of the content between the header and footer files in CoreCommerce, except for the Product Detail page. Not sure why this is so, but it is.

To edit the product detail template, there are 3 different ways of going about it, depending on how deep into the code you want to get.

If you just want to switch the layout from one side to another, you just need to navigate to the “Design” tab and click on template layouts. From here, click on the manage link next to Product Detail. You’ll now be presented with several layout options.

You can either choose one of the layout options, activate it and leave it at that. But if you’re wanting to do a bit more, go ahead and click on “copy” for the layout that looks similar to the one you want to use.

You’ll be shown the HTML of the product detail page, along with what CoreCommerce calls “tokens”. These are basically functions wrapped with a pound symbol that you can copy, paste and move around the template. For example, the SKU token is simply:

##SKU##

If you’re like me, you really want to geek out in the product detail template’s code and see all of the actual PHP. This is easy to do for those of us who know the secret ;).

In order to edit the actual PHP (and be able to download it to your editor), simply give the custom template a name (the one we copied from the previous step) and save it. Activate it from the menu that shows all of the layouts and save again.

In your FTP, go back out into the top level that showed all of the numbered theme folders. Click on the templates folder, then layouts and voila! Your product detail template should be contained inside. Here you can do some real damage as you can edit and remove any or all of the PHP contained inside, so be forewarned and keep a backup!

Tips and Tricks

Display things on certain pages only
Clients never want the same thing on every page, and with CoreCommerce, it’s tough to be able to control this, since you really don’t have much control over anything between the header and footer. For example, what if the client wants to show the categories in the side bar for every page but the homepage? Conditional comments are a lifesaver.

To target only the homepage:

<?php if(!$cmd || ($cmd == CART_DEFAULT_CMD)) ?>

To target only the view cart page:

<?php if (($cmd == VIEW_CART_CMD));?>

To target a specific page ID (for the pages created under the “Site Content” tab (this example uses page ID 12)

<?php if(CONTENT == $cmd){ if($pc->getId() == 12) { ?>

Including files

There are also several files you can include into the header, footer, or product detail templates:

Search box

<?php include('templates/cart.categories.tem.php'); ?>

Categories widgets

<?php include('templates/cart.search.tem.php'); ?>

A full list of includes can be found in the admin area under the “Site Content” tab, click on “Manage Widget Settings” and then on “Widget List”

Styling all of the pages together
CoreCommerce gives a unique ID to every main container on each page type. Unfortunately, that means there’s really no way to style all of the pages together, and I often had to go through each page to grab their ID just to give it the same container styles. However, if you wrap the containers together, by starting a div in the header and end it in the footer, you’ll have a much easier time of styling everything together.

Your Questions

If you’re thinking of getting into CoreCommerce development and still have some questions, let me know in the comments are and I’ll do my best to answer them 🙂