AJAX Cart for Magento 2

AJAX Cart

Introduction

The extension provides a great shopping experience by allowing shoppers to add products to the cart without wasting time on page reloads

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Configuration Settings

To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Ajax Shopping Cart.

The module’s configuration contains 2 sections: General and Popup

General

Set Enable the extension to "Yes" to enable the extension in the storefront

If Enable Flying Image Animation is set to "Yes" image will auto-fly into the Mini cart (My cart) after "Add To Cart" button is clicked.

Set the Redirect to the product page if no custom options are selected/specified? field, to "Yes", to redirect customers to the product page when they haven't selected/specified the necessary products options. If "No" , the ajax pop-up with the options will display.

Popup

The Popup section includes 3 sub-sections: Display, Product Page, Product Relationships.

In the Display sub-section:

Select what to Show in Pop-up after products are added to the cart: Product Image, Products Number In Cart, Cart Subtotal, Product Quantity Box, Go To Checkout Button

In the For Bundle, Grouped and Configurable Products:

  • If Display All Product Infos is selected, product name, image, rating, short description, custom option, and qty will display in ajax pop-up;
  • If Display Product Name, Custom Options and Qty Only is selected, only product name, custom options, and qty will display in ajax pop-up.;

In the "Continue Shopping" Button Text field, define the text to show in continue shopping button. Eg "Continue" or "Continue Shopping"

In the "View Cart" Button Text field, define the text to show in the view cart button. Eg "View and Edit Cart" or  "View Cart"

In the "Go To Checkout" Button Text field, define the text to show in the checkout button. Eg. "Go To Checkout", "Checkout Now", "Proceed to Checkout"

In the Pop-up Close Delay (in seconds) specify the time in seconds to close the popup window. The timer will appear at the "Continue Shopping" button. When the time set expires, the popup window will disappear. If set to 0, the popup window won’t be hidden automatically.

In the Product Page sub-section:

Set Enable AJAX Popup on Product Page to Yes, to enable the AJAX Pop-up on each product page. If "No" the AJAX Pop-up will be disabled at the product page

In the "Continue Shopping" Button Action field, specify whether the "Continue Shopping" button on a product view page should remain on the product page or lead to the category or custom page.

  • If Stay On Product Page is selected, customers will stay on the current product page after the "Continue Shopping" button is clicked;
  • If Go to Category Page is selected, customers will be redirected to the category page after the "Continue Shopping" button is clicked;
  • If Go to Custom Page is selected, customers will be redirected to the specified custom page. Please define the Custom Page Url to redirect;

In the Product Relationship sub-section:

Set Type select the Product Relationships Type to display in the popup. Related, Cross-Sell Products or None to hide the product relationships

In the Block Title field, enter the title to appear in the product relationships block.

Enter the Number of Product to Display in the popup. Eg "8"

Note: If Related Products or Cross-sells Products is selected, make sure that the product to add-to-cart has Related or Cross-sells product configured. You can set up Related or Cross-sells Products under the product edit page in the admin panel. Please check this guide for more details.

Customization (Adjust Colors)

To adjust the buttons, titles, popup container, and text colors, please add this following CSS codes at your custom CSS file. Replace the default color with your colors.

You can add only the CSS codes that you'd like to adjust the colors

General

.umcart-confirm-buttons .button {color: #FFFFFF;}
 #confirmBox, .umcart-confirm-buttons, .umcart-message-box, .um-related-box, #um-a-count, #um-a-count:visited, .um-related-title, .um-title {color: #000000;}

Titles Colors

.um-related-title, .um-title {background-color: #FFFFFF;}

Popup - Container Background

#confirmBox {background-color: #FFFFFF;}

Continue Shopping (Left Button)

.umcart-confirm-buttons .um-btn-left {border: 1px solid #4D4D4D; color: #4D4D4D;}
.umcart-confirm-buttons .um-btn-left:hover {background-color: #4D4D4D; color: white;} 

View Cart (Right Button)

.umcart-confirm-buttons .um-btn-right {border: 1px solid #1979C3; color: #1979C3;}
.umcart-confirm-buttons .um-btn-right:hover {background-color: #1979C3;color: white;} 

Checkout Now - Button

.umcart-confirm-buttons .checkout {background-color: #1979C3; }

You can choose your color picker from this guide and make sure to prefix each color with "#". eg #FFFFF

In case you can not achieve it by yourself, please contact our support team at [email protected], we will help you out with that

Frontend View

Example of Ajax Cart with product relationships

Example of Ajax Cart displaying on the frontend

Responsive design

The extension is responsive to mobile devices and works great regardless of  the type of screen or device used to view your store

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page