| Next revision | Previous revision |
| v:0.7.2:javascript [2011/10/29 15:34] – external edit 127.0.0.1 | v:0.7.2:javascript [2017/04/26 07:02] (current) – external edit 127.0.0.1 |
|---|
| |
| ===== Available Files ===== | ===== Available Files ===== |
| * ''http://cdn.foxycart.tld/YOURDOMAIN/foxycart.complete.js'': Compressed. Includes the code to automatically set your store's domain, your store's FoxyCart domain, to initialize the ''FC'' object as ''fcc'', and to attach [[http://colorpowered.com/colorbox/|Colorbox]] to all add-to-cart links and forms. | * ''http://cdn.foxycart.com/YOURDOMAIN/foxycart.colorbox.js'': Compressed. Includes the code to automatically set your store's domain, your store's FoxyCart domain, to initialize the ''FC'' object as ''fcc'', and to attach [[http://colorpowered.com/colorbox/|Colorbox]] to all add-to-cart links and forms. |
| * ''http://cdn.foxycart.tld/YOURDOMAIN/foxycart.js'': Compressed. Includes the code to automatically set your store's domain, your store's FoxyCart domain, and to initialize the ''FC'' object as ''fcc''. Note that the ''preprocess'' and ''process'' events don't actually have any behavior in this version of the file, and that ''postprocess'' is not referenced at all, since ''postprocess'' should be called by whatever ''process'' events you've defined. | * ''http://cdn.foxycart.com/YOURDOMAIN/foxycart.js'': Compressed. Includes the code to automatically set your store's domain, your store's FoxyCart domain, and to initialize the ''FC'' object as ''fcc''. Note that the ''preprocess'' and ''process'' events don't actually have any behavior in this version of the file, and that ''postprocess'' is not referenced at all, since ''postprocess'' should be called by whatever ''process'' events you've defined. |
| * ''http://cdn.foxycart.tld/YOURDOMAIN/foxycart.raw.js'': Uncompressed. Does not set your store's domain, your store's FoxyCart domain, nor does it initialize the ''fcc'' object. This will generally only be used for special circumstances or advanced users needing access to the uncompressed code. | * ''http://cdn.foxycart.com/YOURDOMAIN/foxycart.raw.js'': Uncompressed. Does not set your store's domain, your store's FoxyCart domain, nor does it initialize the ''fcc'' object. This will generally only be used for special circumstances or advanced users needing access to the uncompressed code. |
| ===== What's Different from Previous Versions ===== | ===== What's Different from Previous Versions ===== |
| Almost everything but some of the ways that sessions are set has been rewritten, but here are the main changes from the ''foxycart_includes.js'' in v0.6.0: | Almost everything but some of the ways that sessions are set has been rewritten, but here are the main changes from the ''foxycart_includes.js'' in v0.6.0: |
| </script></code> | </script></code> |
| ===== Helper Functions ==== | ===== Helper Functions ==== |
| | |
| | ==== Loading the Cart on Page Load ==== |
| | If you find yourself needing to have the default [[http://jacklmoore.com/colorbox/|Colorbox]]-powered FoxyCart cart load itself when your site is loaded, the ''foxycart.colorbox.js'' file has a helper function that loads the cart with a ''cart=view'' command. To accomplish this, simply link to a page on your site (one that has the ''foxycart.colorbox.js'' linked on it) with ''fc_open=true'' in the anchor. So the ''href'' in a link to your site might look like this: |
| | <code> |
| | http://example.com/landing_page.html#fc_open=true |
| | </code> |
| | That will call ''fcc.events.cart.process.execute'' with your FoxyCart cart's "view" parameter. |
| ==== "Mini-Cart" Display and HTML Helper Functionality ==== | ==== "Mini-Cart" Display and HTML Helper Functionality ==== |
| When the ''FC'' class is initialized (via the ''.init()'' method) and on the ''.cart_update()'' method, elements with the following classes or IDs are modified: | When the ''FC'' class is initialized (via the ''.init()'' method) and on the ''.cart_update()'' method, elements with the following classes or IDs are modified: |
| * ''#fc_total_price'', ''.fc_total_price'': The inner HTML will be replaced by the value in ''FC.json.total_price'', formatted using the ''_currency_format'' function (which adds decimals but doesn't add currency symbols). | * ''#fc_total_price'', ''.fc_total_price'': The inner HTML will be replaced by the value in ''FC.json.total_price'', formatted using the ''_currency_format'' function (which adds decimals but doesn't add currency symbols). |
| |
| | <code html><a href="https://yourdomain.foxycart.com/cart?cart=view" id="fc_minicart"> |
| | My Cart: <span id="fc_quantity">0</span> - <span id="fc_total_price">$0.00</span> |
| | </a></code> |
| ==== ''session_get'' Appending the FCSID to Requests ==== | ==== ''session_get'' Appending the FCSID to Requests ==== |
| === What It Is === | === What It Is === |
| |
| The ''fcc.session_get()'' call will return something like ''&fcsid=abc123su2eoba8r9oknf7qa4b3''. If you just need the ''fcsid'' value itself you can easily retrieve it from the ''JSON'' with ''FC.session_id''. | The ''fcc.session_get()'' call will return something like ''&fcsid=abc123su2eoba8r9oknf7qa4b3''. If you just need the ''fcsid'' value itself you can easily retrieve it from the ''JSON'' with ''FC.session_id''. |
| | |
| | <wrap important>Developer Note:</wrap> if you are developing with Chrome and on an IP address, Chrome won't let you save cookies to that IP or to localhost so it's best to do any session_get() calls with another browser during development. [[http://code.google.com/p/chromium/issues/detail?id=56211]] |
| |
| <wrap important>Are you **//creating//** or **//modifying//** elements?</wrap> If you're dynamically //creating// add-to-cart links or forms, you don't need to bother with this at all. It will be handled automatically. If however you're //modifying// the ''href'' of an add-to-cart link that was present on pageload you //do// need to append the ''fcsid''. This has to do with how FoxyCart binds ''onclick'' handlers to elements while also making it easy to add new add-to-cart link or form elements. | <wrap important>Are you **//creating//** or **//modifying//** elements?</wrap> If you're dynamically //creating// add-to-cart links or forms, you don't need to bother with this at all. It will be handled automatically. If however you're //modifying// the ''href'' of an add-to-cart link that was present on pageload you //do// need to append the ''fcsid''. This has to do with how FoxyCart binds ''onclick'' handlers to elements while also making it easy to add new add-to-cart link or form elements. |
| |
| === How It Works: Overview === | === How It Works: Overview === |
| When a link or form pointing to your FoxyCart's cart URL (ie. ''https://example.foxycart.tld/cart'') is clicked or submitted, ''foxycart.js'' first checks to see if any functions have been added to your ''preprocess'' array. If any functions exist, they are run in order of entry (first-in-first out) passing in two arguments: | When a link or form pointing to your FoxyCart's cart URL (ie. ''https://example.foxycart.com/cart'') is clicked or submitted, ''foxycart.js'' first checks to see if any functions have been added to your ''preprocess'' array. If any functions exist, they are run in order of entry (first-in-first out) passing in two arguments: |
| - The submitted element itself. | - The submitted element itself. |
| - An array of name/value pairs to be submitted to the cart-add request. This array is built using an "unserialize" function inside the ''FC'' object. | - An array of name/value pairs to be submitted to the cart-add request. This array is built using an "unserialize" function inside the ''FC'' object. |
| The ''postprocess'' event is //not called directly// by ''foxycart.js'', but is available to use if you need it. This can be useful, for example, if you want to refresh the ''FC.json'' when your modal window is closed, as is the case with the default ''foxycart.complete.js''. | The ''postprocess'' event is //not called directly// by ''foxycart.js'', but is available to use if you need it. This can be useful, for example, if you want to refresh the ''FC.json'' when your modal window is closed, as is the case with the default ''foxycart.complete.js''. |
| === How It Works: Overview === | === How It Works: Overview === |
| Just like the ''proprocess'' and ''process'', you can add multiple functions to the ''postprocess'' even. Notice the call to ''postprocess'' in the ''process'' example above, in the ''onClosed'' parameter. That's telling Colorbox to run the ''postprocess'' events when the modal window is closed. If we add a function like below, then the ''cart_update()'' method will be called (which refreshes the ''FC.json'' and updates the "minicart" helper functions). | Just like the ''preprocess'' and ''process'', you can add multiple functions to the ''postprocess'' even. Notice the call to ''postprocess'' in the ''process'' example above, in the ''onClosed'' parameter. That's telling Colorbox to run the ''postprocess'' events when the modal window is closed. If we add a function like below, then the ''cart_update()'' method will be called (which refreshes the ''FC.json'' and updates the "minicart" helper functions). |
| <code javascript> | <code javascript> |
| fcc.events.cart.postprocess.add(function(){ | fcc.events.cart.postprocess.add(function(){ |
