Automatically Open Cart Drawer When Item Added To Cart In Pipeline Theme

[JAFC]

Has anyone got the code snippet to automatically open the cart drawer when an item is added to cart in the Pipeline theme?

Thanks in advance

[GemPages]

Hello @JAFC 

It's GemPages support team and glad to support you today.

This is a feature of the theme, set in customize

I would like to give you a solution to support you:

1. Go to Online Store -> Theme -> Customize:

2. Goto settings -> cart
3. Select Cart drawer and save

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[JAFC]

Hi @GemPages 
This option leads to a whole new page opening up. I would like the cart draw to slide our automatically when an item is added to cart.

This issue was raised by another user in this post but no solution was provided: https://community.shopify.com/c/shopify-design/automatically-open-cart-drawer-when-item-added-to-car...

Please see the screenshots in this post for reference.

Thanks again!

[EcomGraduates]

Hello there  

To automatically open the cart drawer when an item is added to the cart in a Shopify store using the Pipeline theme, follow these steps:

1. In the Shopify admin, go to the "Online Store" section and click on "Themes."

2. Find the Pipeline theme and click on the "Actions" dropdown, then select "Edit code."

3. In the "Sections" directory, find the "cart-template.liquid" file and click on it to open it for editing.

4. Find the line of code that adds an item to the cart, which should look something like this:

{% if current_variant.available %}
  <form action="/cart/add" method="post" enctype="multipart/form-data">
    {% include 'add-to-cart-form' %}
  </form>
{% endif %}

1. Add a JavaScript snippet that opens the cart drawer when the form is submitted. You can do this by wrapping the form in a div element and adding an onSubmit event handler to the form:

{% if current_variant.available %}
  <div id="add-to-cart-form">
    <form action="/cart/add" method="post" enctype="multipart/form-data" onSubmit="Shopify.AjaxCart.toggle()">
      {% include 'add-to-cart-form' %}
    </form>
  </div>
{% endif %}

1. Save your changes and refresh your store to see the cart drawer automatically open when an item is added to the cart.

hope this helps!

[JAFC]

Hi @EcomGraduates thanks for your response.  I checked the cart-template.liquid and that line of code doesn't appear to exist. We're using Pipeline version 6.2.2 and the site is dormusleep.com if that helps.

Thanks again

[Mudassir11]

Hi,
i hope you are doing well its not working and not trigging my drawer please can you give me solution?

My website https://www.teliaoils.com/

[JAFC · Accepted solution]

1. Add this snippet to end of theme.css

/* CSS - Hide the product add popdown */
.product-add-popdown{
display: none !important;
}
/* end */

2. Add this snippet to end of theme.js

/* Javascript - Show cart drawer when product added to cart */
document.addEventListener('theme:cart:popdown', (e) => {
const listener = (e) => {
document.querySelector('[data-drawer="drawer-cart"]').dispatchEvent(
new CustomEvent('theme:drawer:open', {
bubbles: false,
})
);
document.removeEventListener('theme:cart:change', listener);
};
document.addEventListener('theme:cart:change', listener);
});
/* end */

[ShroomSmoothie]

Hey JAFC - I can't thank you enough for this....

THANK YOU THANK YOU THANK YOU!! 

Seriously... thank you!

May the rest of your life be filled with positive blessings and good karma.

[siisii03]

can you also help me? we are using minimog theme