Table of Contents
- LightCMS Tutorial
- A tutorial for integrating FoxyCart with LightCMS sites
- 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.
- 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.
- Click on the template design that you are using. (This will be noted with a check next to the name.)
- 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
YOURDOMAINto the appropriate subdomain.
- Add the following code beneath the code you pasted in from the step above:
Make sure you change the
YOURDOMAINto 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
- Navigate to the page you'd like to create an “Add to Cart” link on.
- Click the “Add Element” button where you'd like the link to go.
- Change the element type to “Files & Links” and click “Add” next to it.
- A link section will now appear. Hover over it and click the “Add Link” link.
- For the “Link name”, enter whatever text you'd like. Maybe something like “Add to Cart!”
- 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
YOURDOMAINto your store's subdomain.
Using "Add to Cart" Forms in your Light CMS pages
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.
- 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.)
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 replaced them with
- We have given this “fake” form a class of “form” and not “foxycart” which is usually used.
- The link inside the
div.formdoesn't require a class of
- You're not setting hidden
inputelements or a submit
inputbutton 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
- Create a new template, and instead of calling your files using relative paths (like
/templates/styles.css) call them using a full path like
- Cache that new page/template with FoxyCart, and read the notes below.
- Set the checkout template page to not show in the menu.
- While logged in, navigate to the page you're using for your checkout template.
- Click the “Page Settings” link up top, then click the “Advanced” tab.
- Check the “Hidden” checkbox under “Advanced Settings”.
- You may wish to include the checkout specific CSS files in the “Additional Header” section there, rather than modifying a template for it.
- 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).
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">
Other Resources for LightCMS E-Commerce using FoxyCart
- Forum post with alternate code, similar in theory to the above.