Search code examples
javascriptajaxbootstrap-4fetchbootstrap-modal

How to use javascript to dynamically add content to list in shopping cart menu

Hello I am new to javascript and my question is I am building a eCommerce website to learn web dev. And I am currently stuck with javascript how can I create a system that when a user adds to cart and opens up the shopping cart modal. A Get request using fetch is made to my server and I can dynamically populate a bootstrap4 list with the information from my server. I already have the api and server to pull data but I am stuck on figuring how to dynamically show the users cart items in the shopping cart modal and make each element clickable, add a id from my api.Please any code example would help.

this is the html code for the shopping cart side bar modal

<!-- Shopping Cart -->
<div class="modal fixed-right fade" id="modalShoppingCart" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-vertical" role="document" >

      <!-- Full cart (add `.d-none` to disable it) -->
      <div class="modal-content" >

        <!-- Close -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="fe fe-x" aria-hidden="true"></i>
        </button>

        <!-- Header-->
        <div class="modal-header line-height-fixed font-size-lg">
          <strong class="mx-auto">Your Cart (2)</strong>
        </div>

        <!-- List of products in cart 1 -->
        <ul class="list-group list-group-lg list-group-flush">
          <li class="list-group-item">
            <div class="row align-items-center">
              <div class="col-4">

                <!-- Image -->
                <a href="./product.html">
                  <img class="img-fluid"   src="/static/assets/img/products/product-6.jpg" alt="...">
                </a>

              </div>
              <div class="col-8">

                <!-- list rpoducts in cart -->
                <p class="font-size-sm font-weight-bold mb-6">
                  <a class="text-body" href="./product.html" >Product 1</a> <br>
                  <span class="text-muted">$49.00</span>
                </p>

                <!--Footer -->
                <div class="d-flex align-items-center">

                  <!-- Select -->
                  <select class="custom-select custom-select-xxs w-auto">
                    <option value="1">1</option>
                    <option value="1">2</option>
                    <option value="1">3</option>
                  </select>

                  <!-- Remove -->
                  <a class="font-size-xs text-gray-400 ml-auto" href="#!">
                    <i class="fe fe-x"></i> Remove
                  </a>

                </div>

              </div>
            </div>
          </li>

          <!--products in the cart 2-->
          <li class="list-group-item">
            <div class="row align-items-center">
              <div class="col-4">

                <!-- Image -->
                <a href="./product.html">
                  <img class="img-fluid" src="/static/assets/img/products/product-10.jpg" alt="...">
                </a>

              </div>
              <div class="col-8">

                <!-- liat rpoducts in cart -->
                <p class="font-size-sm font-weight-bold mb-6">
                  <a class="text-body" href="./product.html" >Product 2</a> <br>
                  <span class="text-muted">$29.00</span>
                </p>

                <!--Footer -->
                <div class="d-flex align-items-center">

                  <!-- Select -->
                  <select class="custom-select custom-select-xxs w-auto">
                    <option value="1">1</option>
                    <option value="1">2</option>
                    <option value="1">3</option>
                  </select>

                  <!-- Remove -->
                  <a class="font-size-xs text-gray-400 ml-auto" href="#!">
                    <i class="fe fe-x"></i> Remove
                  </a>

                </div>

              </div>
            </div>
          </li>
        </ul>

      </div>


        <!-- Subtotal Footer -->
        <div class="modal-footer line-height-fixed font-size-sm bg-light mt-auto">
          <strong>Subtotal</strong> <strong class="ml-auto" id="bagTotal">$</strong>
        </div>

        <!-- Buttons -->
        <div class="modal-body">
          <a class="btn btn-block btn-dark" href="/checkout">Continue to Checkout</a>
          <a class="btn btn-block btn-outline-dark" href="/bag">View Bag</a>
        </div>

the html shopping cart looks like this when clicked enter image description here how can I use javascript to populate this list with as many items from my database while keeping this structure

and this is the data structure for a users cart used in my api:

{  
 "session": "test-session",
 "cart total": 2,
  "products": [{
            "product_id": 1,
             "name": "product 1",
              "price": "$20",
               "image": "example.com/pics/product1.jpg"},
                   {
            "product_id": 2,
             "name": "product 2",
              "price": "$30",
               "image": "example.com/pics/product3.jpg"},
                     {
            "product_id": 3,
             "name": "product 3",
              "price": "$50",
               "image": "example.com/pics/product3.jpg"}]
Solution

  • There are multiple questions in this, so I will just give you the basics below. I assume you are using async await above to ensure you have the data available before updating the DOM.

    I have just created a list, which when you click on a list item, it will alert the product_id you just clicked on.

    Using a basic for loop, we loop over the products in the data, and for each item, create a new li element.

    We set a data attribute to each li, called product_id, for easy tracking when we click on the list items. If you are not sure what a data attribute is, inspect an li element that we created below, and you will see that it has product-id="1" etc on them.

    During the loop, we also add an event listener to each li element, and when clicked, we alert the data attribute we set above. You can do what ever you want in this event, and having the product_id, you can easily filter / update your data.

    const listEl = document.getElementById('js-list');
const yourData = {
  products: [{
    product_id: 1,
    price: '$20',
  },
  {
    product_id: 2,
    price: '$25',
  },
  {
    product_id: 3,
    price: '$30',
  },
]};

// There are a few ways to loop the products object, I am just going to a simple for loop
for (let i = 0; i < yourData.products.length; i++) {
  // Create the element
  const el = document.createElement("li");
  // we can use datasets to track clicks
  el.setAttribute('product-id', yourData.products[i].product_id);
  // Add event listeners
  el.addEventListener('click', () => {
    // getting the dataset value.
    const itemClicked = el.getAttribute('product-id');
    alert('You clicked on product ' + itemClicked);
  });
  // Set the content
  el.textContent = yourData.products[i].price;
  // Add the list item to the dom
  listEl.appendChild(el);
}
    <ul id="js-list"></ul>

    Hopefully this gets you on track.