сбрасывается цвет и текст кнопки после перезагрузки страницы

[sty-wolf]

А зачем эта операция при нажатии на кнопку?

У вас в комнате по умолчанию свет выключен, следующий щелчок по выключателю зажжет его, следующий выключит и т.д. Вы же не станете рассуждать - "выключен свет, ага, значит если щелкну, то выключится" и наоборот. Так и с этой кнопкой.

да Вы правы, только если дома свет зажечь, то свет горит и не потушится пока я его не выключу (ну или не отключат свет), а у кнопки при обновлении страницы сбрасывается цвет. Вы правы нужно проверять

Если (такой id уже есть в корзине) тогда
выводим красную кнопку данному id
конецЕсли

только почему то и так не срабатывает, все равно сбрасывается

[laimas]

<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="0032pz" data-sb-product-size="32" data-sb-product-name="Пицца «Ветчина и грибы»" data-sb-product-price="320" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/pizza.png">
<i class="fas fa-cart-plus"></i> <span data-sb-id-button="0032pz">Добавить в корзину</span>
</button>

Зачем у span data-sb-id-button если ID товара определено у кнопки data-sb-id-or-vendor-code, что в общем то удобнее получать как при добавлении/удалении товара, так и при поиске кнопки? То есть, при щелчке по кнопке это:

productsArr[sbId] ? $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину') : $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину');

и вот это

for (let key in productsArr) {
                    for (let value in productsArr[key]) {
                        if (value === 'sbQuantity') {
                            getQuantity += +productsArr[key][value];
                        }
                    }
                }

это какой то бред. Если addToBasketButton, это и есть кнопка, о чем говорит let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара, хотя по человечески это должно быть:

let sbId =  $(this).data("sb-id-or-vendor-code")
//либо
let sbId =  this.dataset.sbIdOrVendorCode

то спрашивается нахрена нужен цикл for (let key in productsArr) ... если известен конкретный товар и один, который может добавляться только при первом щелчке по кнопке, ибо после него кнопка уже выполняет операцию удаления товара, должна выполнять коли кодом это прописано?

[sty-wolf]

то спрашивается нахрена нужен цикл for (let key in productsArr) ...?

согласен цикл не нужен, я его убрал, по поводу data-sb-id-or-vendor-code="001" тоже переписал как Вы сказали спасибо Вам огромное, а по поводу кнопки как лучше сделать?

[laimas]

а по поводу кнопки как лучше сделать?

Объясняю/предлагаю/советую последний раз.

<style>
.product__add-to-cart-button {
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
}

.product__add-to-cart-button span:after {
    content: 'Добавить в корзину';
}

.product__add-to-cart-button.button-active {
    background-color: #FE6C6C;
}

.product__add-to-cart-button.button-active span:after {
    content: 'Удалить из корзины';
}
</style>

<button class="product__add-to-cart-button" 
        data-sb-id-or-vendor-code="0032pz" 
        data-sb-product-size="32" 
        data-sb-product-name="Пицца «Ветчина и грибы»" 
        data-sb-product-price="320" 
        data-sb-product-quantity="1" 
        data-sb-product-img="smartbasket/img/pizza.png">
    <i class="fas fa-cart-plus"></i> <span></span>
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('button.product__add-to-cart-button').click(function() {
    var bt = $(this), id = bt.data('sb-id-or-vendor-code');
    if(bt.hasClass('button-active')) {
        //удаление товара с ID из корзины
        //и цикла для этого не требуется 
        console.log('del '+id)
    } else {
        //добавление товара с ID в корзину
        //и цикла для этого не требуется
        console.log('add '+id)     
    }
    
    bt.toggleClass('button-active'); //изменение состояния кнопки 
});
</script>

* атрибуты кнопки в столбик, это тут для компактности, на реальной странице мусорить табуляций и переводами не стоит.

Также посредством CSS можно описать и смену иконки кнопки. А количеством товара в корзине должно заниматься поле, например типа number.

А при загрузке страницы в цикле товаров корзины выполнять

$('button[data-sb-id-or-vendor-code="'+id+'"]').addClass('button-active'); //где id идентификатор товара

[laimas]

только если дома свет зажечь, то свет горит и не потушится пока я его не выключу

Вы не понимаете сути действия. В цифровой электронике существуют устройство называемое триггером. Это устройство с двумя устойчивыми состояниями на выходе, переключить которое можно подачей сигнала на его вход. Выключатель света в вашей комнате тоже можно назвать триггером - выключатель его это вход, а его контакты, это выход. Щелкнули - состояние включено, свет горит, щелчок - состояние выключено, свет погашен и т.д.

А попробуйте этим выключателем трижды включить свет, не выключая его, после чего только можно его будет выключить. Получится? Конечно нет, для таких случаев требуется счетный триггер, который будет запоминать (накапливать) состояния и после определенного количества (количества сигналов на входе, тактов) выключит свет.

Думаете с вашей кнопкой добавления товара в корзину, которая по условию в коде не является "счетным триггером" и которая после первого же щелчка по ней меняет свое назначение, такой финт получится? Следовательно логика вашего кода ни к черту.

[sty-wolf]

$('button[data-sb-id-or-vendor-code="'+id+'"]').addClass('button-active'); //где id идентификатор товара

нужно прописать в цикле добавления товаров?

//удаление товара с ID из корзины
//и цикла для этого не требуется

а тут прописать метод удаления?

[laimas]

нужно прописать в цикле добавления товаров?

Зачем?

а тут прописать метод удаления?

Все что требуется из операций, то и пишите. Если добавление, значит обращение к методу/функции (не знаю что там у вас) добавления, позвоните Кате и пригласите ее в кино и т.д. и т.п. А если удаление, значит обращение к методу/функции (не знаю что там у вас) удаления, позвонить Кате и извиниться, пригласить в кино Свету и т.д. и т.п.

Я не знаю что и как у вас в полном объеме, да и вникать в это и некогда, и не охота. Поэтому, из того что пишу, вам нужна только суть, а далее вы уже по этой "дорожной карте" применяя свои методы/функции, свои элементы в верстке и их селекторы/атрибуты выполняйте это же самое.

Сохраните это у себя и запустите, пощелкайте добавление/обновление/удаление товаров с обновлением страницы. Все работает? Что в сути самой работы непонятного? В примере все очень просто, нет нагромождения лишних элементов и их атрибутов/классов. Самые необходимые операции и все. Это как раз для того, чтобы и была понятна суть механизма. Облепите ее своими наворотами и все.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
h3 {
    margin-top: 0;
}
li {
    display: inline-block;
    list-style: none;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
}
.btn {
    width: 100%;
    padding: 10px 20px;
    border: none;
    background-color: #6FBBFC;
    margin-top: 15px;
    cursor: pointer;
}
.btn span:after {
    content: 'Добавить в корзину';
}
.btn.add {
    background-color: #FE6C6C;
}
.btn.add span:after {
    content: 'Удалить из корзины';
}
.to-cart:after {
    content: 'В корзину:';
}
.to-cart.add:after {
    content: 'В корзине:';
    color: #C70404;
}
</style>
<script type="text/javascript">
//страница с товарами, получаем сразу корзину
var cart = localStorage.cart && JSON.parse(localStorage.cart) || {};
//добавляем товар
function add(id, name, n) {
    cart[id] = {name: name, count: n};
    mem();     
}
//обновляем товар
function upd(id, n) {
    cart[id].count = n;
    mem();     
}
//удаляем товар
function del(id) {
    delete cart[id];
    mem();     
}    
//изменения корзины сохраняем
function mem() {
    console.log(cart);
    localStorage.cart = JSON.stringify(cart);
}

$(function() {
    //добавление/удаление товара
    $('#products').on('click', 'button', function() {
        //все что потребуется для дольнейших операций    
        var bt = $(this), 
            id = bt.data('id'), 
            p = bt.closest('li'), 
            v = p.find('input');
            
        if(bt.hasClass('add')) {
            //удаление товара с ID из корзины
            del(id);
            v.val(v.attr('min')); //сбросить значение поля количества до мин. значения
            //и прочие сопутствующие операции
        } else {
            //добавление товара с ID в корзину
            add(id, p.find('h3').text(), +v.val());
            //и прочие сопутствующие операции    
        }
     
        bt.add(v.prev()).toggleClass('add'); //изменение состояния кнопки, и метки поля количества
    
    }).on('change', 'input', function() { //изменение количества товара в корзине
        var id = this.dataset.id;
        if(!cart[id]) return;
        upd(id, this.valueAsNumber);
        //и прочие сопутствующие операции
    });
    //отметить товары в корзине при загрузке страницы
    Object.keys(cart).forEach((id) => {
        $('button[data-id='+id+']').addClass('add').closest('li').find('label').addClass('add').next().val(cart[id].count)
    });     
});
</script>
</head>
<body>
<ul id="products">
    <li>
        <h3>Портвейн</h3>
        <div>
            <label class="to-cart"></label> <input data-id="15" type="number" min="1" max="3" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="15"><span></span></button>       
    </li>
    <li>
        <h3>Кагор</h3>
        <div>
            <label class="to-cart"></label> <input data-id="215" type="number" min="1" max="5" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="215"><span></span></button>       
    </li>
    <li>
        <h3>Коньяк</h3>
        <div>
            <label class="to-cart"></label> <input data-id="67" type="number" min="1" max="1" value="1" autocomplete="off" /> бутылей
        </div>
        <button class="btn" data-id="67"><span></span></button>       
    </li>
    <li>
        <h3>Самогон</h3>
        <div>
            <label class="to-cart"></label> <input data-id="13" type="number" min="1" max="100" value="1" autocomplete="off" /> литров
        </div>
        <button class="btn" data-id="13"><span></span></button>       
    </li>
</ul>
</body>
</html>

[sty-wolf]

laimas,
спасибо Вам