Ajax Cart Pro extension for Magento 2 - Trusted Magento 2 ... · This document is the User Guide...
Transcript of Ajax Cart Pro extension for Magento 2 - Trusted Magento 2 ... · This document is the User Guide...
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 [email protected].
- Submit a ticket here: https://magezon.ticksy.com/
- Contact us through Skype: [email protected].
- Contact us on live chat: [email protected].