====== Getting Started with FoxyCart! ======

How to get your website's store set up to work with FoxyCart.


===== Add the Required JavaScript and CSS =====

For a nice and quick FoxyCart implementation, insert the code from "Step 1" of the ''sample code'' section of your FoxyCart admin into the head section of your webpage, after any other CSS or javascript tags you might have.

<wrap important>jQuery is already loaded when you copy/paste the "Sample Code"</wrap>, and if you include jQuery again the default Colorbox-style cart //will break//, and your cart will not load in the modal window at all. To ensure this isn't the case, follow these simple steps:

  - View your site //as it is output// in the browser. In other words, load the site itself, and not your templates.
  - View the source.
  - Do a "find" on the source for "''jquery''". You should see it once inside the ''<!-- BEGIN FOXYCART CODE -->'' block. You may see it elsewhere also.
    * If you see any files like ''validation.jquery.js'', ''jquery.accordion.js'', or anything similar, those are //plugins// and can remain.
    * If you see any files like ''jquery.js'', ''jquery.js?m=1273512554g&amp;ver=1.3.2'', ''jquery-1.4.2.min.js'', or anything //similar//, find out where those ''<script />'' tags are being inserted, and remove them. Reload your page and view the source to ensure they're all gone.
    * If you cannot remove calls to ''jquery.js'', make sure you move your ''<!-- BEGIN FOXYCART CODE -->'' block //after// any other jQuery calls.
  - Test.
  - Test again.
  - If you need help, please [[http://forum.foxycart.com/|ask in our forum]].
===== 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.: <a href="blah">Link Text</a>)
To make this a FoxyCart link you'll need to create a link with an ''href'' pointing to your FoxyCart domain:
''http://YOURSUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE''

In this example, ''YOURSUBDOMAIN'' is the value you entered as your store subdomain.

''ITEMNAME'' is, of course, the name you would like the cart to display for your item.

<code>
<a href="http://YOURSUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE">Add to Cart</a>
</code>



===== 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:

<code html>
    <!-- BEGIN FOXYCART FILES -->
    <link rel="stylesheet" href="https://YOURSUBDOMAIN.foxycart.com/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->
</code>

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:
<code html>
    <!-- BEGIN FOXYCART FILES -->
    <link rel="stylesheet" href="https://YOURDOMAIN.foxycart.com/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->

    <!-- Override FoxyCart CSS with your own stylesheet: -->
    <link rel="stylesheet" href="https://www.your-domain.com/path/to/your.css" type="text/css" media="screen" charset="utf-8" />
</code>