jQuery Shopping Cart Tutorial 🛍️🛍️

Welcome to the jQuery Shopping Cart tutorial! In this comprehensive guide, we'll build a functional shopping cart for an online store, exploring essential jQuery concepts along the way. This tutorial is suitable for both beginners and intermediate learners. Let's get started! 🎯

What is jQuery? 🤔

jQuery is a popular, open-source JavaScript library that simplifies HTML document traversing, event handling, and animation. It works across various browsers and platforms, making it perfect for building interactive websites and applications. 💡

Setting Up the Shopping Cart 🛍️

First, let's create the basic HTML structure for our shopping cart:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Shopping Cart</title>
    <!-- jQuery Library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- Shopping cart content goes here -->
</body>
</html>

📝 Note: We've included the jQuery library in our HTML file. Now, let's create our shopping cart items and add them to the page.

Creating Shopping Cart Items 🛍️

html

<div id="products">
    <div class="product">
        <h3>Product 1</h3>
        <p>$20</p>
        <button id="addToCart1">Add to Cart</button>
    </div>
    <!-- Repeat for more products -->
</div>

Adding Items to the Cart 🛒

Next, let's write some jQuery code to handle adding items to the cart:

javascript

$(document).ready(function() {
    // Adding product 1 to the cart
    $("#addToCart1").click(function() {
        // Create a new item in the cart
        var cartItem = `<li id="cartItem1">Product 1 - $20</li>`;

        // Append the new item to the cart
        $("#cart").append(cartItem);
    });

    // Add more products as needed
});

📝 Note: We've created a simple product and added a click event listener to the "Add to Cart" button. When the button is clicked, we create a new cart item and append it to the cart list.

Displaying the Shopping Cart 🛍️

Now, let's create the shopping cart and total price display:

html

<ol id="cart"></ol>
<p id="totalPrice">Total: $0</p>

Next, update the jQuery code to update the cart and total price when items are added:

javascript

$(document).ready(function() {
    // Adding product 1 to the cart
    $("#addToCart1").click(function() {
        // Create a new item in the cart
        var cartItem = `<li id="cartItem1">Product 1 - $20</li>`;

        // Append the new item to the cart
        $("#cart").append(cartItem);

        // Update the total price
        updateTotalPrice();
    });

    // Add more products as needed

    // Function to update the total price
    function updateTotalPrice() {
        var total = 0;
        $("#cart li").each(function() {
            total += parseFloat($(this).text().split('$')[1]);
        });
        $("#totalPrice").text("Total: $" + total.toFixed(2));
    }
});

📝 Note: We've added a function to calculate the total price of all items in the cart and updated the total price display whenever an item is added.

Quiz: What is the purpose of the jQuery library? 🤔

That's it for this lesson! In the next part, we'll explore more advanced topics like removing items from the cart, updating item quantities, and storing cart data. Until then, keep practicing and enjoy building your own shopping cart! 🛍️🚀