How can I create an Ajax add to cart button in a custom section?

SO i have Created a section that renders products, but when i click add to cart it redirects to cart page. I want to create a ajax add to cart button, that when clicked will show the products in the cart and update the cart count total.

Pretty much dawns quick add for the collections but in my own custom section.

Thank you in advance.

Section


  

    

      

        {% if section.settings.product_display_collection %}
          {% assign product_limit = section.settings.product_display_limit | default: 4 %}
          {% assign collection_handle = section.settings.product_display_collection.handle %}
          {% assign collection = collections[collection_handle] %}
          {% if collection.products.size > 0 %}
            

              {% for product in collection.products limit: product_limit %}
                

                  
                    

                      
                    

                  
                  

                    
                      ### {{ product.title }}
                    
                    

                      
                        

{{ product.price | money }}

                      
                    

                    
                  

                

              {% endfor %}
            

          {% else %}
            

No products in the selected collection.

          {% endif %}
        {% else %}
          

No collection selected.

        {% endif %}
      

      
        

          

            {% if section.settings.product_display_image %}
              
                
              
            {% else %}
              

No image selected.

            {% endif %}
          

        

      

    

  

Hello @KPSLuke , Try adding the below script to your code.

 {% comment %} If you have added the jQuery CDN already do not add {% endcomment %}

That works perfectly the only thing im trying to get to work next was having the cart ui update when an item is added to cart without redirecting or page refresh. But otherwise your solution has helped me alot.

@Huptech-Web Sorry i forgot to mention your name

Hello @KPSLuke , You want to show the Cart count on the mini cart icon, Correct?

@Huptech-Web I want to update the cart count and the cart drawer, without having to refresh the page or be redirected to cart url. Want to update cart contents in real time

Okay @KPSLuke , can you please your store URL? I need to check it for the cart drawer functionality.

@Huptech-Web
https://gadgettimeza.myshopify.com/
password: testpassword

@Huptech-Web

url = https://gadgettimeza.myshopify.com/

password: testpassword

Hello @KPSLuke , Please replace the below script with the script I provided Yesterday!


Also, please add the “addToCartForm” class to your add-to-cart form.


When we click the “Add to Cart” button twice, it redirects to the cart page. Ideally, it should simply increase the product quantity in the cart without redirecting. Any help would be greatly appreciated.