Steps for adding products to your shopping cart without using a JavaScript framework:

Question

Steps for adding products to your shopping cart without using a JavaScript framework:

As a newcomer to web development, I took on the challenge of creating an e-commerce website using only HTML, CSS, and vanilla JavaScript (without any frameworks).

I've encountered a roadblock while trying to implement the "Add to Cart" functionality for my products. Below is a snippet of my code:

<div class="small-container">
    <div class="row">
        <div class="col-4">
            <img src="images/20 ps4.png" alt=""/></a>
            <h4>20 Playstation Store(PSN)</h4>
            <p>$20.00</p>
            <button type="button" class="btn1" ><h3 class="text-btn">add to cart</h3></button>
        </div>

        <div class="col-4">
            <img src="images/25 ps4.png" alt="" />
            <h4>25 Playstation Store(PSN)</h4>
            <p>$25.00</p>
            <button type="button" class="btn1" onclick="window.location.href='cart.html'"><h3 class="text-btn">add to cart</h3></button>
        </div>
    </div>

For the JavaScript part:

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    // Continue with other JavaScript functions...
}

In terms of styling with CSS:

.row {
    margin-top: 50px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}

.col-4 {
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
  
.col-4 img {
    width: 100%;
}

Thank you for your help!

I am currently seeking a JavaScript function that will allow me to successfully add products to the shopping cart without the use of any frameworks.

javascript html css e-commerce

Answer 1

Answer №1

What is the purpose of defining variables like

var addToCartButtons = document.getElementsByClassName('btn1')

,

var quantityInputs = document.getElementsByClassName('btn1')

, and

var removeCartItemButtons = document.getElementsByClassName('btn1')

? These queries all target elements with the same class, resulting in identical element collections being returned.

Your approach shows promise, but ensure that you assign correct classes to your elements and use consistent query selections. Storing metadata about your items in localStorage can be a useful technique. You can find more information on using localStorage here. Additionally, consider using modern syntax such as forof loops or the const keyword for improved code readability.

(() => {
  const addToCardButtons = document.querySelectorAll('.btn--add_to_cart');
  for (const btn of addToCardButtons) {
    const identifier = btn.dataset.target;

    btn.addEventListener('click', () => addToCart(identifier))
  }

  const addToCart = (id) => {
    console.log(id);
    // handle 'add to cart' functionality
  }

  // other functionalities can follow the same structure
})()

<div class="small-container">
  <div class="row">
    <div class="col-4">
      <img src="images/20 ps4.png" alt="" /></a>
      <h4>20 Playstation Store(PSN)</h4>
      <p>$20.00</p>
      <button type="button" data-target="1" class="btn btn--add_to_cart">add to cart</button>
    </div>

    <!--2-->
    <div class="col-4">
      <img src="images/25 ps4.png" alt="" />
      <h4>25 Playstation Store(PSN)</h4>
      <p>$25.00</p>
      <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button>
    </div>

Answer 2

What is the purpose of defining variables like

var addToCartButtons = document.getElementsByClassName('btn1')

,

var quantityInputs = document.getElementsByClassName('btn1')

, and

var removeCartItemButtons = document.getElementsByClassName('btn1')

? These queries all target elements with the same class, resulting in identical element collections being returned.

Your approach shows promise, but ensure that you assign correct classes to your elements and use consistent query selections. Storing metadata about your items in localStorage can be a useful technique. You can find more information on using localStorage here. Additionally, consider using modern syntax such as forof loops or the const keyword for improved code readability.

(() => {
  const addToCardButtons = document.querySelectorAll('.btn--add_to_cart');
  for (const btn of addToCardButtons) {
    const identifier = btn.dataset.target;

    btn.addEventListener('click', () => addToCart(identifier))
  }

  const addToCart = (id) => {
    console.log(id);
    // handle 'add to cart' functionality
  }

  // other functionalities can follow the same structure
})()

<div class="small-container">
  <div class="row">
    <div class="col-4">
      <img src="images/20 ps4.png" alt="" /></a>
      <h4>20 Playstation Store(PSN)</h4>
      <p>$20.00</p>
      <button type="button" data-target="1" class="btn btn--add_to_cart">add to cart</button>
    </div>

    <!--2-->
    <div class="col-4">
      <img src="images/25 ps4.png" alt="" />
      <h4>25 Playstation Store(PSN)</h4>
      <p>$25.00</p>
      <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button>
    </div>

Steps for adding products to your shopping cart without using a JavaScript framework:

Answer №1

Similar questions

The Javascript/Jquery code executes just once on the initial event, doubles on the subsequent event, and continues to increase in

Generate a complete screenshot of a website using Chrome 59 through code

Creating a design where the divs on the sides utilize all the available space using only CSS and HTML

Modify the ColVis Appearance in Datatable Using JavaScript

Achieving Dynamic Center Alignment for One or Two DIVs

Can the functionality of a button be disabled after being clicked a total of 5 times?

Customizing event colors in Full Calendar

Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

Contrast the table column to a JSON object and modify a different column in an HTML file

Error 9 in Firebase: The function 'initializeApp' could not be located within the 'firebase/app' module

Prevent dropzone from refreshing the page

"Does anyone know of a specific jQuery function that allows for mapping a collection, where the `end`

In bootstrap 3.0, columns are arranged in a vertical stack only

Having trouble getting the `transformItems` feature in React InstantSearch RefinementList to

One method for assigning a unique identifier to dynamically generated buttons with jQuery

centering an angular material card on the webpage

Storing data in a text or HTML file using server-side JavaScript

Transmit information using JSON format in Angular 8 using FormData

This video cannot be played on this platform due to its privacy settings

Extract information from an external website using AJAX in Laravel