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

[sty-wolf]

имеется условие

<div class="product__quantity"></div>
			<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>
		</div>

if (productsArr[sbId] !== undefined) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).addClass('button-active'); // добавляем цвет
				} else {
					$('span[data-sb-id-button="'+sbId+'"]').text('Удалить из корзины');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
				}

алгоритм в коде такой, есть кнопка добавить в корзину она синяя,при нажатии на неё цвет меняется на красный и меняется цвет на удалить из корзины, но когда мы перезагружаем страницу, кнопка опять становится синяя и текст меняется на добавить из корзины.

Как сделать чтоб текст и кнопка не сбрасывались после перезагрузки страницы?

111.jpg

[laimas]

Как сделать чтоб текст и кнопка не сбрасывались после перезагрузки страницы?

Определять наличие товара в корзине при выдаче страницы и определять цвет. Либо на клиенте при загрузке страницы делать такую проверку определяя цвет.

[sty-wolf]

вот так прописываю

if (productsArr[sbId] !== undefined && getQuantity !== undefined) {
					$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
					$(this).addClass('button-active'); // добавляем цвет
				} else {
					$('span[data-sb-id-button="'+sbId+'"]').text('Удалить из корзины');//Меняем текст
					$(this).removeClass('button-active'); // удалить цвет
				}

productsArr[sbId] - идентификатор товара
getQuantity - количество товара

после проверки, все равно сбрасываются настройки
может как то подругому надо прописать?

[laimas]

sty-wolf,
я не знаю структуру вашей корзины, и есть productsArr, это действительно она, а sbId это товар в ней (getQuantity это не понятно), то все будет работать:

var productsArr = {
    '23': {
        name: 'name',
        count: 2
    }
};

alert(productsArr[23] ? 1 : 0)
alert(productsArr[25] ? 1 : 0)

То есть не обязательно в данном случае проверять undefined, а держать в корзине товары без количества, то есть не набранные фактически, это нонсенс.

[sty-wolf]

так я товары без количества не держу), переменная количества отвечает за лимит на добавление товара, если лимит превышен, то мы запрещаем добавлять , так по моему вопросу получается нужно сделать на проверку товара и все?

[laimas]

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

А пояснение гласит getQuantity - количество товара. Но в любом случае какой смысл это проверять? Данное условие должно проверяться во время добавления товара в корзину, а для выяснения цвета кнопки нужно проверять только наличие товара в корзине.

[sty-wolf]

если я правильно понял, то проверку надо делать такую

if (productsArr[sbId] ? 1 : 0)

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

[laimas]

если я правильно понял, то проверку надо делать такую

Это я пример привел, и это условная запись (тернарный оператор), более лаконичная запись if ... else ... Если в вашем случае ее использовать, то это так:

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

То есть "читабельность" такого кода не очень. А значит:

if(productsArr[sbId]) {
    $('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');
    $(this).addClass('button-active');
} else {
    $('span[data-sb-id-button="'+sbId+'"]').text('Удалить в корзину');
    $(this).removeClass('button-active');
}

Вот только не понять странность в $(this). Если это кнопка, а span ее текст, то зачем же такие извращения. Если дочерних span у элемента не один, то все равно все можно описать цепочкой, а значит вполне можно обойтись и "читабельным" тернарным оператором:

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

А лимит на количество нет смысла проверять в данном случае. Ведь если к примеру лимит 3, то кнопка должна быть красной и при одном товаре в корзине, ибо его то можно уже удалять из нее, и при двух, и при трех.

PS. Какая-то путаница с текстом на кнопке, на мой взгляд, в условиях.

[sty-wolf]

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

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

[laimas]

может как то в куки записывать эти данные или в локальное хранилище?

А корзина что "в облаках витает"? Если страница содержит корзину, то есть, есть товары добавленные, то зачем же ее дублировать?

Не работать может только потому, что вы не так или не к тому обращаетесь, пример показанный это подтверждает.

Кто формирует корзину? Если это делает сервер при каждом запросе страницы, то ему не сложно при выводе кода страницы и корзины на ней, определить товар в корзине и прописать класс/текст кнопке. Если корзина хранится у клиента или он ее получает отдельным запросом после загрузки страницы, значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст.