type:
snippet
category:
Add to cart form
name:
Add products to the cart without Colorbox
versions:
0.7.0, 0.7.1, 0.7.2, 1.0, 1.1
reference:
http://forum.foxycart.com/comments.php?DiscussionID=4675&page=1
tags:
snippets, addtocart, json, form, advance
date:
2011-05-30

Add products to the cart without Colorbox

This script allows you to either add products to the cart silently through the JSON, or use a different javascript modal library instead of the default Colorbox modal. If you are adding products to the cart silently, we strongly recommend you provide some visual notification to your customers that the product has been added to the cart - perhaps with a link to view the cart in that small notification as well.

Step 1: Modify your FoxyCart includes

This step is only required if you have no need for Colorbox, or plan to use a different library to display the cart in.

From the Sample code section in the FoxyCart administration, you're given a FoxyCart includes file like this:

http://cdn.foxycart.com/YOURDOMAIN/foxycart.complete.js

To remove the loading of Colorbox, you'll want to change it to this (replacing YOURDOMAIN with your FoxyCart domain):

http://cdn.foxycart.com/YOURDOMAIN/foxycart.js

You can also remove the colorbox.css file, as it is no longer necessary.

Note that you still need to include jQuery, best copied from the Sample Code section of the FoxyCart administration for compatibility with your store version.

Step 2: Add the javascript

Example 1: Add to cart silently, view cart in Colorbox

This option requires Colorbox, so you do not need to complete step 1 as detailed above.

<script type="text/javascript">
jQuery(document).ready(function() {
  // Restart the process event collection object
  fcc.events.cart.process = new FC.client.event();
 
  // Define the new process event
  fcc.events.cart.process.add(function(e){
    var href = '';
    if (e.tagName == 'A') {
      href = e.href;
    } else if (e.tagName == 'FORM') {
      href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
    }
    if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
      return true;
    } else if (href.match("cart=view")) {
      jQuery.colorbox({
        href: href,
        iframe: true,
        width: colorbox_width,
        height: colorbox_height,
        close: colorbox_close,
        onClosed: function(){fcc.events.cart.postprocess.execute(e);}
      });
      return false;
    } else {
      // Add notification that product is being added here.
 
      jQuery.getJSON(href + '&output=json&callback=?', function(data){
        // Automatically update JSON and minicart helper objects
        fcc.cart_update();
 
        // Add notification that the product has successfully been added here.
 
      });
      return false;
    }
  });
});
</script>

Example 2: Add to cart silently, view cart in new window

Make sure you complete step 1 when using this option to save on load time for your page.

<script type="text/javascript">
jQuery(document).ready(function() {
  // Restart the process event collection object
  fcc.events.cart.process = new FC.client.event();
 
  // Define the new process event
  fcc.events.cart.process.add(function(e){
    var href = '';
    if (e.tagName == 'A') {
      href = e.href;
    } else if (e.tagName == 'FORM') {
      href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
    }
    if (href.match("cart=(checkout|updateinfo|view)") || href.match("redirect=")) {
      return true;
    } else {
      // Add notification that product is being added here.
 
      jQuery.getJSON(href + '&output=json&callback=?', function(data){
        // Automatically update JSON and minicart helper objects
        fcc.cart_update();
 
        // Add notification that the product has successfully been added here.
 
      });
      return false;
    }
  });
});
</script>

Example 3: Add to cart silently, view cart in a different modal window

Make sure you complete step 1 when using this option to save on load time for your page and also add in the includes for your own modal library. Note that as jQuery is already included as part of your FoxyCart includes, you do not need to include it again. Doing so will cause issues with your website.

<script type="text/javascript">
jQuery(document).ready(function() {
  // Restart the process event collection object
  fcc.events.cart.process = new FC.client.event();
 
  // Define the new process event
  fcc.events.cart.process.add(function(e){
    var href = '';
    if (e.tagName == 'A') {
      href = e.href;
    } else if (e.tagName == 'FORM') {
      href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
    }
    if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
      return true;
    } else if (href.match("cart=view")) {
      /* Add your own modal window display logic here. Make sure to include the following:
         URL to load in the modal: href
         Call the following if an onClosed callback is available: fcc.events.cart.postprocess.execute(e)
      */
      *
      return false;
    } else {
      // Add notification that product is being added here.
 
      jQuery.getJSON(href + '&output=json&callback=?', function(data){
        // Automatically update JSON and minicart helper objects
        fcc.cart_update();
 
        // Add notification that the product has successfully been added here.
 
      });
      return false;
    }
  });
});
</script>

Example 4: Add to cart and view cart using a different modal window

Make sure you complete step 1 when using this option to save on load time for your page and also add in the includes for your own modal library. Note that as jQuery is already included as part of your FoxyCart includes, you do not need to include it again. Doing so will cause issues with your website.

<script type="text/javascript">
jQuery(document).ready(function() {
  // Restart the process event collection object
  fcc.events.cart.process = new FC.client.event();
 
  // Define the new process event
  fcc.events.cart.process.add(function(e){
    var href = '';
    if (e.tagName == 'A') {
      href = e.href;
    } else if (e.tagName == 'FORM') {
      href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
    }
    if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
      return true;
    } else {
      /* Add your own modal window display logic here. Make sure to include the following:
         We suggest using an iFrame in your modal of choice if the option is available.
         URL to load in the iFrame: href
         Call the following in the onClosed callback function if it is available: fcc.events.cart.postprocess.execute(e)
      */
      *
      return false;
    }
  });
});
</script>

Site Tools