0

So i am working on this college work i have where i need to build a e-commerce store. and i have this javascript code on the single product page and it is working perfectly, for example, when i click on the add-to-cart button it is added to the shopping-cart container. And now my problem is and i have no idea on how to do it. Is it even possible to pass that info (what has been inserted into the shopping-cart) through out the dif html pages. Like if i add one product to the cart and go back to the homepage, it should still appear on the shopping-cart container.

const decrementButton = document.querySelector(".decrement-quantity");
const incrementButton = document.querySelector(".increment-quantity");
const quantityDisplay = document.querySelector(".quantity-display");
let quantity = 1;
const maxQuantity = 4;

let remainingStock = maxQuantity;
decrementButton.addEventListener("click", function() {
  if(quantity > 1) {
      quantity--;
      quantityDisplay.textContent = quantity;
      incrementButton.disabled = false;
      // Check if the tooltip element is present and remove it
      const tooltip = incrementButton.querySelector(".tooltip");
      if (tooltip) {
          incrementButton.removeChild(tooltip);
      }
  }
  if (quantity === 0) {
      addToCartBtn.disabled = true;
  }
});


incrementButton.addEventListener("click", function() {
  if(quantity < remainingStock) {
      quantity++;
      quantityDisplay.textContent = quantity;
      incrementButton.disabled = false;
  } 
  if(quantity === remainingStock) {
      incrementButton.disabled = true;
      const tooltip = document.createElement("div");
      tooltip.setAttribute("data-tooltip", "");
      tooltip.innerHTML = "Sorry, no more products available";
      incrementButton.appendChild(tooltip);
      
  }
});



const addToCartBtn = document.getElementById("add-to-cart-btn");
const cartCount = document.getElementById("cart-count");
const shoppingCartContainer = document.getElementById("shopping-cart");
const slide1 = document.querySelector("#slide-1");
const imageSrc = slide1.src;
let image = document.querySelector('.product-slider img');
let value = document.getElementById("value");




let currentCount = 0;

addToCartBtn.addEventListener("click", function() {
  currentCount += quantity;
  remainingStock -= quantity;
  cartCount.innerHTML = `(${currentCount})`;
  quantity = remainingStock;
  quantityDisplay.textContent = remainingStock;

  // Create a new div to represent the product
  const productDiv = document.createElement("div");
  productDiv.classList.add("product");

  
  
  // Set the content of the div to the name, price, and image of the product
  productDiv.innerHTML = `
    <img src="${imageSrc}" alt="Aimé Leon Dore x 550 'Evergreen'">
    <h4>"${image.alt}"</h4>
    <p>${value.textContent}</p>
  `;
  shoppingCartContainer.appendChild(productDiv);
  
  if(remainingStock === 0){
    incrementButton.disabled = true;
    decrementButton.disabled = true;
    addToCartBtn.disabled = true;
    const tooltip = document.createElement("div");
    tooltip.setAttribute("data-tooltip", "");
    tooltip.innerHTML = "Sorry, no more products available";
    addToCartBtn.appendChild(tooltip);
  }
});


const cartMenuItem = document.getElementById("cart");
const shoppingCart = document.getElementById("shopping-cart");
const closeShoppingCart = document.getElementById("close-shopping-cart");


cartMenuItem.addEventListener("click", function() {
  if(shoppingCart.classList.contains("hidden")){
    shoppingCart.classList.remove("hidden");
  }else{
    shoppingCart.classList.add("show");
  }
});
closeShoppingCart.addEventListener("click", function() {
  if(shoppingCart.classList.contains("show")){
    shoppingCart.classList.remove("show");
  }else{
    shoppingCart.classList.add("hidden");
  }
});

So the main question is, is it possible to pass that kind of info with javascript? mind that, that everything needs to be hardcode, my professor doesn't let us use external libraries or frameworks -.-'

2 Answers2

0

Because you are only allowed to use frontend technologies, your possibilities are very limited. Without this limitation a backend would solve this problem. The backend creates a session for the user (a cookie is stored in the browser) and then assigns all HTTP requests to this user. More about this: What are sessions? How do they work?.

Therefore you need a way to store data with JavaScript and keep it peristent over multiple pages. Theoretically you can use cookies, but this is unnecessarily complicated and sometimes browsers forbid JavaScript to manipulate cookies. Therefore I don't recommend this solution.

It is better to use localStorage. This storage option is designed exactly for use-cases like this. The data remains persistent across multiple pages and even survives browser restarts. The usage is also very simple:

// Store data
localStorage.setItem('numberOfItems', '5');

// Read data
const number = localStorage.getItem('numberOfItems');

You can also use sessionStorage. This works exactly like localStorage, but the data is removed as soon as the page session ends. This session has nothing to do with the sessions above that the backend uses.

Suboptimierer
  • 554
  • 4
  • 11
  • and for what i have understood i need to add this to the script i have on the 'single product' page right? of to the scripts i have on the other html pages. shouldn't i add something to it as well? –  Jan 19 '23 at 21:18
  • My code is an example of how to use localStorage. You have to transfer it to your use case now. For example, as soon as you add items to the cart, you need to store them with localStorage. – Suboptimierer Jan 19 '23 at 21:24
-1

Cookies

If you want persistent data, but do not save it server side
(but in case of using a server, you also need at least one session/token cookie to link the data).

Local Storage
As mentioned in the comments.

Ferdinand
  • 1
  • 3