One Page Checkout Documentation

The main purpose of the Nop One Page Checkout plugin is to provide better user experience during the checkout process.

General Settings

1. Enable One Page Checkout  - By checking this option you will enable the OnePageCheckout plugin. 
   
   
   Note: You will also need to enable the OnePageCheckout setting from the Order Settings!
2. Disable Shopping Cart - This setting will provide you with the opportunity to enable/disable the shopping cart.
3. Preselect Last Customer Billing Address - When checked this setting will make the checkout process of your customers easier by pre-selecting the billing address from their address book and automatically filling the Billing panel for them.
4. Preselect Last Customer Shipping Address - When checked this setting will make the checkout process of your customers easier by pre-selecting the shipping address from their address book and automatically filling the Shipping panel for them.
   Note: Some of the shipping providers might log warnings in the System Log about empty address fields if the Billing and Shipping addresses aren't pre-selected.
5. Enable Ship To Same Address by default - Enabling this setting will automatically check "Ship to same address".
6. Default Billing Country - Preselect the default billing country.
7. Default Shipping Country - Preselect the default shipping country.
8. Flyout Shopping Cart Element Selector - The selector for the flyout shopping cart element. It is used by the Nop Ajax Cart plugin to update the flyout shopping cart after a product has been added to the shopping cart.
9. Shopping Cart Menu Link Selector - The selector for the HTML element in the header link, which contains information about the number of items in the shopping cart.

Billing address Settings

1. Saved billing address fields on change - Specify which billing address fields will be saved in the database.

Shipping address Settings

1. Saved shipping address fields on change - Specify which shipping address fields will be saved in the database.

Payment methods update Settings

1. Update for Billing Address fields  - Specify which billing address fields will update the Payment Methods panel.

Shipping methods update Settings

1. Update for Shipping Address fields - Specify which shipping address fields will update the Shipping Methods panel.
   
2. Update for Cart Item - Specify whether or not the shipping methods will be updated when customer updates cart item quantity. This setting is useful if you have free shipping over some order total value.

Order total update Settings

1. Payment methods change  - Specify whether or not the Order Total panel will be updated when payment method is changed. This setting is useful if any of the payment methods have an additional fee.
2. Shipping methods change - Specify whether or not the Order Total panel will be updated when shipping method is changed. This setting is useful if any of the shipping methods have an additional fee.
3. Checkout Attribute change - Specify whether or not the Order Total panel will be updated when checkout attribute is changed. Uncheck only if no checkout attributes has any price adjustments.
4. Address field change, based on the tax address - Update Order total panel when one of the above fields is changed from the address that you have set in your Tax Settings. For example, if you set your taxes to be based on Billing Address, and you change one of the above address fields, the order total panel will be updated.
   

InstallatioN

When you have the plugin installed, the above settings will be checked by default. All the settings related to the checkout process you were using before, will be taken into account by the plugin.

How it works

The plugin works entirely with AJAX, which means that the changes you make won't refresh the page, but they will affect the dependant panels.

For example: If you remove a product from the Order Summary you will be able to see the final price updating instantly, without page refresh.  

Key features

One of the key features of the plugin is that it is compatible with all nopCommerce settings related to the checkout. 

For example: 

1. In the billing address panel, you have a ship to same address option, which allows you to use the billing address as a shipping address.
2. You could disable the Billing Address panel from the Order Settings -> Disable Billing Address Step.
3. The Discount panel could be disabled by unchecking the Show discount box setting from Shopping Cart Settings.
4. From Shopping Cart Settings you could also disable the Gift Card box by unchecking the Show gift card box.
5. You could edit your shopping cart directly from the Order Summary panel and all your changes will be applied to the final price.
6. In the Billing and Shipping panel, you have all of the customer addresses. If an address is selected the fields will be automatically populated for you, and you will be able to edit them if you want.
7. When you apply for Discount or Gift Card the change in the final price will be seen instantly.
8. If you select Shipping or Payment method and they result in a change in the final price somehow (tax, reward points, etc.), you will be able to see it immediately.
9. You could add your own Checkout Attributes from Catalog -> Attributes -> Checkout Attributes.
   
   
   Note: The plugin supports all attributes except Datepicker, FileUpload, and Color Squares.
10. If you restrict a Payment Method for some country, which could be done from Configuration -> Payment -> Payment methods restrictions, and then select that county from the Billing Address panel, the restricted payment method will disappear and the first one from the available ones will be selected.
11. Same as mentioned above will be valid for shipping methods. If you restrict some Shipping Method for some country, which could be done from Configuration -> Shipping -> Shipping methods restrictions, and then select that county from the Shipping Address panel, the restricted shipping method will disappear and the first one from the available ones will be selected.

Update default address tax country

If you have a Default tax address already configured then you can skip reading the below instructions.
As a store owner, you could decide that you want to change the default tax country, which is used for calculating country tax for your customers (for example VAT). You could change the default tax country by going to Administration -> Configuration -> All Settings and find the realonepagecheckoutsettings.defaulttaxcountryid setting. The value of the setting is the country id which you want to be your default tax country. By default, the value of the setting is the id of the first country in your database.

This setting could be useful if you want all your customers to have, for example, VAT by default. To achieve this you need to set the value of the setting to be some European country id.

Add AdDitional Validation to Data

Adding additional validation to the input fields in the One Page Checkout plugin, although requiring writing custom javascript code, is fairly easy. This is done by creating a function with name externalValidation. In that function you will need to perform the data validation, throwing an error if necessary.  This function will be called after clicking the checkout button just before the data is sent to the server.

The example below will demonstrate how to validate that the Phone number field in the Billing Address is at least 5 digits long: 

Edit the ~/Plugins/SevenSpikes.Nop.Plugins.RealOnePageCheckout/Views/RealOnePageCheckout/RealOnePageCheckout.cshtml file 

Add the following code anywhere in the: 

<script>
function externalValidation(errorMessages, submitFormCallback) {
       var billingPhoneNumberValue = $('#billingPhoneNumber').val();
       if (billingPhoneNumberValue.length < 5) {
            errorMessages.push('Phone number is too short');
       }             
       submitFormCallback(errorMessages);
 }
</script>

Now if a customer has entered a phone number that is less than 5 digits long he will get an error message when he clicks on the checkout button to submit his order.