Documentation You are here: start » integration » light_cms

Table of Contents

type:
integration
system:
LightCMS
name:
LightCMS Tutorial
description:
A tutorial for integrating FoxyCart with LightCMS sites
tag:
cms, tutorial

Ecommerce for Light CMS

Please note: The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please post in our forum, but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.

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.
  1. Setup your FoxyCart account first, as described here.
  2. 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: 
      <!-- BEGIN FOXYCART + LIGHTCMS CODE -->
<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>
<!-- 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.

    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.
  3. 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.
  4. Test.

Using "Add to Cart" Forms in your Light CMS pages

Please see the instructions on faking forms using javascript.

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.

  1. 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>
  2. 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.
  • 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

Page Tools

Site Tools