Ajax Cart Pro extension for Magento 2

Transcription

1 Ajax Cart Pro extension for Magento 2 User Guide Version 1.0

2 Table of Contents I) Introduction... 4 II) General Settings Enable Ajax Enable Ajax Cart on Product Page Link to desired page after adding item Set up close timeout for popup Link to desired page after closing popup III) Display Settings Try turning on the first 5 fields The next 5 fields The next 3 fields Display related products Related products block title Number of Products Replace Completely with Static block IV) Design Settings General Design Settings... 37

3 2. Go to Checkout Button setting Continue Shopping Button Setting V) How to use in storefront Simple Products Configurable Products Grouped Products Bundle Products Downloadable Products Virtual Products VI - Ajax Cart on different pages Home page - Hot sellers Category Page - Product list Search result page Cart page VII, Contact Information... 49

4 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

5 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:

6 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:

7 And it even appears on Product Listing Page/Home Page Ajax Cart Pro

8 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:

9 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 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.

10 And the result: Ajax Cart Pro

11 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:

12 Or, if you set the time to 0: There will be no countdown clock anymore:

13 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:

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

15 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:

16 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:

17 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.

18 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:

19 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

20 - If it is Related products", the popup will be like: - Or Cross-sell Products

21 - 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

22 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

23 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.

24 - 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.

25 Now, let's see how they look in storefront: + Product Name + Short Description

26 + URL Key - And last, if you choose Static block there will appear a respective field, as will be described below.

27 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

28 - Eco Friendly Block - Footer Links Block

29 - Gear Block - Gear Left Menu Block

30 - Giftcard Block - Home Page Block

31 - Login info Block - Men Block

32 - Men Left Menu Block - New Block

33 - New Left Menu Block - Performance Fabrics Block

34 - Sale Block - Sale Left Menu Block

35 - Training Block - Women Block

36 - Women Left Menu Block Ajax Cart Pro

37 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:

38 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:

39 3. Continue Shopping Button Setting Design the Continue Shopping Button your way. And wait to see how it looks

40 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.

41 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.

42 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.

43 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.

44 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.

45 6. Virtual Products Totally the same simple product. To buy this kind of product, click on the button - the easiest way to buy something.

46 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.

47 2. Category Page - Product list 3. Search result page

48 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.

49 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. - us at support@magezon.com. - Submit a ticket here: - Contact us through Skype: support@magezon.com. - Contact us on live chat: support@magezon.com.