Ecommerce for Light CMS

About Light CMS

LightCMS is a content management system for web designers. Design sites, upload them to our content management system, and deploy world-class websites your clients can manage themselves.

Getting Started

Assumptions:

We're going to assume that you know at least a little bit about Light. If you don't, please check out their wonderful support to familiarize yourself with it.

Setup your FoxyCart account first, as described here.

Setup your Light site

Login to your Light CMS backend. Hover over the “My Website” link up top and click on “Designs”.
Hit the “My Designs” tab.
Hit the “Edit” link, in between “Apply” and “Download”
Select the template from the list at left that you're going to have FoxyCart functionality on.
Follow the steps to add the FoxyCart code to your <head> section of the template. Make sure to change YOURDOMAIN to the appropriate subdomain.

Add the following code beneath the code you pasted in from the step above:

<!-- BEGIN FOXYCART + LIGHTCMS CODE -->
<script type="text/javascript" charset="utf-8">
	$j(document).ready(function(){
		// Unbind any elements that already have the foxybox event
		$j('a.foxycart').unbind('click');
		// Re-bind links, including links generated by Light's link tool
		fc_tb_init('a[@href*=YOURDOMAIN.foxycart.com]');
	});
</script>
<!-- END FOXYCART + LIGHTCMS CODE -->

Make sure you change the YOURDOMAIN to the appropriate store domain. This makes your “add to cart” links appear inside the FoxyBox/Thickbox overlay.

Repeat steps 4-6 above for all templates that will have FoxyCart functionality, including sitewide “View Cart”/“Checkout” links or a persistent “mini-cart” that displays the cart quantity and sub-total.

Create your “Add to Cart” Links
1. Navigate to the page you'd like to create an “Add to Cart” link on.
2. Click the “Add Element” button where you'd like the link to go.
3. Change the element type to “Files & Links” and click “Add” next to it.
4. A link section will now appear. Hover over it and click the “Add Link” link.
5. For the “Link name”, enter whatever text you'd like. Maybe something like “Add to Cart!”
6. For the “Link type”, leave it on “URL” and enter a URL like this: https://YOURDOMAIN.foxycart.com/cart?name=A Red Baloon&price=9.99
  - Make sure to change YOURDOMAIN to your store's subdomain.
Test.

Caching and Customizing your Checkout Page

The basic idea is covered here, but there are a few Light CMS specific considerations:

Set the checkout template page to not show in the menu.
1. While logged in, navigate to the page you're using for your checkout template.
2. Click the “Page Settings” link up top, then click the “Advanced” tab.
3. Check the “Hidden” checkbox under “Advanced Settings”.
4. You may wish to include the checkout specific CSS files in the “Additional Header” section there, rather than modifying a template for it.
5. You might also want to explicitly set your favicon, as described here.
6. Save, then cache your page as normal (in the FoxyCart admin, described here).

If your checkout just hangs when you hit the “checkout” button, you probably have an extra form tag. This happens about 75% of the time, and has to do with the underlying technology that Light uses. Read below for the fix.

You'll need to manually remove the form tag that follows the opening body tag:

<body><form name="frm" method="post" action="http://auxano.com/checkouttemplate" id="frm" enctype="multipart/form-data">

and

</form>
</body>