Ajax Cart Pro  

 

 

Ajax Cart Pro 

extension for Magento 2  

User Guide Version 1.0 

   

 

  Ajax Cart Pro  

 

Table of Contents 

 

I) Introduction 3 

II) General Settings 4 1. Enable Ajax 5 2. Enable Ajax Cart on Product Page 7 3. Link to desired page after adding item 8 4. Set up close timeout for popup 10 5. Link to desired page after closing popup 12 

III) Display Settings 13 1. Try turning on the first 5 fields 14 2. The next 5 fields 15 3. The next 3 fields 17 4. Display related products 18 5. Related products block title 20 6. Number of Products 21 7. Replace Completely with 22 8. Static block 26 

IV) Design Settings 36 1. General Design Settings 36 2. Go to Checkout Button setting 37 3. Continue Shopping Button Setting 38 

V) How to use in storefront 39 1. Simple Products 39 2. Configurable Products 40 3. Grouped Products 41 4. Bundle Products 42 5. Downloadable Products 43 6. Virtual Products 44 

 

  Ajax Cart Pro  

VI - Ajax Cart on different pages 45 1. Home page - Hot sellers 45 2. Category Page - Product list 46 3. Search result page 46 4. Cart page 47 

VII, Contact Information 48  

   

 

  Ajax Cart Pro  

I) Introduction 

This document is the User Guide for Magento 2 Ajax Cart Pro. It describes the extension 

functionality and provides some tips for a quick start.  

Rescue cart abandonment - Bring the power of AJAX to your Magento 2 checkout. 

Installing a Magento 2 AJAX Cart Pro extension to your site can make a world of 

difference in customers shopping journey. This kind of extensions allows customers to 

continue shopping without waiting for pages to reload each time adding items to cart or 

removing items from the cart. 

● Make orders quickly and directly without page redirecting via popup 

● Easily customize popup 

● Additional advertising - Suggest related products for cross-selling and up-sell 

purposes 

● Support all types of products 

● Display all necessary information in the popup 

● Fully Responsive 

● Set countdown time to make the process even faster 

   

 

  Ajax Cart Pro  

II) General Settings To configure settings for this extension, administrators can log into back-end and navigate 

to Stores > Configuration > Ajax Cart. Set the Store View at Default Config -> The 

General Settings will be displayed immediately like: 

 

 

   

 

  Ajax Cart Pro  

1. Enable Ajax 

Untick all the boxes before “Use system value" first 

Enable Ajax Cart Pro: choose yes to allow Ajax Cart extension to run on your website 

 

And you can see our extension is activated in the storefront: 

 

 

  Ajax Cart Pro  

And it even appears on Product Listing Page/Home Page 

 

 

  Ajax Cart Pro  

2. Enable Ajax Cart on Product Page 

Enable Product Page: Choose Yes to use Ajax Cart on Product view page 

 

Then the result on the Individual Product Page will be like: 

 

    

 

  Ajax Cart Pro  

3. Link to desired page after adding item 

Add your desired link into the field of After Adding a Product Redirect to. This case, we 

make it be https://www.magezon.com 

 

And see how it work: 

 

 

Or you just have to enter the name of the page you want to direct to. For example: 

Checkout page. Just enter “checkout" and let our code does the rest.  

 

   

 

  Ajax Cart Pro  

And the result: 

 

 

   

 

  Ajax Cart Pro  

4. Set up close timeout for popup 

Popup Close Timeout (in seconds): set the time you want popup to close 

Let’s make it 15 seconds this case: 

 

Here, it's set: 

 

 

Or, if you set the time to 0:  

 

  Ajax Cart Pro  

 

There will be no countdown clock anymore: 

 

   

 

  Ajax Cart Pro  

5. Link to desired page after closing popup 

Enter your desired page. Let's check with this one: 

 

And the result after clicking on “x" button will be like: 

 

 

   

 

  Ajax Cart Pro  

III) Display Settings Untick all the boxes before “Use system value" first 

 

   

 

  Ajax Cart Pro  

1. Try turning on the first 5 fields 

Display Close Button: Choose to show a close button on popup or not 

Display Product Image: Enable/disable add a picture to describe your product 

Enable Gallery: Where you store pictures related to store’s product 

Display Product Review: Choose yes to show product’s feedback and star ratings 

Display Product Name: Define if Ajax Cart should display product’s name 

 

Then see the result: 

 

 

  Ajax Cart Pro  

2. The next 5 fields 

Display Product Short Description: Define if Ajax Cart show products short description 

Display Product Price: Show the exact price of the item 

Display Product SKU: Show the Stock Keeping Unit (SKU) number of the item 

Display Product Stock Status: Show the status of the product (In stock, out stock or 

pre-order…) 

Display Total Amount in Cart: Let shopper know how many products are in the 

shopping cart 

 

Then see how it work in the storefront: 

 

 

  Ajax Cart Pro  

And the Amount in Shopping Cart: 

 

How the short description displayed 

 

Note: Short description will only be displayed when the product is configurable type. The 

simple ones don’t get this function, and the short description is displayed only on Product 

Page. 

 

  Ajax Cart Pro  

3. The next 3 fields 

Display Total Count of Products in Cart: Show the number of items recently added 

Display ‘Go to Checkout' Button: Give customer a choice to check out immediately 

after adding any product to cart 

Display ‘Continue Shopping’ Button: Suggest customers to keep on their shopping 

 

And the result: 

 

 

  Ajax Cart Pro  

4. Display related products 

This field gives you 4 options 

 

For each option, you will receive different result in storefront.  

- If you choose No -> Nothing will appear underneath the product added 

 

 

 

 

 

 

 

 

 

 

  Ajax Cart Pro  

- If it is “Related products", the popup will be like: 

 

- Or Cross-sell Products 

 

 

 

 

  Ajax Cart Pro  

- And the Up-sell ones 

 

5. Related products block title 

Change the title of Related block to “Who bought this also bought" 

 

Let's see the result 

 

 

  Ajax Cart Pro  

6. Number of Products 

This field lets you set the number of products shown in front page. This case we set it to 3 

 

And it will be displayed like 

 

   

 

  Ajax Cart Pro  

7. Replace Completely with 

If you choose “Related products" in the field “Display Related Products”, there will appear one 

more field below named “Replace Completely with". This field allow you to do some following 

functions:  

- First. If you choose “None" 

 

So nothing will happen. Your block of related products keeps remaining at the same place 

and same name. 

 

 

  Ajax Cart Pro  

- Then, if you choose “Product Attribute" 

 

There will appear another field right below the previous one, named “Attribute Code" with 

options to choose. These options will vary depends on each website. 

 

First, be sure all the Attribute codes ared enable on Product Listing.  

Then, decide which Attribute to add to the popup cause it will effect on customer’s feeling 

and experience. 

   

 

  Ajax Cart Pro  

Now, let's see how they look in storefront:  

+ Product Name 

 

+ Short Description 

 

 

   

 

  Ajax Cart Pro  

+ URL Key 

 

- And last, if you choose Static block there will appear a respective field, as will be 

described below.   

 

  Ajax Cart Pro  

8. Static block 

In this field, you get options of blocks to choose, depends on the structure of your 

website. Choose 1 block that fits your style most to add to the bottom of the popup 

window.  

 

Here below are results in storefront of all 18 kinds of blocks:  

- Contact us info 

 

 

   

 

  Ajax Cart Pro  

- Eco Friendly Block 

 

- Footer Links Block 

 

 

 

 

- Gear Block 

 

  Ajax Cart Pro  

 

- Gear Left Menu Block 

 

 

 

 

- Giftcard Block 

 

  Ajax Cart Pro  

 

- Home Page Block 

 

 

 

 

- Login info Block 

 

  Ajax Cart Pro  

 

- Men Block 

 

 

 

 

- Men Left Menu Block 

 

  Ajax Cart Pro  

 

- New Block 

 

 

 

 

- New Left Menu Block 

 

  Ajax Cart Pro  

 

- Performance Fabrics Block 

 

 

 

 

- Sale Block 

 

  Ajax Cart Pro  

 

- Sale Left Menu Block 

 

 

 

 

- Training Block 

 

  Ajax Cart Pro  

 

- Women Block 

 

 

 

 

- Women Left Menu Block 

 

  Ajax Cart Pro  

 

 

 

   

 

  Ajax Cart Pro  

IV) Design Settings 

1. General Design Settings 

The Design Settings makes it easy to customize and apply a theme on your website. 

Setting in general includes Popup Width and Color of background, price, link and link 

hover. This case we make the general display to be:  

 

And here's how it look in the storefront: 

 

 

  Ajax Cart Pro  

2. Go to Checkout Button setting 

Let's set some colors for our Checkout button. You just have to pick a random color or 

your favourite colors to decorate the button. Like this: 

 

 

And the result: 

 

   

 

  Ajax Cart Pro  

3. Continue Shopping Button Setting 

Design the Continue Shopping Button your way. 

 

And wait to see how it looks… 

 

 

   

 

  Ajax Cart Pro  

V) How to use in storefront 

1. Simple Products 

Currently, we separate products into 6 main types:  

- If a product has no option (such as the color, size, quantity…) or we usually call them 

Simple ones, the Ajax loading popup will appear to inform that the product is added to cart 

successfully.  

Like this:  

 

Click on Go to Checkout Button to go to Checkout page and continue the next 

shopping process. Or wait for the popup to close automatically in the time set to add more 

items from current page to cart.   

 

 

 

 

  Ajax Cart Pro  

2. Configurable Products 

- If the product has custom options to select, the Ajax loading cart will be displayed as 

below:  

 

Customers have to choose the options to make the last decision in order to add the exact 

item to cart. After clicking on Add to Cart button, they will see something like this: 

 

Then, customers can choose to continue shopping or checkout. 

 

  Ajax Cart Pro  

3. Grouped Products 

This kind of product is a group of simple ones. The add to cart button in this case still 

remains its function as usual.  

All the thing you have to do is just enter the number (Quantity) of each single product in 

group.  

Then click Add to cart and wait for the next step. 

 

   

 

  Ajax Cart Pro  

4. Bundle Products 

This is the most complicated kind of product. It is the combination of Group and 

configurable ones. In other words, it’s exactly a group of relatively configurable products.  

First, you have chose the options inside each product 

Then, decide the quantity of them 

Last, click on the buying button.  

 

   

 

  Ajax Cart Pro  

5. Downloadable Products 

This product somehow is the same to simple product. But the main feature of it is that it 

can be downloaded. It can be a software, ebook, online news, magazine, etc. 

If they have no custom option, you do it as simple ones 

If they do, take the process of configurable ones.  

 

   

 

  Ajax Cart Pro  

6. Virtual Products 

Totally the same simple product. 

To buy this kind of product, click on the button - the easiest way to buy something. 

 

   

 

  Ajax Cart Pro  

VI - Ajax Cart on different pages 

1. Home page - Hot sellers 

Ajax Cart can appear even on the homepage as long as the Add to Cart button is 

available.  

 

 

 

 

 

 

 

   

 

  Ajax Cart Pro  

2. Category Page - Product list 

 

3. Search result page  

 

 

  Ajax Cart Pro  

4. Cart page 

 

Add to Cart allows you and your customers to buy here. Click on Add to Cart button then 

Ajax popup window will display right away.  

The display of Ajax pop-up will depend on each product attribute. 

 

 

   

 

  Ajax Cart Pro  

VII, Contact Information If you have any questions or need any support, feel free to contact us via following ways. 

We will get back to you within 24 hours since you submit your support request. 

- Fill out Contact Us form and submit to us. 

- Email us at support@magezon.com. 

- Submit a ticket here: https://magezon.ticksy.com/  

- Contact us through Skype: support@magezon.com. 

- Contact us on live chat: support@magezon.com.