improve cart class in cart.js

app/Http/Controllers/CartController.php

@@ -44,7 +44,7 @@ class CartController extends Controller
     public function removeFromCart(Request $request)
     {
         if (!Session::has('cart')) {
-            return ['redirectLinkWhenEmpty' => route('homepage')];
+            return;
         }
 
         $cart = Session::get('cart');
@@ -59,6 +59,10 @@ class CartController extends Controller
 
     public function getItems()
     {
+        if (!Session::has('cart')) {
+            return ['redirectLinkWhenEmpty' => route('homepage')];
+        }
+
         $cart = Session::get('cart');
 
         if (!$cart->total_qty) {

public/js/cart.js

 class Cart {
-    constructor(cartElem) {
-        this.cartHtmlElem = cartElem;
+    constructor() {
+        const cartElem = document.querySelector('.js-cart');
+        this.cartElem = cartElem;
+        this.loaderElem = document.querySelector('.loader');
+        this.amountInCartElem =  document.querySelector('.amount-in-cart');
+        this.totalPriceElem = document.querySelector('.js-total-cart-price');
         this.getItemsUrl = cartElem.dataset.getItemsUrl;
+        this.products;
+        this.positionsAmount;
+        this.totalPrice;
+        this.updateItemUrl;
+        this.removeItemUrl;
+        this.itemUrl;
+        this.hasEvents;
+        this.updateItemQty = this.updateItemQty.bind(this);
+        this.removeItemFromCart = this.removeItemFromCart.bind(this);
     }
 
-    generateProductRow(product) {
+    generateProductRowHTML(product) {
         return `<tr>
             <td>
                 <div class="row">
@@ -34,45 +47,40 @@ class Cart {
     }
 
     showProducts() {
-        let productsList = '';
+        let productsList = this.products.reduce((acc, item) => acc += this.generateProductRowHTML(item), '');
 
-        for (const item in this.products) {
-            const product = this.products[item];
-            productsList += this.generateProductRow(product);
-        }
-
-        this.cartHtmlElem.innerHTML = productsList;
-        document.querySelector('.amount-in-cart').textContent = this.positionsAmount;
-        document.querySelector('.js-total-cart-price').textContent = 'Total € ' + this.totalPrice;
+        this.cartElem.innerHTML = productsList;
+        this.amountInCartElem.textContent = this.positionsAmount;
+        this.totalPriceElem.textContent = 'Total € ' + this.totalPrice;
     }
 
     updateItemQty(event) {
         if (!event.target.classList.contains('js-qty-input')) {
             return;
         }
+        const qtyInputElem = event.target;
+        const changedQty = qtyInputElem.value;
+        const actionUrl = this.updateItemUrl;
+        const productId = qtyInputElem.dataset.productId;
 
-        const changedQty = event.target.value;
         if (!changedQty || (changedQty.indexOf('e') + 1) || changedQty === '0') {
-            event.target.value = event.target.defaultValue;
+            event.target.value = qtyInputElem.defaultValue;
             return;
         }
 
-        const actionUrl = this.updateItemUrl;
-        const productId = event.target.dataset.productId;
-
-        loaderElem.classList.toggle('loader-show');
+        this.loaderElem.classList.toggle('loader-show');
 
         axios.post(actionUrl, {
-            productId: productId,
-            changedQty: changedQty,
+            productId,
+            changedQty,
         })
             .then( (response) => {
                 this.show();
                 toastr.success('Quantity updated');
             })
-            .catch(function (error) {
+            .catch( (error) => {
                 console.log(error);
-                loaderElem.classList.toggle('loader-show');
+                this.loaderElem.classList.toggle('loader-show');
                 toastr.error('Error, something went wrong');
             });
     }
@@ -84,40 +92,35 @@ class Cart {
         const actionUrl = event.target.dataset.action;
         const productId = event.target.dataset.productId;
 
-        loaderElem.classList.toggle('loader-show');
+        this.loaderElem.classList.toggle('loader-show');
 
         axios.post(actionUrl, {
-            productId: productId,
+            productId,
         })
             .then( (response) => {
-                const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty;
-                if (redirectLinkWhenEmpty) {
-                    window.location.replace(redirectLinkWhenEmpty);
-                    return;
-                }
                 this.show();
                 toastr.success('Product deleted');
             })
-            .catch(function (error) {
+            .catch( (error) => {
                 console.log(error);
-                loaderElem.classList.toggle('loader-show');
+                this.loaderElem.classList.toggle('loader-show');
                 toastr.error('Error, something went wrong');
             });
     }
 
     events() {
-        this.cartHtmlElem.addEventListener('change', this.updateItemQty.bind(this));
-        this.cartHtmlElem.addEventListener('click', this.removeItemFromCart.bind(this));
+        this.cartElem.addEventListener('change', this.updateItemQty);
+        this.cartElem.addEventListener('click', this.removeItemFromCart);
         this.hasEvents = true;
     }
 
     show() {
-        if (!loaderElem.classList.contains('loader-show')) {
-            loaderElem.classList.toggle('loader-show');
+        if (!this.loaderElem.classList.contains('loader-show')) {
+            this.loaderElem.classList.toggle('loader-show');
         }
 
         axios.get(this.getItemsUrl)
-            .then( response => {
+            .then( (response) => {
                 const redirectLinkWhenEmpty = response.data.redirectLinkWhenEmpty;
                 if (redirectLinkWhenEmpty) {
                     window.location.replace(redirectLinkWhenEmpty);
@@ -132,22 +135,19 @@ class Cart {
                 this.itemUrl = response.data.item_url;
 
                 this.showProducts();
-                loaderElem.classList.toggle('loader-show');
+                this.loaderElem.classList.toggle('loader-show');
 
                 if (!this.hasEvents) {
                     this.events();
                 }
             })
-            .catch(function (error) {
+            .catch( (error) => {
                 console.log(error);
-                loaderElem.classList.toggle('loader-show');
+                this.loaderElem.classList.toggle('loader-show');
                 toastr.error('Error, something went wrong');
             });
     }
 }
 
-const loaderElem = document.querySelector('.loader');
-
-const cartElem = document.querySelector('.js-cart');
-const cart = new Cart(cartElem);
+const cart = new Cart();
 cart.show();