1. Overview
Ajax Add to Cart for Magento 2 extension allows customers to add products to shopping cart without loading new pages. For products with many options such as configurable, grouped or bundle products, customers can conveniently select product options in popup. Besides, this extension supports admin to change setting and design of popup in the backend.
Note: The extension supports ajax cart function on all pages that contain the Add to Cart button, except for Wishlist, Related, Up-Sell and Cross-Sell Block.
2. How Does It Work?
Please go to Stores ⇒ Configuration ⇒ BSSCOMMERCE ⇒ Ajax Cart.
Note:
- Success Popup (confirmation popup) to notify customers of adding products to cart successfully
- Quick View Popup (add-to-cart popup) for customers to select product options when adding bundle, grouped and configurable products to cart
2.1 General Options
- In Enabled, choose Yes to enable or No to disable the module.
- Enabled Fuction in Product Page to choose Yes to enable ajax add-to-cart function in product pages.
- In ‘Add To Cart’ Button Selector, the default class to select Add To Cart button is “.action.tocart” but you can change this information to make it compatible to your theme/site.
- In 'Popup Animation', select one of 5 effects for the popup: Zoom, Horizontal Move, Move from Top, 3D Unfold, Zoom-out; or choose None (appear) if you don't want the popup to be applied the effect.
2.2 Success Popup Settings
- Show Product Image to choose Yes to include product image in Success Popup. Otherwise choose No to exclude it
- Image Size to set the size of product image displayed in Success popup (measured in pixel)
- Show Product Price to choose Yes to include product price in Success Popup. Otherwise choose No to exclude it
- Show “Continue” Button to choose Yes to enable Continue button in the Success Popup or No to disable this button.
- Countdown Time for Button to enable countdown function for View Cart button or Continue button; then set time (measured in seconds) in Countdown Time section.
- Show Cart Quantity and Cart Subtotal to choose Yes to include cart quantity and cart subtotal in Success Popup. Otherwise choose No to exclude them.
- Show ‘Go To Checkout’ Link to choose Yes to include checkout link embedded in Success Popup, otherwise choose No to exclude it.
- In Show Suggested Product Block, choose Yes to include suggested product block in Success Popup then fill in the following fields, or No to exclude this product block.
- In Title of Suggested Product Block, enter the message to motivate customer to add more products to cart. Eg: You may be interested in these products.
- In Choose Suggested Products, choose which types of products to display in suggested product block: Related products, Up-sell products, Cross-sell products.
- In Number of Suggested Products, set restriction of the number of products displayed in suggested product block.
2.3 Success Popup Design
- In Color of Text on Buttons, determine color of text on buttons in Success Popup.
- In Text of ‘Continue’ Button, decide the text displayed for Continue button, then choose button color and button color on hover in the 2 sections: ‘Continue’ Button Color and ‘Continue’ Button Color on Hover.
- In Text of ‘View Cart’ Button, type the text content displayed for View Cart button, then choose color and color on hover in the 2 sections: ‘View Cart’ Button Color and ‘View Cart’ Button Color on Hover.
2.4 Quick View Popup Setting
- In Show ‘Go to Product’ Link, choose Yes to enable “Go to Product” link in Quick View popup, otherwise choose No.
- In Show Additional Data, choose Yes to add product information (including product detail, review and more information) in Quick View Popup, or No to hide this section.
2.5. Cart Flying Effect
- In 'Enable Cart Flying Effect', choose Yes to enable cart flying effect, then 2 other configs appear, otherwise choose No.
- In 'Cart Flying Animation Speed', type the time that customer can see product fly to the cart (measured in seconds). You can type decimal number in this field.
- In 'Enable Transparent Image While Flying', choose Yes if you want the product image to fade out when flying into the cart, otherwise choose No.
3. API Support
We provide you BSS's list of GraphQL & REST API that our Magento 2 Ajax Add To Cart extension supports.
3.1 GraphQL API
Check all GraphQL API support here.
3.2 REST API
Check all REST API support here.