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
1. Login to your Light CMS backend. Hover over the “My Website” link up top and click on “Designs”.
2. Hit the “My Designs” tab.
3. Click on the template design that you are using. (This will be noted with a check next to the name.)
4. Hit the “Edit” link, in between “Apply” and “Download”
5. Select the template from the list at left that you're going to have FoxyCart functionality on.
6. Follow the steps to add the FoxyCart code to your <head> section of the template. Make sure to change YOURDOMAIN to the appropriate subdomain.
7. Add the following code beneath the code you pasted in from the step above:
```

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

```
  Make sure you change the YOURDOMAIN to the appropriate store domain. This makes your “add to cart” links appear inside the FoxyBox/Thickbox overlay.
8. 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.

Adding a Donation Form to your Light CMS Product Pages

When adding a form to a product page on your Light CMS page, you will have a conflict. Light CMS adds an open form tag (<form>) after the opening <body> tag and a close form tag (</form>) before the closing </body> tag. Since this is added by Light CMS, if you attempt to add a form on your product page, you will have a conflict resulting in your form not working correctly.

What follows is a small bit of jQuery to allow you to use a text input element to allow a user-editable price field. This could be extremely useful for creating donation forms, for example.

Put the following code in the head of the template for which this product page uses (for FoxyCart v050 and prior), OR copy the code between the <script> tags and paste it into a new file on your own server and reference it there.

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
	// Set the event for all input[name=price] fields inside of div.form elements
	jQuery('div.form input[name=price]').change(function(){
		// Find and set the elements
		var this_form = jQuery(this).parent('div.form')[0];
		var this_link = jQuery(this_form).children('a')[0];
		var price = jQuery(this).val();
 
		// Strip out the $ in case the user adds it, and format it as a currency
		price = price.replace('$', '');
		price = parseFloat(price);
		price = fc_CurrencyFormatted(price);
		jQuery(this).val(price);
 
		// Replace the current price in the add-to-cart link with the newly entered price
		if (parseFloat(price)) {
			var this_href = jQuery(this_link).attr('href');
			var this_href_new = this_href.replace(/price=[0-9.]+/, 'price='+price);
			jQuery(this_link).attr('href', this_href_new);
		} else {
			alert('Please enter a numeric value for your donation.');
			return false;
		}
	});
});
</script>

On the actual product page itself, we will have to make some changes to the form code to “fake” this new form we're adding. (Change the YOURDOMAIN and TLD to whatever is appropriate for your own store.)
```
<div class="form">
	<input type="text" name="price" value="5.00" />
	<a href="https://YOURDOMAIN.FOXYCART.TLD/cart?name=Product Name&amp;price=5">Add to Cart</a>
</div>
```

If you compare the code above to the normal form used for Foxy Cart forms, you will notice a few things:

We have removed the opening and closing form tags (<form> and </form>) and replaced them with <div> tags.
We have given this “fake” form a class of “form” and not “foxycart” which is usually used.
The link inside the div.form doesn't require a class of foxycart.
You're not setting hidden input elements or a submit input button as you would with a form. Instead you're basically just using a standard link.

Caching and Customizing your Checkout Page

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

All LightCMS pages can actually be loaded https, which makes things work MUCH better, as it can avoid caching the dozen or so (fairly large) CSS and JavaScript files.
- Create a new template, and instead of calling your files using relative paths (like styles.css or /templates/styles.css) call them using a full path like https://example.publishpath.tld/Websites/path/to/things.ext
- Cache that new page/template with FoxyCart, and read the notes below.
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.
Save, then cache your page as normal (in the FoxyCart admin, described here).
Once it's cached you can copy the code out of what FoxyCart caches and go through and remove all the LightCMS specific javascript, since you really don't need any of that on your checkout. (It's mostly do deal with editing the page, which isn't going to happen for this particular page.)

If your checkout just hangs when you try to submit a transaction, you probably have an extra form tag. This happens about 75% of the time, and has to do with the underlying technology that LightCMS 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://YOURWEBSITE/checkouttemplate" id="frm" enctype="multipart/form-data">

and

</form>
</body>

Other Resources for LightCMS E-Commerce using FoxyCart

Forum post with alternate code, similar in theory to the above.