구성 요소 쇼핑 카트 Shopping Cart 구성 요소

Shopping Cart 구성 요소

패션 및 뷰티 제품을 위해 설계된 복잡하고 깨끗하며 신뢰할 수 있는 장바구니 구성 요소로, 풍부한 가을 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
    <!-- Order Summary / Cart Totals -->
    <div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
      <div class="space-y-4 mb-6">
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$385.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Shipping & Handling</span>
          <span>$15.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Taxes (5%)</span>
          <span>$19.25</span>
        </div>
      </div>
      <div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
        <span>Order Total</span>
        <span>$419.25</span>
      </div>

      <div class="mt-8">
        <label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
        <div class="flex">
          <input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
          <button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
            Apply
          </button>
        </div>
      </div>

      <button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
        Proceed to Checkout
      </button>
      <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
        Secure payment via SSL.
      </p>
    </div>

    <!-- Cart Items -->
    <div class="lg:w-2/3 p-6 sm:p-8">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>

      <div class="space-y-6">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
        <a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          Continue Shopping
        </a>
        <button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
          Clear Cart
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

Skeuomorphic Shopping Cart Component는 파스텔 색상 구성표, 반응형 및 다크 모드를 지원합니다.

열다

Retro_Vintage_Shopping_Cart_Component

레트로/빈티지 미학을 가미한 반응형 장바구니 구성 요소로, 세피아/브라운 톤을 사용하여 제품 쇼케이스에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Shopping Cart 구성 요소

반응형 디자인과 다크 모드를 지원하는 레트로 빈티지 스타일의 장바구니 구성 요소로, Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 제공합니다.

열다