====== Getting Started with FoxyCart! ======
How to get your website's store set up to work with FoxyCart.
===== Add the Cart Code =====
For a nice and quick FoxyCart implementation, insert the following code into the head section of your webpage, after any other CSS or javascript tags you might have.
If you'd like to use the default theme, you'll need one additional file. This is to style the elements of the foxybox that are not in the iframe (specifically, the close and the continue shopping links).
==== Important Notes: ====
* When linking to any file on foxycart.com, you //must// call the files using your store's subdomain. So, if you're calling ''/files/foxycart_includes.js'', you //must// call it at ''https://YOURDOMAIN.foxycart.com/files/foxycart_includes.js''. This is because of the way FoxyCart serves these files, which is dependent on the version of FoxyCart you're using.
* Please note that this standard configuration uses John Resig's excellent [[http://jquery.com/|jQuery]] and a slightly modified version of Cody Lindley's [[http://jquery.com/demo/thickbox/|Thickbox]] (which we call FoxyBox). If you're using another javascript library, or if you're already calling jQuery elsewhere in your template you'll want to remove it. If you prefer to use another library, you should use whatever "Thickbox" (modal window) equivalent is available.
** If you'd prefer additional control over these elements, feel free to download the files to your own server and edit them. Or grab the latest versions of [[http://jquery.com/|jQuery]] and [[http://jquery.com/demo/thickbox/|Thickbox]] and go from there.
===== Add Your Cart Links =====
Products are added to your customer's cart using "add to cart links" that you create.
Create your FoxyCart links the same as you would create any HTML link (e.g.: Link Text)
To make this a FoxyCart link, add the class "foxycart" and create the href with this format:
''http://SUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE''
In this example, SUBDOMAIN is the value you entered as your store subdomain.
ITEMNAME is, of course, the name you would like the cart to display for you item. For spaces, use "%20". For example, if I want my item to be "Book About Cats," I would use the ITEMNAME Book%20About%Cats
Important: Be sure to add the class “foxycart” to any “Add to Cart” links you have created. That’s it!
===== Style Your Checkout Page =====
Though you don't need to, it may save you time to use one of our default styles in your checkout template.
To use one of our default stylesheets as a starting point, simply add the following calls into the head section of your template:
You can then easily create an additional stylesheet of your own to override the styles in ''default.checkout.css'', or you can just copy the contents of ''default.checkout.css'' into your own stylesheet, edit as desired, and skip the FoxyCart CSS altogether.
So your code might look like this: