Cracking the Code: Adding Quick-Add to Your Shopify Carousel

Once upon a time, in the whimsical land of DIY e-commerce - okay, more like last Wednesday, but let’s lean into the narrative here - I embarked on a treacherous coding quest that led me down the rabbit hole of the Shopify forums. Why, you ask? A mysterious puzzle awaited me: how to craft custom "Quick Add" buttons for a carousel that actually worked as intended. Fast forward to today, let's unravel this conundrum together, shall we?

The Carriage to the Cart: Setting the Scene

It all began with the noble intention of adding a seamless "Quick Add" feature in a custom-built product carousel. Easy peasy, right? Not quite! Sometimes, the road to functionality is paved with unexpected detours, similar to when we think we’ve added milk to our coffee but realize it was cream instead – not life-threatening, but definitely not what we intended.

Here’s how it plays out on our journey: we attempt to replicate the graceful cart-drawer behavior found in Shopify’s native collections. The idea is for each button tap to elegantly hand over our product to the cart and magically open the cart drawer – no page reload needed. This brings us to the crux of our adventure.

Step 1: Embrace the Code

In a virtual cauldron - aka your Shopify Theme Editor - we start by setting the groundwork with JavaScript. Here's the balmy potion (code) that enacts the magic of adding a product to the cart:

;(function () {
  const quickAddButtons = document.querySelectorAll('.quick-add-button')

  quickAddButtons.forEach((button) => {
    button.addEventListener('click', async function (e) {
      e.preventDefault()

      const productId = this.getAttribute('data-product-id')
      const quantity = 1 // Change this if needed

      try {
        await fetch(`/cart/add.js`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ items: [{ id: productId, quantity }] }),
        })

        openCartDrawer() // Call the function to open the cart drawer
        console.log(`Product ${productId} added successfully`)
      } catch (error) {
        console.log('Error adding product:', error)
      }
    })
  })

  function openCartDrawer() {
    document.querySelector('#cart-drawer').classList.add('active')
  }
})()

Here, we place our enchanted fetch request through the /cart/add.js endpoint. It behaves like our local market vendor, fetching what we need, preserving the spontaneity of our cart-drawer opening seamlessly.

Step 2: Open Sesame - Unveil the Drawer

However, merely adding the product isn't enough. Like the climax of any great story, once the hero arrives, the doors must open dramatically – enter the cart drawer! Our code snippet already includes a simple function, openCartDrawer, which assumes you've got a similar setup ready for activation.

“Well,” you might muse with a hint of excitement, “how do we ensure the carrots are in the stew and not just floating in space?” Excellent point! A little extra seasoning in the form of CSS and HTML is required to ensure that drawer opens.

Step 3: Styling the Experience

Get cozy in your stylesheet (let’s call it theme.scss.liquid, shall we?) and add some sassy CSS to make the drawer slide like a charm:

#cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

#cart-drawer.active {
  transform: translateX(0);
}

This cover of styles makes sure your drawer slides in from the right without so much as a squeak. You can customize the drawer width and joyous little box shadows well, just as your heart desires.

Step 4: Moment of Discovery

You stand back, admiring your canvas, where every click, clack, or tap unfolds a scene just like you envisioned. Hits the spot, doesn’t it?

The world of custom quick adds now dances at your fingertips, sprinkled with just enough technical wizardry to elevate your Shopify experience. As we step away from our coding escapades with a sense of accomplishment and a hint of whimsy, remember: in the kingdom of e-commerce puzzles, there's always another scroll to unravel. And we, intrepid explorers at heart, be ready for the next tale.