Setting up your Checkout Template

Setting up a customized checkout template in FoxyCart is about as easy as it can get, thanks to AutoMagiCache. But it's also radically different than you're probably expecting. Here's a quick guide to setting up your template to seamlessly integrate FoxyCart into your existing site design.

The idea here is that you're going to create a page on your site with “placeholders” where the FoxyCart functionality will go. You should know enough HTML and CSS to be comfortable editing code in order to make this happen, though if you're still learning and are using a WYSIWYG like Dreamweaver the basic ideas still apply. Once this page is created and uploaded/published on your site, you'll enter that URL into your FoxyCart admin, and FoxyCart will grab your code, work some magic (seriously), you'll be good to go.

The HTML on the cart, checkout, and receipt pages is fairly substantial. There are methods to

AutoMagiCache is robust, but there are situations where it will break. Please review the limitations before you continue. If you find a bug, please report it.

If for some reason you don't want to use AutoMagiCache to do things automatically, you can securely cache your http images on our server (https) by calling them like this:

https://YOURDOMAIN.foxycart.com/cache.php?url=http://example.com/path/to/image.gif

Please note that this will only work on your cart, checkout, and receipt pages. This is done automatically if you cache your template as described below, but if you need to hardcode it, that's what it is.

1. Create a page on your site that has the following placeholders. These should be placed where you'd like your checkout and cart to go. If you'd like to use one of the “default” styles, you'll want to put the cart placeholder before the checkout placeholder, but you don't need to display the cart on your checkout page if you don't want to. (It's probably a good idea though.)
   • ^^cart^^
   • ^^checkout^^
2. If you'd like to use one of the default styles, add the following CSS calls right above your closing </head> tag:
   • For the “standard” red/black theme, as seen here, use this code: \\

     <link rel="stylesheet" href="https://^^store_domain^^/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />

   • For a stripped down, text only style (which is very useful as a starting point for customizing), use this: \\

     <link rel="stylesheet" href="https://^^store_domain^^/themes/text/styles.css" type="text/css" media="screen" charset="utf-8" />

3. Upload/publish that page to your server (at a publicly accessible URL).
4. Login to your FoxyCart admin.
   1. Enter that URL into your FoxyCart admin (on the Templates → Checkout page).
   2. Hit the “cache your url” button.
   3. Hit the “update template” button at the bottom of the page after the page has reloaded and you've received the green success box. If you'd like, you can copy the cached code and review/modify it (though if you have to modify it, it's probably a bug that we'd love to fix if you let us know).
5. Test your template. Try something like this to go directly to checkout: http://YOURDOMAIN.foxycart.com/cart?name=blah&price=10&cart=checkout

1. Follow the steps above just to get familiar with things.
2. Create a new CSS file to override the theme file described above. Make sure your new CSS file is included after the theme file. This is important, since any file on foxycart.com will automatically be updated when you change versions.
3. Use Firebug and the Web Developer Toolbar's live CSS editing to override the necessary styles. For example, if you want to change a background image, just include that line. Don't include any of the padding or anything, as it could make upgrading more difficult.
   • It might make sense not to cache your template while you develop, as it's a much slower process. Rather, just ignore the security warnings during development, but make sure you re-enable them once you're cached and ready for final testing.
4. Once everything is as it should be, recache your template and test again.
5. Have some friends test, just to be on the safe side. * Unordered List Item