Add to cart button: Popup with cart review

Store Design
1

my website: https://www.fermento24.com

I’d like to make it so that, when a client clicks on the add to cart button, instead of being redirected to cart I’d like for a popup with a resume of what’s in the cart at the moment to appear.

Current code:

I wanted to add a popup that shows data similar to the popup of the minicar, but I couldn’t manage to do it. Anyone has suggestion?

Minicart code:


        
  
          {% for item in cart.items %}
          - {{ item.product.title }}
                  {% if item.product.variants.size != 0 %}
                  {% unless item.variant.title contains 'Default' %}
                  {{ item.variant.title }}
                  {% endunless %}
                  {% endif %}

                {{item.price | money}} x {{item.quantity}}

            

            
          
          {% endfor %}
        

           
          

          

---

          

**Consegna gratuita** in 24/48h in **Italia** per ordini superiori ai 120€ altimetri il costo è di 10€.

  

---

 **Consegna gratuita in giornata**  in provincia di [__Napoli*__](https://www.fermento24.com/pages/spedizione) e[ __Caserta*__](https://www.fermento24.com/pages/spedizione) per ordini superiori ai 25€ altrimenti il costo è di 3.50€

   

---

          

          

            {{ 'cart.general.cart_total' | t }}
            {{cart.total_price | money}}
2

for that you need to use add.js api of shopify to add product into the cart and make the popup open on the success of the ajax call.

1 Like
3

I’ve got a light knowledge of code but I’m by no mean the best at it, the main hurdle I see it to make the actual popup on click of the icon…

4

This is a rather extensive edit that you’ll be making, it’ll require a bit more than light knowledge of code to implement it. Like @pioneer100 said, you’ll need to add the product to the cart with javascript making an AJAX call. You have jQuery on your site already so you could use that in place of vanilla javascript. You’ll have to prevent the default action of the form. Something like:

Then after you add it, you need to use jQuery to get the cart in a similar way and build your HTML in javascript and inject it into your popup container. If you don’t know how to do the above, then it’ll be hard for you to proceed onto the next part. You’ll probably want to hire a developer or get an app that can do this for you if you aren’t looking to learn quite a bit about Javascript and HTML

1 Like
5

@Ninthony

I’ve talked with the developer of the template has in itself the Ajax popup, in fact if you open the link now it works. The problem that I’m facing now (mobile vision) is that, when I add a product, it doesn’t seem to react and show the products currently into the cart.