@mayurgodhani/ecomtools-cli/data/cart-drawer.txt

E-commerce tools MCP server for Shopify development

Title: Shopify Cart Drawer
Description: A responsive and customizable cart drawer for Shopify themes with quantity controls, subtotals, and checkout button.
Code:
<!-- Cart Drawer HTML -->
<div id="cart-drawer" class="cart-drawer">
  <div class="cart-drawer__header">
    <h2>Your Cart</h2>
    <button class="cart-drawer__close" aria-label="Close cart">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </button>
  </div>
  
  <div class="cart-drawer__content">
    {%- if cart.item_count > 0 -%}
      <form action="{{ routes.cart_url }}" method="post" id="cart-drawer-form">
        {%- for item in cart.items -%}
          <div class="cart-drawer__item" data-item-key="{{ item.key }}">
            <div class="cart-drawer__item-image">
              <img src="{{ item.image | img_url: '120x' }}" alt="{{ item.title | escape }}" width="70" height="70">
            </div>
            <div class="cart-drawer__item-details">
              <a href="{{ item.url }}" class="cart-drawer__item-title">
                {{ item.product.title }}
              </a>
              <div class="cart-drawer__item-variant">
                {{ item.variant.title }}
              </div>
              <div class="cart-drawer__item-price">
                {{ item.final_price | money }}
              </div>
              <div class="cart-drawer__item-quantity">
                <button type="button" class="quantity-button" data-action="decrease">-</button>
                <input type="number" name="updates[{{ item.key }}]" value="{{ item.quantity }}" min="0" aria-label="Quantity">
                <button type="button" class="quantity-button" data-action="increase">+</button>
              </div>
              <button type="button" class="cart-drawer__item-remove" data-item-key="{{ item.key }}">
                Remove
              </button>
            </div>
          </div>
        {%- endfor -%}
        
        <div class="cart-drawer__footer">
          <div class="cart-drawer__subtotal">
            <span>Subtotal</span>
            <span>{{ cart.total_price | money }}</span>
          </div>
          <div class="cart-drawer__taxes">
            <small>Tax included. <a href="{{ shop.policies.shipping_policy.url }}">Shipping</a> calculated at checkout.</small>
          </div>
          <button type="submit" name="checkout" class="cart-drawer__checkout-button">
            Checkout
          </button>
        </div>
      </form>
    {%- else -%}
      <div class="cart-drawer__empty">
        <p>Your cart is currently empty.</p>
        <a href="{{ routes.all_products_collection_url }}" class="cart-drawer__continue-shopping">
          Continue Shopping
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

<div id="cart-overlay" class="cart-overlay"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Cart drawer functionality
  const cartDrawer = document.getElementById('cart-drawer');
  const cartToggle = document.querySelectorAll('.cart-toggle');
  const cartClose = document.querySelector('.cart-drawer__close');
  const cartOverlay = document.getElementById('cart-overlay');
  
  // Open cart drawer
  cartToggle.forEach(function(toggle) {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      cartDrawer.classList.add('cart-drawer--open');
      document.body.classList.add('cart-drawer-open');
      cartOverlay.classList.add('cart-overlay--active');
    });
  });
  
  // Close cart drawer
  if (cartClose) {
    cartClose.addEventListener('click', function() {
      cartDrawer.classList.remove('cart-drawer--open');
      document.body.classList.remove('cart-drawer-open');
      cartOverlay.classList.remove('cart-overlay--active');
    });
  }
  
  if (cartOverlay) {
    cartOverlay.addEventListener('click', function() {
      cartDrawer.classList.remove('cart-drawer--open');
      document.body.classList.remove('cart-drawer-open');
      cartOverlay.classList.remove('cart-overlay--active');
    });
  }
  
  // Handle quantity buttons
  const quantityButtons = document.querySelectorAll('.quantity-button');
  quantityButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const input = this.parentNode.querySelector('input');
      const currentValue = parseInt(input.value);
      
      if (this.dataset.action === 'increase') {
        input.value = currentValue + 1;
      } else if (this.dataset.action === 'decrease' && currentValue > 1) {
        input.value = currentValue - 1;
      }
      
      // You would typically have AJAX cart update here
    });
  });
});
</script>

<style>
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background-color: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

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

/* Add your additional CSS here */
</style>