Table of Contents
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>