05.11.2019, 15:48
|
|
Интересующийся
|
|
Регистрация: 30.10.2019
Сообщений: 19
|
|
Сообщение от laimas
|
А корзина что "в облаках витает"? Если страница содержит корзину, то есть, есть товары добавленные, то зачем же ее дублировать?
Не работать может только потому, что вы не так или не к тому обращаетесь, пример показанный это подтверждает.
Кто формирует корзину? Если это делает сервер при каждом запросе страницы, то ему не сложно при выводе кода страницы и корзины на ней, определить товар в корзине и прописать класс/текст кнопке. Если корзина хранится у клиента или он ее получает отдельным запросом после загрузки страницы, значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст.
|
верно, корзина не витает в облаках), она хранится в локальном хранилище localStorage
>>> значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст
___
сейчас попробую |
|
05.11.2019, 15:57
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от sty-wolf
|
|
сейчас попробую
|
Пробуйте, но только это:
productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');
верно для события щелчка по кнопке, а для отметить кнопку цветом при загрузке страницы нужно иное действие, то есть
$('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active');
где id, это текущий идентификатор товара в итерации, а button селектор кнопки. |
|
05.11.2019, 16:13
|
|
Интересующийся
|
|
Регистрация: 30.10.2019
Сообщений: 19
|
|
получается вот это нужно загнать в цикл?
productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');
for(leti=0; i<productsArr[sbId].length; i++) {
productsArr[sbId] ? $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину') : $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину');
}
Последний раз редактировалось sty-wolf, 05.11.2019 в 16:18.
|
|
05.11.2019, 16:29
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от sty-wolf
|
|
получается вот это нужно загнать в цикл?
|
Зачем? Когда выбирается/удаляется товар, вот тогда требуется определить класс/текст кнопке. А страница загружается с кнопками по умолчанию, то есть с не выбранными, следовательно нужно только добавить класс/текст для тех, товары которых есть в корзине.
Вы бы вместо картинок html код кнопки выставили, и структуру корзины описали, достаточно было бы пути в ней к товарам.
Если объект/массив корзины или свойство объекта корзины содержащего товары всегда на странице есть, но может быть пустым, то сначала проверяется не пуст ли объект. В противном случае проверяется наличие корзины на странице, и если доступно, только тогда обход товаров в цикле, вернее их идентификаторов.
Например, пусть условно корзина cart всегда на странице и под свойством products содержит объект с товарами, в котором первичные свойства это их идентификаторы. Тогда:
var cart = {
products: {
'23': {
name: 'name',
count: 2
},
'67': {
name: 'name',
count: 2
}
}
};
var ids = Object.keys(cart.products); //получить идентификаторы товаров
if(ids.length) { //если есть товары в корзине
ids.forEach((id) => {
$('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
})
}
Если товары, это массив объектов, в которых есть свойство содержащее идентификатор товара, то выбор несколько иной будет.
|
|
05.11.2019, 16:34
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Судя по картинке, логика добавления/удаления товара в корзину означает, что даже условия:
товар в корзине ? красная : синяя
вообще не потребуется.
|
|
05.11.2019, 16:48
|
|
Интересующийся
|
|
Регистрация: 30.10.2019
Сообщений: 19
|
|
получается вместо prodacts будет basketItems
Снимок.JPG
|
|
05.11.2019, 17:06
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от sty-wolf
|
|
получается вместо prodacts будет basketItems
|
если basketItems, то как показано ранее:
var ids = Object.keys(basketItems); //получить идентификаторы товаров
....
и если это непосредственно и требует проверки наличия, то сразу:
Object.keys(basketItems).forEach((id) => {
$('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
})
}
|
|
05.11.2019, 17:12
|
|
Интересующийся
|
|
Регистрация: 30.10.2019
Сообщений: 19
|
|
вот так работает, т.е меняет цвет при нажатии на кнопку
Object.keys(basketItems).forEach((id) => {
$('span[data-sb-id-button='+sbId+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
});
но все равно сбрасывается после перезагрузки страницы... если прописывать просто по id $('span[data-sb-id-button='+Id+']'), то не срабатывает смена цвета кнопки |
|
05.11.2019, 17:52
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от sty-wolf
|
|
вот так работает, т.е меняет цвет при нажатии на кнопку
|
А зачем эта операция при нажатии на кнопку?
Есть поле выбора количества товаров. Есть кнопка добавить в корзину.
При выборе количества должен проверяться лимит, величина которого должна определяться полем, ибо в корзине такого товара еще нет, и какого черта этот лимит прописан в корзине я не знаю. Соответствие количества лимиту должен проверять и сервер, а делать это он должен ни как не потому, что ему сообщит клиент. Если это держать в корзине, то как параметр для всех товаров, а не для каждого индивидуально, потому как в таком случае это полнейший бред. И, допустим, что выбрать количество менее 1 шт. этим полем нельзя.
Щелчок по кнопке добавления в корзину добавляет/удаляет товар. То есть если один обработчик, то достаточно toggleClass и смена текста. Все, никакой проверки наличия в корзине не требуется. У вас в комнате по умолчанию свет выключен, следующий щелчок по выключателю зажжет его, следующий выключит и т.д. Вы же не станете рассуждать - "выключен свет, ага, значит если щелкну, то выключится" и наоборот. Так и с этой кнопкой.
И состояние кнопки не запоминается, да и нет его смысла запоминать, ибо ее состояние будет определяться наличием товара в корзине. И это нужно для того чтобы определить это состояние только во время загрузки страницы. Только тут нужно обходить циклом товаров корзины, а при нажатии на нее, это действие полный бред.
|
Сообщение от sty-wolf
|
|
если прописывать просто по id $('span[data-sb-id-button='+Id+']'), то не срабатывает смена цвета кнопки
|
Код кнопки показать не мешало бы, а то речь словно о неизвестных планетах.
Последний раз редактировалось laimas, 05.11.2019 в 18:02.
|
|
05.11.2019, 18:11
|
|
Интересующийся
|
|
Регистрация: 30.10.2019
Сообщений: 19
|
|
|
Сообщение от laimas
|
Код кнопки показать не мешало бы, а то речь словно о неизвестных планетах.
|
вот более развернуто как у меня это устроено
<div class="product">
<div class="product__list">
<div class="product__element">
<img class="product__img" src="smartbasket/img/pizza.png" alt="Пицца">
<div class="product__name">Пицца «Ветчина и грибы»</div>
<div class="product__price"><span class="product__price-number">320</span> Р</div>
<div class="product__size">
<div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="0032pz">32 см</div>
<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="0026pz">26 см</div>
<div class="product__size-element" data-sb-curent-price="220" data-sb-curent-size="22" data-sb-curent-id-or-vendor-code="0022pz">22 см</div>
</div>
<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>
<div class="product__element">
<img class="product__img" src="smartbasket/img/pizza2.png" alt="Пицца">
<div class="product__name">Пицца «Креветки и грибы»</div>
<div class="product__price"><span class="product__price-number">320</span> Р</div>
<div class="product__size">
<div class="product__size-element" data-sb-curent-price="320" data-sb-curent-size="32" data-sb-curent-id-or-vendor-code="1132pz">32 см</div>
<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="1126pz">26 см</div>
<div class="product__size-element" data-sb-curent-price="160" data-sb-curent-size="16" data-sb-curent-id-or-vendor-code="1116pz">16 см</div>
</div>
<div class="product__quantity"></div>
<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="1132pz" 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/pizza2.png">
<i class="fas fa-cart-plus"></i> <span data-sb-id-button="1132pz">Добавить в корзину</span>
</button>
</div>
<div class="product__element">
<img class="product__img" src="smartbasket/img/pizza3.png" alt="Пицца">
<div class="product__name">Пицца «Сыр,колбаса и оливки»</div>
<div class="product__price"><span class="product__price-number">520</span> Р</div>
<div class="product__size">
<div class="product__size-element" data-sb-curent-price="520" data-sb-curent-size="52" data-sb-curent-id-or-vendor-code="2252pz">52 см</div>
<div class="product__size-element" data-sb-curent-price="260" data-sb-curent-size="26" data-sb-curent-id-or-vendor-code="2226pz">26 см</div>
<div class="product__size-element" data-sb-curent-price="160" data-sb-curent-size="16" data-sb-curent-id-or-vendor-code="2216pz">16 см</div>
</div>
<div class="product__quantity"></div>
<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="2252pz" data-sb-product-size="52" data-sb-product-name="Пицца «Ветчина и грибы»" data-sb-product-price="320" data-sb-product-quantity="1" data-sb-product-img="smartbasket/img/pizza3.png">
<i class="fas fa-cart-plus"></i> <span data-sb-id-button="2252pz">Добавить в корзину</span>
</button>
</div>
addToBasketButton.click(function () {
let productsArr = methods.getProducts() || {}; // получаем данные корзины или создаём новый объект, если данных еще нет
let sbId = $(this).attr("data-sb-id-or-vendor-code"); // ID товара
let getQuantity = 0; // количество товара начинаем считать с 0
let limitationInBasket = 3; // ограничение товара при добавлении в корзину
for (let key in productsArr) {
for (let value in productsArr[key]) {
if (value === 'sbQuantity') {
getQuantity += +productsArr[key][value];
}
}
}
productsArr[sbId] ? $(this).removeClass('button-active').find('span[data-sb-id-button]').text('Добавить в корзину') : $(this).addClass('button-active').find('span[data-sb-id-button]').text('Удалить в корзину');
if (productsArr[sbId]) {
// let beforeClickHtml = $(this).html();
// $(this).text('Товар уже в корзине');
// $('body').append(methods.alertBlock('alreadyAdded'));
// setTimeout(() => {
// $(this).html(beforeClickHtml);
// }, 1500);
// return false;
delete productsArr[sbId]; //Удаляем из массива
methods.setProducts(productsArr); //Обновляем хранилище
methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin'); // обновляем корзину
methods.commonResult(productsArr, 'updateCommonResult'); //обновляем общий результат
} else {
let productProperties = {};
productProperties.sbId = sbId;
productProperties.sbImg = $(this).data("sbProductImg");
productProperties.sbName = $(this).data("sbProductName");
if (defaults.productSize && defaults.productPrice) {
productProperties.sbSize = $(this).attr("data-sb-product-size");
}
if (defaults.productQuantityWrapper) {
productProperties.sbQuantity = $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
} else {
productProperties.sbQuantity = +$(this).data("sbProductQuantity");
}
productProperties.sbPrice = +$(this).attr("data-sb-product-price");
productProperties.sbPrice.toFixed(2);
if (defaults.productQuantityWrapper) {
productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * $(this).parents('.' + defaults.productElement).find('.' + inputProductQuantity.attr('class')).val();
productProperties.sbPriceCommon.toFixed(2)
} else {
productProperties.sbPriceCommon = +$(this).attr("data-sb-product-price") * +$(this).data("sbProductQuantity");
productProperties.sbPriceCommon.toFixed(2)
}
// проверяем превышен лимит или нет
if ( limitationInBasket <= getQuantity) {
$('span[data-sb-id-button="'+sbId+'"]').text('Добавить в корзину');//Меняем текст
$(this).removeClass('button-active'); // удалить цвет
$('body').append(methods.alertBlock('limitationInBasket'));
} else { // иначе товар добавлен в корзину
productsArr[sbId] = productProperties;
methods.setProducts(productsArr); //записываем в localStore
smartBasket.empty(); // проверка пустой переменной
smartBasket.append(methods.showProducts(productsArr));
methods.getSmartBasketMinState(productsArr, 'updateSmartBasketMin');
methods.commonResult(productsArr, 'updateCommonResult');
}
}
});
return smartBasket;
},
Последний раз редактировалось sty-wolf, 05.11.2019 в 18:16.
|
|
|
|
