Home
Michael Andreuzza
Cart with alpinejs and tailwind css

Cart with alpinejs and tailwind css

How to add items to your cart with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Input eCommerce

Author Michael Andreuzza

3.4k

Fork Fullscreen

<div class="prose text-gray-500 prose-sm prose-headings:font-normal mt-6 border-t pt-6 prose-headings:text-xl mx-auto max-w-sm w-full">
     <h4>Your items</h4>
     <ul>
      <template x-for="(item, index) in cart" :key="index">
       <li>
        <span x-text="`${item.name} x${item.quantity}`"></span> - $<span x-text="item.price * item.quantity" class="mr-4"></span>
        <button @click="increaseQuantity(index)" class="px-3 py-1 bg-gray-100 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">+</button>
        <button @click="decreaseQuantity(index)" class="px-3 py-1 bg-gray-100 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">-</button>
        <button @click="removeFromCart(index)" class="px-3 py-1 bg-gray-200 rounded-md text-sm font-semibold text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Remove</button>
       </li>
      </template>
     </ul>
     <div>Total Price: $<span x-text="totalPrice()"></span></div>
    </div>
   </div>

</div>
  
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to add items to your cart with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-600 underline">
       <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a>
      </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1">
       <a href="https://lexingtonthemes.com/tutorials/hhow-to-add-item-to-your-cart-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a>
      </div>
      <div class="flex h-0 flex-1">
       <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/cart/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600">Get the code</a>
      </div>
     </div>
    </div>
   </div>
  </div>
  
 </div>
</section>

Related Examples