CapitaList

CapitaList is a set of tools and a plugin that together produce virtual pages to work with the Cart66 shopping cart/eCommerce plugin.

You start by creating your inventory of products and categories, by building a directory tree.  Every branch of the tree is a category; every leaf of the tree is a product.  If you have pictures of your products, you put them into the appropriate directories in the tree, and if you have descriptions, prices, size options and other information, you put them into specifically named text files, making sure that each product and category has a unique ID number.  You do all this using familiar tools: Notepad and Explorer, or whatever your preferred equivalents are.

When you’re ready to generate a store, you use the cartmaker script.  This extracts out the relevant information from your directory tree and produces files that the CapitaList plugin can use.

[Note: at the moment, the cartmaker script is separate from the plugin. Eventually it will be packaged as part of the whole process, but that would require more time than I have for limited return.  For now, you upload your directory by zipping it up and emailing it to me, and I run the script on the server. This necessarily ties CapitaList to my server or a server that I have access to; that will improve before version 1.0 is released.]

URLs in the form store/id will call up the given product or category.  Even if you move your products around into different categories, the IDs will still work, but from the user’s point of view it all works as a hierarchy of categories and products.

Directory Tree Structure

Every category has its own directory, containing the following files:

  • description.html: the plain HTML that will appear as the category description.
  • inventory.ini: a settings file (see below) containing the ID number and human-readable name for the category.
  • NN-imagename.full.jpg: optionally, any number of images for the category. If you have more than one, they will appear as a scrollable gallery. The numbers start counting at 01, and the imagename can be anything you like (it’s just there to help you keep track).
  • NN-imagename.square.jpg: optionally, a cropped version of the full image that will be used to make a square thumbnail.  If no .square.jpg image exists, your thumbnails are extracted from a square section of the .full.jpg image.
  • NN-imagename.caption.html: optionally for each image, a plain HTML caption.
  • NN-imagename.title.text: optionally for each image, a plain text title.
  • All the subdirectories for other categories or products.

Every product has the same layout, except it doesn’t have subdirectories.

Inventory File Format

An inventory.ini file has the following format:

[inventory]
ID=The ID number of the product or category
Type=Product or Category, as appropriate
Name=A human-readable name for the category or product
Price=(Products only) The price of the product

[sizes] (Products only)
1=X Small
2=Small
3=Medium
etc, as appropriate

[X Small]
Premium=The amount to add to the price for this size
Quantity=Either -1 if you're not tracking inventory, or else the number of items on hand

... Repeating the above for each listed size.

Directory Names

As a general rule, the names you give the files and directories don’t matter, apart from the “inventory.ini”, “description.html” and the use of the suffixes “.full.jpg”, “.caption.html” and “.title.txt”.  You can pick any names you like, but they do have one effect: they change the order that individual items appear in their lists.  For example, if your category “Stuff” contains three product directories “this”, “that” and “the-other”, they will display on the web store as “That”, “The Other” and “This”, in that order. If you want to change their order, rename them to something like “1-this”, “2-that” and “3-the-other”.  The actual name is taken from the Name entry in the inventory.ini file, not from the name of the directory, so this will have no effect on how your products appear.  This gives you the freedom to rearrange things how you like just using a bit of drag and drop.