Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2019, 12:56
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

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

<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
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2019, 13:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от sty-wolf
Как сделать чтоб текст и кнопка не сбрасывались после перезагрузки страницы?
Определять наличие товара в корзине при выдаче страницы и определять цвет. Либо на клиенте при загрузке страницы делать такую проверку определяя цвет.
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2019, 13:19
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 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 - количество товара

после проверки, все равно сбрасываются настройки
может как то подругому надо прописать?
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2019, 13:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

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

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

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


То есть не обязательно в данном случае проверять undefined, а держать в корзине товары без количества, то есть не набранные фактически, это нонсенс.
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2019, 13:39
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

так я товары без количества не держу), переменная количества отвечает за лимит на добавление товара, если лимит превышен, то мы запрещаем добавлять , так по моему вопросу получается нужно сделать на проверку товара и все?
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2019, 13:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от sty-wolf
так я товары без количества не держу), переменная количества отвечает за лимит на добавление товара, если лимит превышен, то мы запрещаем добавлять
А пояснение гласит getQuantity - количество товара. Но в любом случае какой смысл это проверять? Данное условие должно проверяться во время добавления товара в корзину, а для выяснения цвета кнопки нужно проверять только наличие товара в корзине.
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2019, 13:46
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

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

if (productsArr[sbId] ? 1 : 0)


если да, то текст и цвет кнопки после перезагрузки опять сбрасывается(
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2019, 14:10
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от 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. Какая-то путаница с текстом на кнопке, на мой взгляд, в условиях.

Последний раз редактировалось laimas, 05.11.2019 в 14:12.
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2019, 14:17
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

Сообщение от 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. Какая-то путаница с текстом на кнопке, на мой взгляд, в условиях.
да цепочкой намного красивее, путаницу исправил, ну все равно, после обновления страницы сбрасываются цвет и текст кнопки.... может как то в куки записывать эти данные или в локальное хранилище?
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2019, 14:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Toggle эффект блока с кнопкой "Читать дальше". С меня "+" subbziro Общие вопросы Javascript 10 28.12.2016 00:43
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 13:46
Вывести изображение после ввода URL без перезагрузки страницы Delfiniys Элементы интерфейса 5 18.10.2013 10:41
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 15:34
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 11:38