How to Open Cart Drawer When Item Added To Cart In Pipeline Theme

[tasnim07]

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

I have a checkbox inside the cart drawer, and when the checkbox is checked, the gift wrap product is automatically added to the cart. When unchecked, the product is removed.

I am able to add and remove the product successfully. However, the product is not appearing in the cart when added, and it is not being removed when unchecked.

I have tried initializing the cart again and dispatching the event, but it’s not working in the Pipeline theme.

Can anyone help me, please?

Image: https://ibb.co.com/cSMjMWks

[goldi07]

Hello @tasnim07  try this 

To automatically open the cart drawer in the Pipeline theme when an item is added to the cart, you need to do the following:

1. Javascript: Automatically Open Cart Drawer & Update Cart
. Paste this in your theme.js or custom JS file.

document.addEventListener("DOMContentLoaded", function () {
  // Detect when an item is added to cart
  document.body.addEventListener("submit", function (event) {
    if (event.target.matches("form[action*='/cart/add']")) {
      event.preventDefault(); // Prevent page reload

      let formData = new FormData(event.target);

      fetch('/cart/add.js', {
        method: 'POST',
        body: formData
      })
        .then(response => response.json())
        .then(data => {
          console.log("Item added:", data);
          updateCartDrawer(); // Refresh the cart drawer
          openCartDrawer(); // Open the cart drawer
        })
        .catch(error => console.error("Error adding to cart:", error));
    }
  });

  // Gift Wrap Checkbox Functionality
  document.body.addEventListener("change", function (event) {
    if (event.target.id === "gift-wrap-checkbox") {
      let giftWrapVariantId = 1234567890; // Replace with your actual gift wrap variant ID

      if (event.target.checked) {
        fetch('/cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: giftWrapVariantId, quantity: 1 })
        })
          .then(response => response.json())
          .then(() => {
            setTimeout(updateCartDrawer, 500); // Delay to ensure proper update
            openCartDrawer();
          });
      } else {
        fetch('/cart/update.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ updates: { [giftWrapVariantId]: 0 } })
        })
          .then(response => response.json())
          .then(() => {
            setTimeout(updateCartDrawer, 500);
            openCartDrawer();
          });
      }
    }
  });
});

// Function to update cart drawer content
function updateCartDrawer() {
  fetch('/cart.js')
    .then(response => response.json())
    .then(cart => {
      document.dispatchEvent(new Event('cart:updated')); // Update event
    })
    .catch(error => console.error('Error updating cart:', error));
}

// Function to open the cart drawer
function openCartDrawer() {
  const cartDrawer = document.querySelector(".cart-drawer");
  if (cartDrawer) {
    cartDrawer.classList.add("is-open");
  }
}

// Close cart drawer when clicking outside
document.addEventListener("click", function (event) {
  const cartDrawer = document.querySelector(".cart-drawer");
  if (cartDrawer && cartDrawer.classList.contains("is-open") && !cartDrawer.contains(event.target)) {
    cartDrawer.classList.remove("is-open");
  }
});

2.  HTML: Cart Drawer Structure
. Ensure your Pipeline theme has this in cart-drawer.liquid.

<div class="cart-drawer">
  <div class="cart-drawer__inner">
    <button class="cart-drawer__close">Close</button>
    <div class="cart-drawer__content">
      <!-- Cart items will be dynamically updated here -->
    </div>
  </div>
</div>

3. CSS: Cart Drawer Animation
. Paste this in theme.css or base.css

.cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 9999;
}

.cart-drawer.is-open {
  transform: translateX(0);
}

.cart-drawer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

Final Steps:
1. Add a product → Cart drawer should open.
2. Check/uncheck Gift Wrap → Cart should update.
3. Click outside the cart → Cart drawer should close.

Thank you 😊