Shopify AJAX Add to Cart

Shopify AJAX Add to Cart

This snippet allows you to add products to the Shopify cart without a page reload using the AJAX Cart API. It includes error handling and cart drawer update.

// Add to cart with AJAX
function addToCart(variantId, quantity = 1) {
  const formData = {
    items: [{
      id: variantId,
      quantity: quantity
    }]
  };

  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData)
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);

    // Update cart count
    updateCartCount();

    // Show success message
    showNotification('Product added to cart!');

    // Optional: Open cart drawer
    openCartDrawer();
  })
  .catch((error) => {
    console.error('Error:', error);
    showNotification('Failed to add product to cart', 'error');
  });
}

// Update cart count
function updateCartCount() {
  fetch('/cart.js')
    .then(response => response.json())
    .then(cart => {
      const cartCount = document.querySelector('.cart-count');
      if (cartCount) {
        cartCount.textContent = cart.item_count;
      }
    });
}

// Show notification
function showNotification(message, type = 'success') {
  const notification = document.createElement('div');
  notification.className = `notification notification--${type}`;
  notification.textContent = message;
  document.body.appendChild(notification);

  setTimeout(() => {
    notification.remove();
  }, 3000);
}

// Example usage with product form
document.querySelectorAll('form[action="/cart/add"]').forEach(form => {
  form.addEventListener('submit', function(e) {
    e.preventDefault();

    const variantId = form.querySelector('[name="id"]').value;
    const quantity = form.querySelector('[name="quantity"]')?.value || 1;

    addToCart(variantId, parseInt(quantity));
  });
});

Features

• No Page Reload: Adds products without refreshing the page
• Error Handling: Catches and displays errors gracefully
• Cart Count Update: Automatically updates cart counter
• Notification System: Shows success/error messages
• Progressive Enhancement: Works with existing forms

Usage with Liquid

Add this to your product form:

<form action="/cart/add" method="post" class="product-form">
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <input type="number" name="quantity" value="1" min="1">

  <button type="submit" class="btn btn--primary">
    Add to Cart
  </button>
</form>

Styling the Notification

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  z-index: 9999;
  animation: slideIn 0.3s ease;
}

.notification--success {
  background: #10b981;
}

.notification--error {
  background: #ef4444;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}