About this snippet

Improve your shop with this sliding cart drawer. It slides out smoothly from the right side, and we included a clean layout for products and subtotal.

Size
4.2 KB
Uses
HTML, CSS, JavaScript
Loads
placehold.co
Views
110

Collections

Related snippets

<div class="app-wrap">
  <button id="open-cart-btn" class="main-btn">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="9" cy="21" r="1"></circle>
      <circle cx="20" cy="21" r="1"></circle>
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
    </svg>
    Open Cart
  </button>

  <div class="cart-overlay" id="cart-overlay"></div>
  
  <div class="cart-drawer" id="cart-drawer">
    <div class="drawer-header">
      <h2>Your Cart</h2>
      <button id="close-cart-btn" class="close-btn">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
    
    <div class="drawer-body">
      <div class="cart-item">
        <img src="https://placehold.co/80x80/f3f4f6/a8a29e?text=Shoes" alt="Product">
        <div class="item-details">
          <h4>Running Shoes</h4>
          <p>$89.99</p>
        </div>
      </div>
      <div class="cart-item">
        <img src="https://placehold.co/80x80/f3f4f6/a8a29e?text=Shirt" alt="Product">
        <div class="item-details">
          <h4>Cotton T-Shirt</h4>
          <p>$24.99</p>
        </div>
      </div>
    </div>
    
    <div class="drawer-footer">
      <div class="subtotal">
        <span>Subtotal</span>
        <span>$114.98</span>
      </div>
      <button class="checkout-btn">Proceed to Checkout</button>
    </div>
  </div>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f9fafb;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.main-btn {
  background: #111827;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.cart-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: #ffffff;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 101;
  display: flex;
  flex-direction: column;
}

.cart-drawer.active {
  right: 0;
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h2 { 
  margin: 0; 
  font-size: 1.25rem; 
}

.close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}

.drawer-body {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-item {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cart-item img {
  border-radius: 8px;
}

.item-details h4 { 
  margin: 0 0 4px 0; 
  color: #111827; 
}

.item-details p { 
  margin: 0; 
  color: #6b7280; 
  font-weight: 500; 
}

.drawer-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
}

.subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.checkout-btn {
  width: 100%;
  background: #3b82f6;
  color: #ffffff;
  border: none;
  padding: 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
const openBtn = document.getElementById("open-cart-btn");
const closeBtn = document.getElementById("close-cart-btn");
const drawer = document.getElementById("cart-drawer");
const overlay = document.getElementById("cart-overlay");

function toggleCart() {
  drawer.classList.toggle("active");
  overlay.classList.toggle("active");
}

openBtn.addEventListener("click", toggleCart);
closeBtn.addEventListener("click", toggleCart);
overlay.addEventListener("click", toggleCart);
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save