Ajax Cart is an addon which (when enabled) replaces the default “Add To Cart” action with the module’s custom action. After enabling this Magento Ajax Cart Extension, whenever a customer clicks on the “Add To Cart” button, the user is not redirected to the view cart page instead a popup is displayed. In the popup, items are shown. Cart items can be removed, updated, edited from the Ajax add to cart extension. Coupons can be also applied on Magento popup cart extension and user can checkout from there. The merchant can also show his/her banners or show the best-selling products on Magento popup cart page with the help of this Magento plugin.
- Follow the following steps for installing Magento Ajax Cart Extension:
- Download the extension package.
- Unzip the package on your root folder of Magento setup via FTP manager (like Filezilla or WinSCP – download here)
- In Admin Panel go to “System > Knowband Extensions > Ajax Cart”.
- That is all – Your system is ready.
This User Manual Guide users through the Admin Module/Store Front settings and features of the Magento Ajax Cart Extension by Knowband.
Admin Panel Settings of the Magento ajax cart popup extension contains the 3 tabs for settings.
The General Settings of the Magento popup cart module has following options:
- Activate: Enables or Disables the Magento plugin. Switch it on to enable the Magento pop-up cart module.
- Show Apply Coupon Option: This option of the Magento ajax cart extension allows the admin to show or hide the apply coupon division on the pop-up window shown on the front website.
- Show Contact Email: Switch on this option of Magento Ajax Cart Extension to show the Contact Email option on the pop-up cart.
- Email ID: This field of Magento add to cart popup extension offers the admin to set the default email id for the contact email option shown on the front. By default, the email id of the store admin will be filled in the field.
- Include jQuery: This option of the Magento add to cart ajax popup allows us to include jQuery in our Magento module.
This tab of Ajax add to cart extension is used to customize the pop-up window shown in the front.
- Button Color: This option of Magento cart popup extension changes the background color of the checkout button.
- Button Text Color: Color of the text shown inside the checkout button on the pop-up. The admin can change the text color of this Magento ajax cart popup extension button.
- Button Border Color: Color of the border of the button can be changed using this option of Magento add to cart popup extension.
- Popup Background Color: Background color of the main pop-up window is set from this Magento add to cart ajax popup module.
- Popup Border Color: Background color of the main pop-up window is set from this field of Ajax add to cart extension.
- Show Items: This option of the Magento Ajax Cart Extension is to show the banners or the top selling items on the front pop-up window. When this option is selected as “None”, no item is shown on the pop-up. If this option is selected as “Top Selling” then 4 most top-selling products are shown on the right panel on pop-up window and if selected as “Banners” then a decision is shown from where we can choose the banners to show on the front of this Magento extension.
Selector Settings tab of the Magento add to cart ajax popup is used to make the module work in case checkout buttons have different class names. The field of Magento plugin has the following options:
Button Class Name: By default this field of Magento pop-up cart extension is auto-filled. If the Magento module still does not work then we have to enter the correct class name for the checkout buttons shown on the front site (except product view page). To get the class name of the button right click on the “Add to cart” button and click on “Inspect Element”.
When the inspector opens find the class name inside “button” tag.
Take a look at following image.
- Button Class Name (Product Page): This field of Magento popup cart is also filled by default. To get the class name of the “Add to cart” button shown on product view page. Go to the product view page of Magento Ajax Cart Extension and follow the same process as shown above.
- Add To Cart Form Id: This field of Magento Ajax Cart Extension is also filled by default. To change the form id of the Magento Ajax Cart Extension, Go to the product view page and right click on the “add to cart” button then click on the “Inspect Element”. When inspector opens to find the form as shown in the below image.
Yellow box is the location of the “Add to cart” button and the red box is the location to find the id of the form.
When the Magento add to cart ajax popup module is enabled and the user clicks on the “Add to cart” button, a pop-up is opened. The product is added to the cart and sown in the pop-up. The Magento Ajax Cart Extension allows us to update product quantity or remove them from the cart. From the popup, the user can go to checkout and apply for the coupon also.
- To update the quantity of the product enter the quantity in the input field and click on the update link of the Magento Extension.
- To remove a product from the pop-up, click on the cross icon shown in front of every product row.
- To apply the coupon, switch on the “Show Apply Coupon” option from admin panel of the Magento cart popup extension and the coupon division will be visible on the front pop-up cart. Enter the coupon code in the input field of the Magento Ajax Cart Extension and click on the “Apply” button.
To send mail for any help or suggestions, click on the “Send Email” option. A window will open, from where the user can send email to the admin.
Watch the video tutorial of Magento Ajax Cart Extension here: