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

4.2k

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

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

4.6k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

1 year ago

1.6k
Email input

Author:
Sophia Baker

3 years ago

11.7k
Product Page
Showcase for the product.

Author:
Prem..

4 years ago

34.6k
Select input

Author:
Sophia Baker

3 years ago

15.1k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

8 months ago

806
Hover Button
Hover button then a overlay came from bottom to top

Author:
Md. Tofayel islam

2 years ago

2.6k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

24.8k
Textarea input
Fancy Textarea

Author:
Piet Vriend

3 years ago

11.8k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

13.1k
Maintenance mode

Author:
Maxim

2 years ago

4.7k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

3 years ago

14.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components