With the Nop Ajax Cart customers of your nopCommerce site will be able to add products to their shopping cart on the fly much faster and most importantly without leaving their current page. There are no more post backs to the server and page refreshes, not to speak of being redirected to the shopping cart page every time you hit the Add To Cart button. With the Nop Ajax Cart your customers will have a seamless and enjoyable shopping experience.
Live DEMO - see how the Nop Ajax Cart plugin would look like in your public store.
Admin DEMO - see the plugin administration.
Working with the Nop Ajax Cart is as easy as configuring a few settings from the administration of the plugin.
Please read the following steps for more information on how to configure the Nop Ajax Cart.
General Settings
These settings could be found in almost every plugin. They are responsible for showing the plugin in your public store and enabling your customers to use its functionality.
- Enable Nop Ajax Cart - Specify whether to enable the widget for the Nop Ajax Cart Plugin, thus enabling or disabling the plugin. This is a store specific setting and can be set per store if you are running multi-stores.
Ajax Cart Availability Settings
Availability settings will handle the enabling the Nop Ajax Cart on different pages and different kinds of products.
- Enable Nop Ajax Cart and Ajax Wishlist on Product Page - Specifies whether to enable the Nop Ajax Cart Plugin on product page.
- Enable Nop Ajax Cart and Ajax Wishlist On Pages With Product Boxes - Specifies whether to enable the Nop Ajax Cart Plugin on pages such as category, manufacturer, recently viewed, recently added, etc.
- Enable Product Quantity Text Box On Pages With Product Boxes - Specifies whether the product quantity box is enabled for products on pages with product boxes. By default nopCommerce does not show quantity boxes in the product boxes.
Ajax Cart Selectors Settings
The following settings are integration Settings and should be used only if you have done changes to the html styles or id properties of the elements mentioned in these settings. The Nop Ajax Cart works via Ajax and in order to achieve this it needs to modify these html elements. Therefore the Nop Ajax Cart needs to know how to find these html elements.
- Shopping Cart Menu Link Selector - This is the Jquery selector for the html element in the header link, which contains information about the number of items in the shopping cart. The default value is span.cart-qty.
- Wishlist Menu Link Selector - The selector for the html element in the header link, which contains information about the number of items in the wishlist. The default value is span.wishlist-qty.
- Flyout Shopping Cart Panel Selector - The selector for the flyout shopping cart panel. 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.
- Product Page "Add To Cart" Button Selector - The selector for the product page "Add to cart" button on the product details page. It is used by the integration of the Nop Ajax Cart plugin.
- Product Box Product Item Element Selector - The product item element within the product box holds the ID of the product. The Ajax Cart need this in order to work."
- Product Box "Add To Cart" Button Selector - The selector for the product box "Add to cart" button. The product box is used for listing products on pages like category page, manufacturer page, home page, etc. It is used by the integration of the Nop Ajax Cart plugin.
- "Add To Wishlist" Button Selector - The selector for the "Add to wishlist" button on all pages.
Product Added To Cart Popup Settings
These settings will provide you with additional controll over your Nop Ajax Cart appearance. From this section you can controll the sizes of your Product images and various kinds of settings related to the cart popup.
- Product Added To Cart Image Size - Specify the image size of the image displayed on the product added to cart window (in pixels)
- Show Related Products In Popup - Show related products in the popup after adding product to the cart.
- Number Of Related Products In Popup - Set the number of Related Products to be shown.
- Show Cross Sell Products In Popup - Show cross sell products in the popup after adding product to the cart.
- Number Of Cross Sell Products In Popup - Set the number of Cross Sell Products to be shown.
Ajax Wishlist functionality
Since 16th september 2015 the Ajax Cart plugin includes "Ajax Wishlist" functionality.
This means that the "Add To Wishlist" button works via AJAX - similar to the "Add To Cart" button. If the product has attributes, a popup will appear, allowing you to modify them, before add the product to your wishlist. This will improve the user experience with the Wishilist.
How to add new Product Templates with Ajax Cart
If you want to add new product templates with Ajax Cart the steps are as follows:
If you are using a theme:
- Open the folder of your default product template.
Note: If you are using theme that overrides the product template you will have to open the location of the product template view in the theme itself. For example in our Tiffany theme the product template is located at Themes\Tiffany\Views\Product folder. - Copy the default product template - ProductTemplate.Simple.cshtml.
- Rename it as you like (for example NewProductTemplate.cshtml) and make your changes in the new file.
In Ajax Cart:
- Go to Plugins\SevenSpikes.Nop.Plugins.AjaxCart\Views\NopAjaxCartCatalog.
- Copy the default product template view that you will find there - ProductTemplate.Simple.cshtml.
- Give it the same name as the theme product template - NewProductTemplate.cshtml
- Now you will be able to use the Ajax Cart with the new Product template.