| Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision |
| v:1.0:checkout [2012/08/01 11:41] – [The Location AutoCompleter] adam | v:1.0:checkout [2012/11/01 21:25] – fixing a stray period after a mystery updater made some nice fixes foxybrett |
|---|
| |
| ===== How and Why FoxyCart's Checkout Is Different ===== | ===== How and Why FoxyCart's Checkout Is Different ===== |
| One of the major piece we wanted to simplify and improve upon when we started FoxyCart was the checkout page. In addition to making it a very dynamic one-page checkout, we also revolutionized (big hypey word, we know, but we feel it's true) the way customers choose between a guest checkout or creating an account. | One of the major pieces we wanted to simplify and improve upon when we started FoxyCart was the checkout page. In addition to making it a very dynamic one-page checkout, we also revolutionized (big hypey word, we know, but we feel it's true) the way customers choose between a guest checkout or creating an account. |
| |
| No longer will your customers be presented with inputs for their email and password, only to submit the form and be told that they don't have a user, and that if they'd like to register they can click the teeny tiny link in the bottom right. Odds are they don't care about registering; they just want to buy your wares as quickly as possible. Our unique approach automatically determines whether the customer has an account, and also presents easy options to checkout as a guest user if desired (and configured for your store). | No longer will your customers be presented with inputs for their email and password, only to submit the form and be told that they don't have a user, and that if they'd like to register they can click the teeny tiny link in the bottom right. Odds are they don't care about registering; they just want to buy your wares as quickly as possible. Our unique approach automatically determines whether the customer has an account, and also presents easy options to checkout as a guest user if desired (and configured for your store). |
| ==== Configuration Options ==== | ==== Configuration Options ==== |
| |
| The autocomplete can be customised in a number of ways by utilising the configuration options present in the checkout object, allowing you to turn off the autocomplete entirely, and removing or customising certain aspects of its functionality. To apply any of these customisations, simply add a javascript block to your checkout template, right before the closing ''</head>'' tag of your checkout template like this: | FoxyComplete can be customised in a number of ways by utilising the configuration options present in the checkout object, allowing you to turn off the autocomplete entirely, and removing or customising certain aspects of its functionality. To apply any of these customisations, simply add a javascript block to your checkout template, right before the closing ''</head>'' tag of your checkout template like this: |
| |
| <code javascript><script type="text/javascript"> | <code javascript><script type="text/javascript"> |
| FC.checkout.config.autocomplete.enable = false; | FC.checkout.config.foxycomplete.enable = false; |
| </script></code> | </script></code> |
| |
| ; ''enable'' | ; ''enable'' |
| : **Description:** A boolean to set whether the autocomplete should be enabled on your checkout or not. | : **Description:** A boolean to set whether FoxyComplete should be enabled on your checkout or not. |
| : **Default:** ''true'' | : **Default:** ''true'' |
| : **Accepts:** ''true'' or ''false'' | : **Accepts:** ''true'' or ''false'' |
| : **Example:** ''FC.checkout.config.autocomplete.enable = false;'' | : **Example:** ''FC.checkout.config.foxycomplete.enable = false;'' |
| : **Note:** Note that if the autocomplete is disabled for the checkout, fields will instead show a select dropdown object for the country field and state field where pre-filled state locations are available. For states where no pre-filled states are available, an empty text input is shown instead. | : **Note:** Note that if FoxyComplete is disabled for the checkout, fields will instead show a select dropdown object for the country field and state field where pre-filled state locations are available. For states where no pre-filled states are available, an empty text input is shown instead. |
| ; ''comboBox'' | ; ''comboBox'' |
| : **Description:** A boolean to set whether the autocomplete should display the comboBox button on the right of the input, which when clicked will open up the autocomplete results. This allows customers to operate the autocomplete easily with a mouse. | : **Description:** A boolean to set whether FoxyComplete should display the comboBox button on the right of the input, which when clicked will open up the autocomplete results. This allows customers to operate the autocomplete easily with a mouse. |
| : **Default:** ''true'' | : **Default:** ''true'' |
| : **Accepts:** ''true'' or ''false'' | : **Accepts:** ''true'' or ''false'' |
| : **Example:** ''FC.checkout.config.autocomplete.comboBox = false;'' | : **Example:** ''FC.checkout.config.foxycomplete.comboBox = false;'' |
| ; ''comboBoxOpen'' | ; ''comboBoxOpen'' |
| : **Description:** A string to be used for the comboBox text shown on the button for opening the results. This is best set to a single character. | : **Description:** A string to be used for the comboBox text shown on the button for opening the results. This is best set to a single character. |
| : **Default:** ''"▼"'' | : **Default:** ''"▼"'' |
| : **Accepts:** Any string, preferably only a single character | : **Accepts:** Any string, preferably only a single character |
| : **Example:** ''FC.checkout.config.autocomplete.comboBoxOpen = "v";'' | : **Example:** ''FC.checkout.config.foxycomplete.comboBoxOpen = "v";'' |
| ; ''comboBoxClose'' | ; ''comboBoxClose'' |
| : **Description:** A string to be used for the comboBox text shown on the button for closing the results. This is best set to a single character. | : **Description:** A string to be used for the comboBox text shown on the button for closing the results. This is best set to a single character. |
| : **Default:** ''"▲"'' | : **Default:** ''"▲"'' |
| : **Accepts:** Any string, preferably only a single character | : **Accepts:** Any string, preferably only a single character |
| : **Example:** ''FC.checkout.config.autocomplete.comboBoxClose = "^";'' | : **Example:** ''FC.checkout.config.foxycomplete.comboBoxClose = "^";'' |
| ; ''flags'' | ; ''flags'' |
| : **Description:** A boolean to set whether the flag icon should be displayed on the right of the text input for the country fields. | : **Description:** A boolean to set whether the flag icon should be displayed on the right of the text input for the country fields. |
| : **Default:** ''true'' | : **Default:** ''true'' |
| : **Accepts:** ''true'' or ''false'' | : **Accepts:** ''true'' or ''false'' |
| : **Example:** ''FC.checkout.config.autocomplete.flags = false;'' | : **Example:** ''FC.checkout.config.foxycomplete.flags = false;'' |
| | |
| ==== Customising the styling ==== | ==== Customising the styling ==== |
| <wrap hi>Make sure that you're setting ''isValid'' to both true and false within your logic. If you just set it to false then the checkout will go nowhere.</wrap> | <wrap hi>Make sure that you're setting ''isValid'' to both true and false within your logic. If you just set it to false then the checkout will go nowhere.</wrap> |
| ===== Customising which Credit Card types are allowed on your Checkout ===== | ===== Customising which Credit Card types are allowed on your Checkout ===== |
| In some situations it is necessary to not allow certain credit cards to be used on a store, a common example being the need to prevent American Express cards due to a payment gateway restriction. You can customise this with a single of javascript included in your checkout template. Simply paste the following code right before the closing ''</head>'' tag of your checkout template, and remove any cards that you need to. | In some situations it is necessary to not allow certain credit cards to be used on a store, a common example being the need to prevent American Express cards due to a payment gateway restriction. You can customise this with a single line of javascript included in your checkout template. Simply paste the following code right before the closing ''</head>'' tag of your checkout template, and remove any cards that you need to. |
| |
| <code javascript><script type="text/javascript"> | <code javascript><script type="text/javascript"> |
| |
| You'll also need to update the "pay with credit card" checkout language string in your FoxyCart admin under the language settings. | You'll also need to update the "pay with credit card" checkout language string in your FoxyCart admin under the language settings. |
| | |
| ===== Other Checkout Actions ===== | ===== Other Checkout Actions ===== |
| The checkout is primarily used to pay for new purchases, but there are certain other situations that arise that are still handled through the checkout. It's important to understand when your checkout can be used for other purposes so you can design and style accordingly. | The checkout is primarily used to pay for new purchases, but there are certain other situations that arise that are still handled through the checkout. It's important to understand when your checkout can be used for other purposes so you can design and style accordingly. |
