Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   сбрасывается цвет и текст кнопки после перезагрузки страницы (https://javascript.ru/forum/jquery/78787-sbrasyvaetsya-cvet-i-tekst-knopki-posle-perezagruzki-stranicy.html)

sty-wolf 05.11.2019 13:56

сбрасывается цвет и текст кнопки после перезагрузки страницы
 
Вложений: 1
имеется условие

<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'); // удалить цвет
				}




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

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

Вложение 4260

laimas 05.11.2019 14:08

Цитата:

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

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

sty-wolf 05.11.2019 14:19

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

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 05.11.2019 14:30

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 05.11.2019 14:39

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

laimas 05.11.2019 14:42

Цитата:

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

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

sty-wolf 05.11.2019 14:46

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

if (productsArr[sbId] ? 1 : 0)


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

laimas 05.11.2019 15:10

Цитата:

Сообщение от sty-wolf
если я правильно понял, то проверку надо делать такую

Это я пример привел, и это условная запись (тернарный оператор), более лаконичная запись 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 05.11.2019 15:17

Цитата:

Сообщение от laimas (Сообщение 514897)
Это я пример привел, и это условная запись (тернарный оператор), более лаконичная запись 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. Какая-то путаница с текстом на кнопке, на мой взгляд, в условиях.

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

laimas 05.11.2019 15:33

Цитата:

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

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

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

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


Часовой пояс GMT +3, время: 23:57.