Guide to using Javascript to dynamically insert items into the shopping cart menu list

Question

Guide to using Javascript to dynamically insert items into the shopping cart menu list

Greetings! I am diving into the world of JavaScript and currently facing a challenge while working on my eCommerce website project to enhance my web development skills. My query pertains to creating a dynamic system where, upon a user adding items to their cart and opening the shopping cart modal, a GET request utilizing the fetch method communicates with my server. This request retrieves data from my server's API which can then be used to populate a Bootstrap 4 list in real-time. While I have successfully set up the API and server endpoints for data retrieval, I am struggling with implementing the functionality to dynamically showcase the user's cart items within the shopping cart modal and enable each element to be clickable. Additionally, I aim to incorporate product IDs obtained from my API responses. Any code snippets or examples would greatly aid me in this endeavor.

Below is the HTML markup defining the structure of the shopping cart sidebar 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>

...

Given the visual representation of the shopping cart that appears when clicked, as seen here: [Image Link], how can I leverage JavaScript to dynamically populate this list with numerous items retrieved from my database, maintaining the existing structure?

For reference, the following outlines the data structure representing a user's cart utilized within 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"}]

javascript ajax bootstrap-4 fetch bootstrap-modal

Answer 1

Answer №1

Here are the essential steps to achieve this functionality. Assuming you are using async await to make sure the data is available before updating the DOM.

I've implemented a list where clicking on an item will display the product_id of that item.

By looping through the products in the data using a simple for loop, I create a new li element for each product.

Each li element is assigned a data attribute called product_id for easy reference when clicked. You can inspect these data attributes by examining the created li elements.

An event listener is attached to each li element during the loop. When clicked, it alerts the product_id associated with that item. This allows you to easily manipulate or update your data based on the selected product_id.

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

// Loop through the products object using a simple for loop
for (let i = 0; i < yourData.products.length; i++) {
  // Create a new li element
  const el = document.createElement("li");
  // Assign the product_id as a data attribute
  el.setAttribute('product-id', yourData.products[i].product_id);
  // Add event listeners
  el.addEventListener('click', () => {
    // Retrieve the product_id from the dataset
    const itemClicked = el.getAttribute('product-id');
    alert('You clicked on product ' + itemClicked);
  });
  // Set the content of the li element
  el.textContent = yourData.products[i].price;
  // Append the li element to the list
  listEl.appendChild(el);
}

<ul id="js-list"></ul>

This should help you get started in the right direction.

Answer 2

Here are the essential steps to achieve this functionality. Assuming you are using async await to make sure the data is available before updating the DOM.

I've implemented a list where clicking on an item will display the product_id of that item.

By looping through the products in the data using a simple for loop, I create a new li element for each product.

Each li element is assigned a data attribute called product_id for easy reference when clicked. You can inspect these data attributes by examining the created li elements.

An event listener is attached to each li element during the loop. When clicked, it alerts the product_id associated with that item. This allows you to easily manipulate or update your data based on the selected product_id.

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

// Loop through the products object using a simple for loop
for (let i = 0; i < yourData.products.length; i++) {
  // Create a new li element
  const el = document.createElement("li");
  // Assign the product_id as a data attribute
  el.setAttribute('product-id', yourData.products[i].product_id);
  // Add event listeners
  el.addEventListener('click', () => {
    // Retrieve the product_id from the dataset
    const itemClicked = el.getAttribute('product-id');
    alert('You clicked on product ' + itemClicked);
  });
  // Set the content of the li element
  el.textContent = yourData.products[i].price;
  // Append the li element to the list
  listEl.appendChild(el);
}

<ul id="js-list"></ul>

This should help you get started in the right direction.

Guide to using Javascript to dynamically insert items into the shopping cart menu list

Answer №1

Similar questions

Issue with Jquery modal not functioning properly on second attempt

Vuex was unable to locate the required dependency

`How can I activate a modal window when an option is chosen?`

Using Typescript in NextJS 13 application router, implement asynchronous fetching with async/await

Validating fields using JavaScript and HTML

Issue with Bootstrap Grid functionality

What is the best way to stop an embedded mp4 video from playing when a dynamically generated button is clicked?

Issues with the initial calculator project I built using JavaScript (excluding HTML and CSS)

How is the script type "text/html" utilized in contemporary applications? Is this specific example regarded as effective usage?

There was an error in the syntax: a semicolon is missing before the statement

Inserting a vertical barrier in the midst of the content

Goodbye.js reliance on lodash

Transforming a JSON into a JavaScript object using deserialization

Does the onchange function in the dropdown list only work when the first item is changed?

What is the reason for not being able to utilize the same ID more than once?

React is unable to identify the property that was passed to a styled-component in Material UI

What is the best way to clear h:messages within an ace:dialog following an ajax operation?

The property of undefined map cannot be read

Assign a custom value to the ng-options and ensure that the first option is selected by default

Building interactive forms in Angular 6