Object Orientierte Programmierung in Javascript

Vor 10 Jahren hielt ich immer Abstand von Javascript. Nur wenn es sein musste habe ich mich mit JS beschäftigt. Das waren mir zu viel geschweifte Klammern und Callbacks und es haftete an Javascript ein schlechtes Image, was die Sicherheit anging, an. Um auch ganz ehrlich zu sein, ich hatte Probleme Javascript Code richtig zu lesen. Heute sieht die Welt ganz anders aus. Mittlerweile liebe ich Javascript! Damals nutzte ich für meine Arbeiten dann auch Jquery, da es mir übersichtlicher erschien. Heute nutze ich kein Jquery dafür ausgereifte Javascript Frameworks wie Vue Js oder einfach nur Vanilla JS. Das ich konsequent in meine Projekte umsetze. Ich mache beim Kunden auch kein Hehl aus meiner „Abneigung“ zu Jquery. Es ist zwar nicht wirklich eine Abneigung im klassischen Sinn. Ich nutzte es halt nicht mehr gerne. Unnötiger „Perfomancefresser“.

Das schöne ist, man kann mit JS auch Objekt orientiert entwickeln. Im folgenden Zeige ich Euch ein einfaches Beispiel wie man sauber ein Javascript Objekt erstellt und nutzt.

Ich werde nun ein Warenkorb Objekt erstellen.

Anforderung:

  • wir wollen Produkte zu einem Warenkrob (Cart) hinzufügen (addToCart)
  • wir wollen Produkte aus dem Warenkrob löschen (removeFromCart)
  • der Warenkorb soll im Browser LocalStorage gespeichert werden (save)
  • wir wollen die aktuelle Anzahl der Produkte ermitteln (getCartCount)
  • wir wollen die aktuelle Warenkorb Preis / Summe ermitteln (getCartSum)
class Cart {
        constructor(cart_name) {
            this._cart_name = cart_name;                    
            this._cart;
            this.init();            
        }

        init() 
        {
            let _storage = localStorage.getItem(this.cart_name);
            if (_storage === null) 
            {
                // create new basket Element with an empty array                
                localStorage.setItem(this.cart_name, JSON.stringify([]));
            }  
            this._cart = JSON.parse(localStorage.getItem(this.cart_name));          
            this.refreshViewPoints();           
        }

        get cart_name() {
            return this._cart_name;
        }
        set cart_name(value) {
            this._cart_name = value;
        }

        get cart() {
            return this._cart;
        }

        getCart() {
            return (this.cart);
        }

        deleteWholeCart() {
            this._cart = null;          
            localStorage.removeItem(this.cart_name);
            this.init();
        }

        addItem(id ,q = "1") {
            id = String(id);
            q = String(q);
            console.log("addItems " + id +" with "+ q)
            // check if item_id allready exists and modify cart item or create new cart item
            let is_new = true;
            for (let i=0; i < this._cart.length; i++) {
                if (this._cart[i].product_id === id) {
                    this._cart[i].q = q;
                    is_new = false;
                }
            }   

            if (is_new === true) {              
                this._cart.push( {"product_id":id, "q":q} );   
            }
            
            this.saveCart();
            this.refreshViewPoints();
        }

        saveCart() {
            let _storage = localStorage.getItem(this.cart_name);            

            localStorage.setItem(this.cart_name, JSON.stringify(this._cart));           
            this._cart = JSON.parse(localStorage.getItem(this.cart_name));          
        }

        refreshViewPoints() {            
            document.getElementById("myBasketBadge").innerHTML = this.getCart().length;
            myBasketCount = this.getCart().length;
            document.getElementById("sum").innerHTML = this.calculateCartSum();
            this.renderBasketOverview();
            document.getElementById("json").innerHTML = JSON.stringify(this.getCart());
        }

        calculateCartSum() {   
            if(this.cart.length === 0) {
                return 0;
            }
            
            let sum = this._cart.map((item) => {

                let item_data = pl.filter(function(pl_item) {
                    return pl_item.id == item.product_id
                });

                return (item.q * item_data[0].productPrice);
            });
            console.log(sum);
            return sum.reduce(function(a, b){
                    return a + b;
            }, 0);                      
        }

        deleteItemFromCart(id) {
            this._cart = this._cart.filter(function(item) {
                return item.product_id !== id
            });         
            this.saveCart();
            this.refreshViewPoints();           
        }

        renderBasketOverview() {    
            this.renderBasketContainer();            
        }

        renderBasketContainer() {
            let container = document.getElementById("basketOverviewContainer");                     
            container.innerHTML = '';
            let tbl  = document.createElement('table');
            tbl.style.width  = '100px';

            tbl.style.border = '1px solid black';           
            for(let i = 0; i < this.getCart().length; i++){
                let tr = tbl.insertRow();
                let td = tr.insertCell();
                let str = "id:" +this.getCart()[i].product_id + " q:" + this.getCart()[i].q;
                td.appendChild(document.createTextNode(str));
                td.style.border = '1px solid black';                
            }
            container.appendChild(tbl);                  
        }       
    }

Ihr könnt das Projekt auch aus meinem GitHub klonen.

https://github.com/MikeLowrey/js-shopping-cart-oop


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Javascript Prototype mal kurz erklärt

February 19, 2021

JavaScript ist eine prototypenbasierte Sprache. Was soll das eigentlich sein? Heute werde ich euch erklären, was Prototypen sind. Was sind Prototype? Zunächst einmal sollten wir uns nicht von dem Wort “Prototyp” verunsichern lassen. Um ehrlich zu sein klingt es abstrakt und irgendwie fancy. “Prototyp” ist ein System. Dieses System erlaubt dir, Eigenschaften von Objekten zu […]

Javascript – Die geschweifte Klammer in der Funktions Parameterliste

January 27, 2021

Vielleicht habt ihr das schon mal gesehen. Eine geschweifte Klammer in der Funktionsparameterliste. Was ist das und wozu ist das gut? Um hier Licht ins dunkel zu bringen, bediene ich mich eines kleine Fallbeispiels. Im folgendem Beispiel möchte ich aus einem Objekt den Namen der Person mit der id = 8 finden. Vielleicht erkennt der […]

Wie merge ich zwei Javascript Objekte

January 15, 2021

Der Ein oder Andere wird im Laufe seiner Javascript Entwicklung an einen Punkt gekommen sein zwei JavaScript Objekte zusammenzuführen. Quasi „mergen“. Ein Fallbeispiel könnte sein, ihr habt eine JS Klasse mit einer Membervariablen vom Typ „Object“ die Texte im key-value beinhaltet. Nun wollt ihr statt „Tschüßi Kowski“ doch lieber Auf Wiedersehen ausgeben. Eine Möglichkeit ihr […]

Tailwind und VanillaJS – Toast Hawaii bzw. Notification

January 12, 2021

Stellt euch vor ihr wollt für ein Shop eine Notification oder auch bekannt als Toast ausgeben. Zum Beispiel Produkt in Warenkorb gelegt. Oder „ups, leider ist das Produkt in ihrer Größe nicht mehr vorhaben. Es gibt hier echt viele und gute Bibliotheken. Aber ich will selber eine Toaster Klasse bauen, weil mir der Overhead gerade […]

TailwindCSS und VanillaJS – Step Progress Bar

January 9, 2021

Ich persönlich finde bei Bestellvorgängen oder Behördenformularen es extrem hilfreich eine sogenannte Prozessverfolgung auf dem Bildschirm zu haben. Damit weiß man stets Bescheid, wo man gerade ist und wie lange das noch in etwa dauern kann. Ich dachte mir, es ist Samstagabend und die Kinder sind im Bett und die bessere Hälfte macht noch Steuern, […]

Einstieg in axios.js

December 7, 2020

Das tägliche Brot eines Webentwicklers sind XHR / Ajax Anfragen zu generieren. Also man fragt an einer Schnittstelle nach Daten an. Das ist auch ein alter Hut. Dafür gibt es auch nicht einen Weg sondern viele. Und keiner ist richtiger oder falsch. Es ist immer Geschmackssache und vom Fall abhängig. Ich bevorzuge in meiner Javascript […]