====== The Cart of The Foxy ======
===== What Is The Cart? =====
The "cart" in "FoxyCart" is where [[.:products|your products]] are stored for each visitor to your website. The cart itself is highly flexible, and can be loaded as HTML or as [[.:advanced:json|JSON]], allowing for unlimited customization potential.
When we say "the cart" we will generally be referring to the cart when it is loaded by itself, but a representation of the cart is also usually included on [[.:checkout|the checkout]], [[.:receipt|the receipt]], and [[.:emails|email receipts]]. When the cart is included in those sections it is static, only displaying its current contents. When you're interacting with it directly is where you'll see it in action.
===== The Standard (HTML) Cart Implementation =====
The default approach to the cart is to display it as HTML inside an iframe, loaded in an excellent jQuery-powered modal window script, [[http://colorpowered.com/colorbox/|Colorbox]]. Using the "standard" theme it looks something like this:
{{:v:0.7.0:cart.standard.png?direct&400 |The FoxyCart cart as HTML in an iframe, in a Colorbox-generated modal window}}
There are a few things to notice here:
* Products, including all product options, quantities, and prices. Product thumbnails, if configured, are also displayed.
* Quantity fields allow for modifying the quantity of products in the cart.
* "X" links to remove the product from the cart.
* A link to checkout using [[:gateways:paypal:express_checkout|PayPal Express Checkout]], if configured for the store.
* A link to checkout normally, if a gateway is configured for the store.
* A link to continue shopping.
* A link to update, which is disabled and 50% transparent until a change is made to the cart (ie. a quantity is modified), in which case it transitions to 100% opaque while the checkout links fade to 50% transparent.
* A link to add a coupon code, //if active coupon codes exist for the store//. (Otherwise this link will not be shown, as studies have shown that they can decrease conversion rates. Potential customers may leave your site to search for a coupon code, where they may become distracted or find a competitor.)
* A subtotal and order total.
It's important to note that though this is what the FoxyCart-powered cart will look like by default, you can customize nearly every aspect to fit your specific needs.
===== Customizing Your Cart =====
Customizing the HTML version of your cart (as opposed to a [[#advanced_jsonp_cart_implementations|JSON-based approach]]) is basically identical to [[.:templates|customizing any other FoxyCart template]], except that the cart by default loads in an //iframe//, which can be quite tricky to understand at first. The issue is that the default cart display (in the modal window) is actually two separate pieces:
- The HTML generated that’s part of your site's '''', which is where the "continue shopping" or "x" link is (to close the modal window).
- The cart itself in an ''iframe'', inside the modal window. This is an entirely separate HTML page, and thus cannot be styled by the parent frame’s CSS.
So, if you want to customize the cart itself, you need to add your new CSS to the cart template (as pasted in or cached in the FoxyCart admin). If you want to customize the "framing" of the modal window, that'd happen on your site, and not in the cart template in the FoxyCart admin. To get a feel for which is which, either use Firebug's DOM inspector, or right-click on the cart and view the frame in a new tab.
==== Customizing the Default Cart's Colorbox ====
As mentioned above, FoxyCart uses [[http://colorpowered.com/colorbox/|Colorbox]], a very nice and flexible modal window script for jQuery, as the default modal window for FoxyCart's cart display. While you don't have to use Colorbox (and can indeed use any other modal window script or other method to display the cart), we provide some tips for quick customizations to Colorbox below.
=== Changing the Style ===
Colorbox includes five default styles by default, and we've added a modification of ''style1'' to handle the "continue shopping" link. FoxyCart defaults to ''style1_fc'', but you can replace that with any number one through five (ie. ''style2'', ''style3'', etc.) to try different themes. You can see demos of these themes at [[http://colorpowered.com/colorbox/|the Colorbox site]]. So to try different themes you'd just change the ''style1_fc'' in your stylesheet '''' tag:
=== Changing the Size ===
By default, FoxyCart sets the size of the Colorbox to 70% of the browser's width and height. If you'd like to set this to bigger or smaller or explicit pixel values you can do so like this (using example values):
Just put that before your ''foxycart.complete.js'' call.
===== Interacting With the Cart =====
==== Adding Products to the Cart ====
Adding products to your cart is discussed in the [[.:products|products]] documentation.
==== Viewing the Cart ====
If you'd just like to load the cart without adding a product to it (ie. a "View Cart" button), you'd link to the cart like you were adding a product, but just include the ''cart=view'' option instead of any product options. This is discussed below in [[#non-product_cart_parameters|non-product cart parameters]].
==== The Persistent "Mini-Cart" ====
Though you can get more advanced with [[.:advanced:json|the JSON cart interaction]], FoxyCart's default javascript provides easy helper functions to [[.:advanced:javascript#mini-cart_display_and_html_helper_functionality|create a persistent "mini-cart"]].
==== Bypassing Your Cart ====
There are a handful of reasons that you might want bypass the cart entirely and proceed either directly to your checkout, or somewhere else. For example, if you're selling just a single product, or a single conference registration, you might want to both empty the cart on a new product being added to the cart and then proceed directly to checkout. Or you may want to add the product to the cart but then redirect to an upsell page. A variety of options are available in this regard. Check the [[#non-product_cart_parameters|cart parameters]] section below for details.
==== Advanced (JSONP) Cart Implementations ====
If you've yawned at all of the above details about customization, if you need a highly specific cart display, or if you need to interact with the cart programmatically like via server-side programming or Flash, then the cart's JSON and JSONP functionality will be of interest. [[.:advanced:json|More details are here.]]
===== Non-Product Cart Parameters =====
{{section>.:cheat_sheet#transaction_non-product_specific_options&noheader&noeditbutton&permalink&footer&nodate}}