Uncaught TypeError: Невозможно прочитать свойство 'products' с нулевым значением в addToCart (cart.js: 60)

Question

привет, я строю систему корзины с помощью JavaScript localStorage, но мой скрипт не работает, когда очистить корзину с помощью localStorage.clear(); ниже - мой код для добавления товаров в корзину и отображения на странице корзины.

Код

    var cartData = localStorage.getItem("cart");
if (cartData == null) {
    cartDataProducts = [];
    var cartItems = 0;
    $('.mini-cart-number').text(cartItems);
} else {
    cartData = JSON.parse(cartData);
    cartDataProducts = cartData['products'];
    var cartItems = cartDataProducts.length;
    $('.mini-cart-number').text(cartItems);
}
function clearCartItemes() {
    localStorage.clear();
}
function renderCartItems() {
    for (i = 0; i < cartDataProducts.length; i++) {
        row = "<tr class='cart_item'> <td>" + i + "</td> <td class='product-thumbnail'> <a href='#'><img src='" + cartDataProducts[i]['img'] + "' alt=''></a> </td> <td class='product-name'> <a href='#'>" + cartDataProducts[i]['name'] + "</a> </td> <td class='product-price'> <span class='amount'>" + cartDataProducts[i]['price'] + "</span> </td> </tr>";
        $('#cfxItem').append(row);
    }
}
$("body  .addcart-link, #addToCartDynamic").click(function() {
    name = $(this).data('name');
    id = $(this).data('id');
    price = $(this).data('price');
    img = $(this).data('img');
    product = {};
    product.id = id;
    product.name = name;
    product.price = price;
    product.img = img;
    cartItems = cartItems + 1;
    addToCart(product);
});
function addToCart(product) {
    if (localStorage && localStorage.getItem('cart')) {
        var cart = JSON.parse(localStorage.getItem('cart'));
        cart.products.push(product);
        localStorage.setItem('cart', JSON.stringify(cart));
        $('.mini-cart-number').text(cartItems);
        $.notify("Product Added in cart.", "success");
    }
}