# Einkaufswagen JavaScript



## MarcMarc (16. Nov 2021)

Einen schönen guten Tag an alle, die das Lesen. In meiner Freizeit übe ich gerne das erstellen von Webseiten und konnte mir bis jetzt zum Glück immer selber helfen, Jetzt bin ich aber blöderweise an den Punkt gekommen, wo ich nicht weiterkomme. Unzwar habe ich einen Einkaufswagen, der Anzahl, wie Preis der Elemente im Warenkorb berechnen soll. Dies habe ich gemacht in dem ich die Elemente in den Einkaufswagen gesetzt habe und mit "display: none" versteckt habe. Bei klick soll auf das jeweilige Produkt soll die "aktiv" Klasse erscheinen, sodass das Display auf "flex" gesetzt wird. So kann ich nur jedes Produkt einmal hinzufügen, während bei jedem weiteren "hinzufügen" click weiterhin die Anzahl und Preis erhöht werden. Zudem werden nach mehrmaligen Additionen viele Nachkommastellen angezeigt. Kennt ihr einen Weg wie ich ein Produkt mehrmals hinzufügen, also das es sich automatisch dupliziert? Wisst ihr auch wie ich die Nachkommastellen auf max 2 stk runterbekomme (aus "14.950000000000001" = 14.95)?

Vielen dank für eure Zeit

Gruß Marc

[CODE lang="HTML" title="HTML"]

<div class="cart-items-container">

            <div class="cart-items1">
                <img src="bilder/menu-1.png" alt="Warenkauf">
                <div class="content">
                    <h3>Tasse Crema</h3>
                    <div class="preis1">2,99€</div>
                </div>
                <span class="fas fa-times" id="r1"></span>
            </div>

[/CODE][CODE lang="css" title="CSS"]

header .cart-items-container .cart-items1 {
    display    : none;
    position   : relative;
    align-items: center;
    margin     : 2rem 0;
    gap        : 1rem;
    border-bottom: .1rem solid#24252a;
}

header .cart-items-container .cart-items1.aktiv {
    display: flex;
}

header .cart-items-container .cart-items1 .content h3 {
    font-size     : 1.4rem;
    padding-bottom: .2rem;
}

header .cart-items-container .cart-items1 .content .preis {
    font-size: 1rem;
    color    : darkgoldenrod;
}
[/CODE]
[CODE lang="javascript" title="JavaScript"]

let summe1 = 2.99;
let summe2 = 2.99;
let summe3 = 1.99;
let summe4 = 2.49;
let summe5 = 2.99;
let summe6 = 2.49;
let zwischenSumme = 0;
let i = 0;

let produkt1 = document.querySelector('.cart-items1')

document.querySelector('#p1').onclick = () => {
    i++;
    document.querySelector('.anzahl').innerHTML = i;
    produkt1.classList.add('aktiv');
    zwischenSumme = zwischenSumme + summe1;
    document.querySelector('.gesamtpreis').innerHTML = zwischenSumme;
}

let produkt2 = document.querySelector('.cart-items2')

document.querySelector('#p2').onclick = () => {
    i++;
    document.querySelector('.anzahl').innerHTML = i;
    produkt2.classList.add('aktiv');
    zwischenSumme = zwischenSumme + summe2;
    document.querySelector('.gesamtpreis').innerHTML = zwischenSumme;
}[/CODE]


----------



## Oneixee5 (16. Nov 2021)

Mit der Internationalization API funktioniert das wie folgt:

```
const formatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  // round to whole numbers
  //minimumFractionDigits: 0,
  //maximumFractionDigits: 0,
});

formatter.format(2500);               // "2.500,00 €"
formatter.format(.99);                // "0,99 €"
formatter.format(14.950000000000001); // "14,95 €"
```


----------



## MarcMarc (16. Nov 2021)

Super! Danke für deine schnelle Antwort. Ich habe deine Zeilen jetzt so eingefügt. Wahrscheinlich stelle ich mich da ein bisschen doof an aber so wie ich das übernommen habe, funktioniert es noch nicht. Kannst du mir da bitte ein paar Tipps zu geben?


```
let suchLeiste = document.querySelector('.such-leiste');
let summe1 = 2.99;
let summe2 = 2.99;
let summe3 = 1.99;
let summe4 = 2.49;
let summe5 = 2.99;
let summe6 = 2.49;
let zwischenSumme = 0;
let i = 0;
const formatter = new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR',
  // round to whole numbers
  //minimumFractionDigits: 0,
  //maximumFractionDigits: 0,
});

formatter.format(2500);               // "2.500,00 €"
formatter.format(.99);                // "0,99 €"
formatter.format(14.950000000000001); // "14,95 €"

document.querySelector('#such-btn').onclick = () =>{
    suchLeiste.classList.toggle('aktiv');
}

let cartList = document.querySelector('.cart-items-container');

document.querySelector('#wagen-btn').onclick = () =>{
    cartList.classList.toggle('aktiv');
}

let headerLeiste = document.querySelector('.header-leiste');

document.querySelector('#menu-btn').onclick = () => {
    headerLeiste.classList.toggle('aktiv');
}

let produkt1 = document.querySelector('.cart-items1')

document.querySelector('#p1').onclick = () => {
    i++;
    document.querySelector('.anzahl').innerHTML = i;
    produkt1.classList.add('aktiv');
    zwischenSumme = zwischenSumme + summe1;
    document.querySelector('.gesamtpreis').innerHTML = zwischenSumme;
}

let produkt2 = document.querySelector('.cart-items2')

document.querySelector('#p2').onclick = () => {
    i++;
    document.querySelector('.anzahl').innerHTML = i;
    produkt2.classList.add('aktiv');
    zwischenSumme = zwischenSumme + summe2;
    document.querySelector('.gesamtpreis').innerHTML = zwischenSumme;
}

let produkt3 = document.querySelector('.cart-items3')

document.querySelector('#p3').onclick = () => {
    i++;
    document.querySelector('.anzahl').innerHTML = i;
    produkt3.classList.add('aktiv');
    zwischenSumme = zwischenSumme + summe3;
    document.querySelector('.gesamtpreis').innerHTML = zwischenSumme;
}
```


----------



## Oneixee5 (17. Nov 2021)

Du musst die Funktion an den entsprechenden Stellen verwenden.

```
document.querySelector('.gesamtpreis').innerHTML = formatter.format(zwischenSumme);
```
Die Kommentarzeilen kannst du weglassen, sie sollen einfach auf weitere Möglichkeiten hinweisen.


----------



## MarcMarc (17. Nov 2021)

Achso, jetzt verstehe ich das. Jetzt funktioniert alles erste Sahn. Vielen Dank, freue mich wie ein kleines Kind das ich das jetzt dank deiner Hilfe fertig stellen konnte. Anstatt zu versuchen dasselbe Produkt bei mehrmaligen klicken zu duplizieren, sodass man sieht wie oft das Produkt im Warenkorb liegt kann ich ja einfach eine Anzahl unter dem Produkt anzeigen lassen wie oft es schon im Warenkorb ist. Nochmals danke Sie sind der Wahnsinn!


----------

