For more details see the Ajax Shopping Cart for Magento 2 extension page.
Magento 2 AJAX add to cart extension provides a comfortable shopping experience. Customers can easily select configurable options and edit the items in the pop up without wasting time on page reloads.
To configure the module, go to Admin Panel → Stores → Configuration → Amasty Extensions → Ajax Shopping Cart
Enable or disable the extension in Enable Ajax Shopping Cart.
Enable flying image effect: With this setting, you can activate and deactivate nice looking visual effect.
Show the Product Qty Added to the Cart on the Product Listing: Enable the option to highlight the products that have already been added to the shopping cart. With mouse hover over the product, the number of items added to the cart appears.
Add Products to Compare with AJAX: Enable the option to let customers add products to Compare without page reloading. This will fasten the process and make it more convenient.
Add Products to Wish List with AJAX: Set the option to Yes to eliminate page reloading when customers add products to Wish List.
Show a Mini Cart once Item is Added: Enable the option to Show a Mini Cart instead of a Confirmation Pop-up after an item is added to the cart.
Redirect to the Product Page: Enable the option to redirect customers to the product page when they haven't specified the necessary products options. Set to 'No' to show the pop-up with the options on category, search & wishlist.
Display Custom Options: Customers can select configurable products and custom options right on the category page. If the 'Show Only If There Are Required Options' is enabled and a product has at least one required option, all custom options including the required ones are shown.
Pop-up for Composite Products: It is possible to select what product information you would like to display in the cart dialog window. Set this option to Mini Product Page to display product image, rating and short description together with product options and quantity in the pop-up. Choose Custom Options & Product Qty to show only custom options and product quantity in a pop-up. Here you can see the difference.
Dialog Close Delay (in seconds): In this field, you can set a timer for Continue button. After a set time expires, a dialog box disappears.
Enable a Confirmation Pop-up on a Product Page: Set the option to Yes to enable showing a confirmation pop-up on a product page.
Continue Button Action on a Product Page: Choose whether the Continue button on a product view page should link to the category page or remain on the product page.
Align Pop-up: Choose, where to locate the confirmation pop-up - Center, Top, Top left, Top right, Left, Right.
Image Display for Configurable Products: Select whether to display Parent Configurable Product Image or Child Simple Product Image.
Display in Pop-up: Choose the information to display in the confirmation pop-up.
Product Block Type Displayed in the Confirmation Pop-up: To display related products or cross-sells in the confirmation pop-up, select the necessary option.
Title: Specify your own title for a selling block.
Subtitle: Add the text for a subtitle of a block with related products or cross-sells.
Products Qty Limit: Specify the maximum number of related products or cross-sells to show in a confirmation pop-up. When the limit exceeds 2, the slider is activated.
See how it looks on the frontend:
To display custom blocks in the confirmation pop-up, set the configuration to CMS Static Block. Set the option to None if you don't want to display any blocks.
Also, you can choose what custom CMS blocks to use on the AJAX confirmation pop-up.
See how it looks on the frontend:
Customize the visual style of a confirmation pop-up.
This is how AJAX shopping cart window looks on the frontend.
When there are no options available to select on the catalog page itself (e.g. Home Page), customers can specify the product options (color, size, quantity) directly in the dialog pop-up, without going to the product details page.
Here are the types of a gialog pop-up you can choose to display:
When a customer adds a product to the cart without specifying mandatory options (e.g. size, colour, etc.), the AJAX pop-up will be displayed. The customer will be able to choose the required options right in this pop-up.
When adding products to cart, customers will see the item they are adding to cart and also brief cart overview – the number of items in the cart and current subtotal.
This is how the flying image visual effect looks like. It appears when a customer adds a product to the shopping cart.
You can add related products block in the cart dialog. Customers will see it when they add a product to the cart.