Documentation You are here: start » v » 0.6.0 » getting_started » site_setup

Table of Contents

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, all you need to do is copy three lines of code from the 'Sample Code' section your stores FoxyCart administration. Simply copy the code presented in step 1 into the <head> section of your page's markup, after any CSS and before any javascript files you've included yourself.

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 jQuery and a slightly modified version of Cody Lindley's 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 jQuery and Thickbox and go from there.

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, 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 your item. For spaces, use “%20”. For example, if you want your item to be “Book About Cats”, you would use Book%20About%20Cats.

Important: Be sure to add the class foxycart to any “Add to Cart” links you have created. That’s it! 

<a href="http://SUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE" class="foxycart">

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: 

    <!-- 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 -->

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: 

    <!-- 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" />

Page Tools

Site Tools