Ajax Cart | NectarSpot

What is ajax cart?

As we developed more and more custom theme e-commerce solutions, we found a very strong demand for Ajax Cart on almost every project. By using Ajax Cart API user can add items to the cart, update the cart items and fetch the items subtotal without refreshing the page. This gives great user experience to the customers that boost the conversions.

Steps to implement the Ajax cart by custom code

Creating ajax cart drawer

Cart drawer is the most popular type of Ajax carts designs in any e-commerce website today. The cart drawer will not be visible – it comes from the left or the right side of the screen when you click on the products Add to cart button.

<div class ="buy_0_0" id="test"> id="free_pro" < a href="javascript:void(0);" id="{% if product.handle == 'smarter-collagen'>%}free_pro{% else %}all_pro{% endif %}"class="btn btn-default">Add to cart</a></div>

Display the products on cart drawer

Easy way for customers to view the products when selected it will display on to the cart drawer and can see the product which they have opted for with context and can hide the drawer with on click when not needed.

Appending all the products

The cart drawer will display appending all the products which you choose one-by-one along with product discription and price individually.

Increment and decrement process

We also designed increment and decrement process on the cart drawer where the customer can opt more than one quanity of a product by incrementing('+' plus button) or can decreasing ('-' minus button) and remove if not needed from the display cart drawer directly.

Count of quantity items with subtotal

The most important step is count of subtotal and total products added to the cart drawer. The subtotal will work based on the each product price and total quantity depends upon the no. of products selected/choosen, where the increment and decrement functionality dependency is also implemented accordingly.

Results

Due to better design and functional development of Ajax Cart, We gave customers happy path to view and order the products directly from the product page after adding products on cart drawer to checkout for both one-time and subscription purchase in the webiste.