Цитата:
>>> значит нужно взять массив товаров корзины, обойти их циклом, в котором кнопкам связанных с ними товаров присвоить класс и текст ___ сейчас попробую |
Цитата:
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 селектор кнопки. |
получается вот это нужно загнать в цикл?
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('Добавить в корзину');
}
|
Цитата:
Вы бы вместо картинок 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') //пометить кнопку товара
})
}
Если товары, это массив объектов, в которых есть свойство содержащее идентификатор товара, то выбор несколько иной будет. |
Судя по картинке, логика добавления/удаления товара в корзину означает, что даже условия:
товар в корзине ? красная : синяя вообще не потребуется. |
Вложений: 1
|
Цитата:
var ids = Object.keys(basketItems); //получить идентификаторы товаров .... и если это непосредственно и требует проверки наличия, то сразу:
Object.keys(basketItems).forEach((id) => {
$('span[data-sb-id-button='+id+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
})
}
|
вот так работает, т.е меняет цвет при нажатии на кнопку
Object.keys(basketItems).forEach((id) => {
$('span[data-sb-id-button='+sbId+']').text('Удалить из корзины').closest('button').addClass('button-active') //пометить кнопку товара
});
но все равно сбрасывается после перезагрузки страницы... если прописывать просто по id $('span[data-sb-id-button='+Id+']'), то не срабатывает смена цвета кнопки |
Цитата:
Есть поле выбора количества товаров. Есть кнопка добавить в корзину. При выборе количества должен проверяться лимит, величина которого должна определяться полем, ибо в корзине такого товара еще нет, и какого черта этот лимит прописан в корзине я не знаю. Соответствие количества лимиту должен проверять и сервер, а делать это он должен ни как не потому, что ему сообщит клиент. Если это держать в корзине, то как параметр для всех товаров, а не для каждого индивидуально, потому как в таком случае это полнейший бред. И, допустим, что выбрать количество менее 1 шт. этим полем нельзя. Щелчок по кнопке добавления в корзину добавляет/удаляет товар. То есть если один обработчик, то достаточно toggleClass и смена текста. Все, никакой проверки наличия в корзине не требуется. У вас в комнате по умолчанию свет выключен, следующий щелчок по выключателю зажжет его, следующий выключит и т.д. Вы же не станете рассуждать - "выключен свет, ага, значит если щелкну, то выключится" и наоборот. Так и с этой кнопкой. И состояние кнопки не запоминается, да и нет его смысла запоминать, ибо ее состояние будет определяться наличием товара в корзине. И это нужно для того чтобы определить это состояние только во время загрузки страницы. Только тут нужно обходить циклом товаров корзины, а при нажатии на нее, это действие полный бред. Цитата:
|
Цитата:
<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;
},
|
| Часовой пояс GMT +3, время: 17:16. |