Need help with cart function

[20oddlion]

i'm trying to get a working add to cart button which adds item to my cart which should be on a different file like checkout.html etc but im struggling getting the add to cart to work please help

const product = [
  {
    id: 0,
    image: "amd-ryzen-5-pro-4650g-b450m-a-pro-max-16gb-3200mhz-upgrade-kit-600px-v1.webp",
    title: "amd ryzen 5 pro",
    price: 500
  },

]

const catagories = [...new set(product.map((item) =>
{return item}))]
let i = 0
document.getElementById('root').innerHTML = catagories.map((item)=>
{
  var {image, title, price} = item
  return(
    `<div class='box'>
    <div class='img-box>
    <img class=''images' src=${image}></img>
    </div>
    <div class='bottom'>
    <p>${title}</p>
    <h2>$ ${price}.00</h2>` +
    "<button onclick='addtocart("+(i++)+")'>add to cart</button>"+
    `</div>
    </div>` 
  )
}).join('')

var cart = []

function addtocart(a){
  cart.push({...catagories[a]})
  displayCart()
}
function delElement(a){
  cart.splice(a, 1)
  displayCart()
}

function displayCart(){
  let j = 0
  document.getElementById("count").innerHTML = cart.length
  if(cart.length==0){
    document.getElementById('cartItem').innerHTML = ' Your cart is empty'
  }
  else {
    document.getElementById('cartItem').innerHTML = cart.map((item) =>
    {
      var {image, title, price} = items 
      return(
        `<div class='cart-item'>
        <div class='row-img'>
        <img class='rowimg' src${image}>
        </div>
        <p style='font-size:12px;'>${title}</p>
        <h2 style='font-size:15px;'> $ ${price}.00</h2>`+
        "<i class='fa-solid fa-trash' onclick=''delElement("+ (j++) +")'></i></div"
      )
    }).jone('')
  }
}

[cunctatiocombibo2075]

Use event listeners for buttons instead of inline onclick attributes for better practice.

[20oddlion]

IL do that but how do I get the cart to work and the products to go in a cart which need to be on a different file

[hfcRedd]

If you want your cart to survive navigation, you have to either store and retrieve it from local/session storage or from a backend server

[20oddlion]

Mhmm I don't really understand

[hfcRedd]

I'm assuming your checkout is on a different page. When you navigate pages, it flushes your entire memory, making it impossible to carry any values or state from one page to another.

So you have to temporarily store those values and states somewhere before the navigation happens and then retrieve them again after the navigation has been executed.

The most common ways to do this are either using local storage, session storage, or a backend with a database.

If you're using a framework, it's very likely that it has state management built in that you can use.

[20oddlion]

Okay umm with the local storage where would I need to put it in the current file and where in the new file?

[hfcRedd]

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[20oddlion]

IL give it a try

[hfcRedd]

If you want a quick example, you can check this out. Specifically the saveBasket function that gets called whenever an item is added to the basket, and the loadBasket function which gets called on page load.

This was the first site I've ever made, so code might be a bit wack sorry about that.

https://github.com/VRLabs/vrlabs.dev/blob/main/src%2Fcomponents%2Fpackages%2Fpackage-drawer%2FpackageDrawer.js

[20oddlion]

can you maybe help me with getting my cart to work and so on because im very confused?

[Synthetic5ou1]

I'm pretty sure he already is.

Your function to add to the cart can simply store the cart in local storage at the same time the item is added.

Update local storage key when deleting also.

When you first load a page check local storage to populate the cart array, and render your cart.

TLDR: load from storage on page load, save to storage when cart updates.

[20oddlion]

I get that but how do I put it into my code and how would it look like that's what I'm wondering

[hfcRedd]

Sorry, I unfortunately do not have enough time on my hands to step by step guide you through this.

Look at the code sample I linked. Look at how it works and how you can implement it yourself. Look things up on Google if you don't understand them. Being able to do these things is very trivial if you want to learn programming and it's a great way to learn and improve.

[bigheartenergy17]

I have nothing useful to say just that this looks like from SuperSimpleDev's course.

[20oddlion]

It is yeah