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.
Nearly every piece of HTML that FoxyCart presents to your customers is configurable in a template for your store. There are individual templates for:
While you can certainly use the default templates, we will see just how easy it is to use your own site's design for your FoxyCart templates.
If you don't want to bother with the technical details yet, take four and a half minutes to watch an explanation of AutoMagiCache in action. (Thanks to our good friend at My619.com for the screencast.)
cartplaceholder before the
checkoutplaceholder, but you don't need to display the
carton your checkout page if you don't want to. (It's probably a good idea though.)
<link rel="stylesheet" href="https://^^store_domain^^/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="https://^^store_domain^^/themes/text/styles.css" type="text/css" media="screen" charset="utf-8" />
What follows is a brief recommended approach to advanced template customizations, followed by a two part screencast series illustrating the technique.
This tutorial requires:
foxycart.comwill automatically be updated when you change versions.
Watch the screencasts below to see this approach in action. Even if you're a CSS Ninja, you may pick up a trick or two. And if you have additional tips or tricks feel free to add a comment. (This is a publicly editable wiki because we value the feedback of our users.) Click the links below to load the video.
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:
Please note that this will only work on your cart, checkout, and receipt pages. Again, this is done automatically if you cache your template using AutoMagiCache, so you only need to do this if you're not caching your template.
As of v0.7.0/v0.7.1, there are two included themes.
*.gif) to use FoxyCart image caching.
\/\/when not preceded by a space or line break.
<img>paths to use FoxyCart image caching.
<a>paths to point to the correct locations.
<form>actions to point to correct locations.
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>.
swffile, there's no good way to ensure that additional necessary files (like
flv, etc.) are cached along with the
../foo/bar.ext) more than one level deep are not supported.
../foo/bar.extwill work, but
../../foo/bar.extwill not. If you have a legitimate need for more than one level deep, let us know.
@IMPORTrules more than one level deep are not supported. An import will work just fine, but an import inside an import won't be cached. If you have a legitimate need for more than one level deep, let us know.
For some reason, Firefox and Internet Explorer may have problems when you have the ampersand (”&”) character inside of code comments:
<!-- Some text & more -->
This issue may be related to your doctype, so if you encounter this please let us know.
The following placeholders will be replaced with “spaced” placeholders in cached CSS and JS, to prevent problems with parsing placeholders that shouldn't be parsed.
^^ cart ^^
^^ checkout ^^
^^ receipt ^^
^^ analytics_google ^^