API rendering

god morgon vet någon hur ska jag få in en "Add to cart" knapp in i render functionen så att det kommer under varje product?

här är coden:

[code]
[10:02]
function render(products){
console.log(products);
let output = "";
products.forEach((product) => output +=
<li><h2>${product.title}<h2></li>
<img src="${product.image}"class="prod-img"/></img>
<li>${product.price}</li>
<li>${product.description}</li>

);

document.getElementById("output").innerHTML = output};
[code]
sen lyckades jag ändra på img genom att koppla den till min css class men jag lyckas

inte med de andra

tack för hjälpen i förväg

Jag tror du behöver förklara lite bättre vad du vill. Lägg gärna koden i ett kodblock också ("Infoga programmeringskod"-knappen).

Hej vad roligt att du vill hjälpa till , här är koden först(jag har ändrat i den):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Övning 1</title>
  </head>
  <body>
    <h1>Övning 1</h1>
    <button id="loadBtn">Visa alla namn</button>
    <ol id="output">
      Här visas alla namn
    </ol>

    <script>
      document.getElementById("loadBtn").addEventListener("click", load);

      function load() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "https://fakestoreapi.com/products");
        xhr.send();

        xhr.onreadystatechange = function () {
          if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            console.log(xhr);
            let data = JSON.parse(xhr.responseText); // Vi måste konvertera text till JSON
            console.log(data);
            render(data);
          }
        };
      }

      function render(products) {
        let output = "";
        products.forEach((product) => (output += `<li>${product.title}</li>
                                                  <li>${product.description}</li>
                                                  <li>${product.price}</li>
                                                  
                                                  <img src="${product.image}" width="100" height="100"/>
                                               
                                              
        `));
        document.getElementById("output").innerHTML = output;
      }
    </script>
  </body>
</html>

------------------------------------------------------------------------------------

jag vill att jag skulle kunna ha en  knapp under varje product där man köper produkten
och då maste man fylla i namn,leveransAdress,telefon och e-post.
tack för hjälpen oavset om du kan eller inte syftet är att jag ska lära mig och tror mig jag håller på.

Låter som du behöver lägga till en <button> under <img> med en onclick="..." någon funktion som tar produkten som argument. Men lite osäker på vad du har problem med.

jag vet inte hur man gör kopplingen från render functionen som tar produkten och lägga den i en anna sida där ska man ange info o köpa.

function render(products) {
        let output = "";
        products.forEach((product) => (output += `<li>${product.title}</li>
                                                  <li>${product.description}</li>
                                                  <li>${product.price}</li>
                                                  
                                                  <img src="${product.image}" width="100" height="100"/>
                                                  <button onclick="addToCart(${product.id})">Add to cart</button>
                                               
                                              
        `));
        document.getElementById("output").innerHTML = output;
      }

      function addToCart(item) {
        alert('Added item');
        console.log(item);
      }

Något sånt?

i funktionen addTocart() får du lägga till kod som gör vad du vill ska hända.

tack för din svar; jag hade förberett en cart.html innan där den fortsätter vidare till checkout och betalning jag tänkte kan man inte koppla addToCart funktionen cart.html?

för annars jag har inte kunnat gå vidare nånstans från funktionen so du skrev.

Sorry men mitt huvud kommer att explodera snart jag har suttit länge med det här .

Nu vet jag ju inte exakt hur du har tänkt att detta ska fungera men det normala är ju att man lägger till en produkt i sin cart och så kan man fortsätta handla.

Men om du bara vill ha en "Buy now"-knapp och utcheckning på en ny sida (t.ex. cart.html då) så kan du använda en vanlig länk: (behöver dock skicka med vilken produkt som ska handlas)

<a href="cart.html?id=${product.id}">Buy now</a>

Det normala är dock som sagt att spara vilka produkter som ska köpas och sedan kan kunden klicka på "Checkout" för att gå till en annan sida och handla vad man lagt i carten.

det låter intressant och skicka köparen vidare till en checkout sida där kan man plussa på eller minska produkter eller delete

kan du hjälpa mig med det för jag har ingen anning (just nu) .

och tack för att du tar tid och hjälpa det uppskattar jag.

Ett problem med http är att det är "stateless", det kommer inte ihåg något mellan anropen.

En shoppingcart kan man bygga på väldigt många olika sätt. Men på något sätt måste du spara vad användaren har lagt i sin korg mellan http-anropen (alltså en ny sida som cart.html).

Det skulle kunna göras med cookies, webstorage, på servern och säkert massa andra olika sätt.

Här kan du läsa på lite om du vill använda webstorage https://www.smashingmagazine.com/2014/02/create-client-side-shopping-cart/ (vilket är ett modernt sätt om du vill endast använda javascript).

jag kommer att läsa det tack för hjälpen

Svara

Visa senaste svar