Javascript.RU

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

chebox вместо button click
дорабатываю корзину, пытаюсь переделать кнопку button click, на checkbox, суть задачи в том, чтобы была одна кнопка "добавить" и при нажатии на эту кнопку, добавлялся товар в корзину, а если ещё раз нажать на эту кнопку удалялся товар из корзины,

a = {
                getProducts: function () {
                    return JSON.parse(localStorage.getItem(e.localStorageName))
                },
                setProducts: function (t) {
                    var a = JSON.stringify(t, "", 4);
                    return localStorage.setItem(e.localStorageName, a), !1
                },
                deleteProducts: function (e, s) {
                    var n = t("<button>").attr({
                        class: "smart-basket__product-delete"
                    }).html('<span class="smart-basket__delete-icon">×</span>');
                    return n.click(function (n) {
                        n.preventDefault();
                        var r = t(this).data("sbProductDelete");
                        delete e[r], a.setProducts(e), t(this).parents("." + s.attr("class")).remove(), a.getSmartBasketMinState(e, "updateSmartBasketMin"), a.commonResult(e, "updateCommonResult")
                    }), n
                },


вверху массив данных, в нем имеется метод deleteProducts который удаляет товар из корзины

.product__add-to-cart-button // класс, который добавляет товар


вот код добавления в корзину

stateBasket: function () {
                    var s = a.getProducts() || {},
                        n = t("<div>").attr({
                            class: "smart-basket"
                        }),
                        r = t("." + e.buttonAddToBasket);
                    localStorage.getItem(e.localStorageName), n.append(a.showProducts(s));
                    var o, i, l, c;
                    if (e.productQuantityWrapper) {
                        var u = t("<div>").attr({
                                class: "smart-basket__quantity-item"
                            }),
                            d = t("<button>").attr({
                                class: "smart-basket__add-item"
                            }).html("+"),
                            p = t("<button>").attr({
                                class: "smart-basket__remove-item"
                            }).html("-");
                        o = t("<input>").attr({
                            class: "smart-basket__product-quantity-state",
                            min: "1",
                            step: "1",
                            pattern: "^[0-9]",
                            value: "1"
                        }), u.append(p).append(o).append(d),
                            d.click(function (a) {
                            a.preventDefault(), i = t(this).parents("." + e.productElement).find("." + o.attr("class")), l = t(this).parents("." + e.productElement).find("." + e.buttonAddToBasket), c = +t(this).parents("." + e.productElement).find("." + o.attr("class")).val(), c >= 1 ? (c++, i.val(c), l.attr("data-sb-product-quantity", c)) : (i.val(1), l.attr("data-sb-product-quantity", 1))
                        }),
                            p.click(function (a) {
                            a.preventDefault(), i = t(this).parents("." + e.productElement).find("." + o.attr("class")), l = t(this).parents("." + e.productElement).find("." + e.buttonAddToBasket), c = +t(this).parents("." + e.productElement).find("." + o.attr("class")).val(), c > 1 ? (c--, i.val(c), l.attr("data-sb-product-quantity", c)) : (i.val(1), l.attr("data-sb-product-quantity", 1))
                        }), t("." + e.productQuantityWrapper).append(u)
                    }
                    if (e.productSize && e.productPrice) {
                        var m = t("." + e.productSize);
                        t("." + e.productElement).find("." + e.productSize + ":first-child").addClass(e.productSize + "_active"), m.click(function (a) {
                            a.preventDefault(), t(this).parents("." + e.productElement).find("." + e.productSize).removeClass(e.productSize + "_active"), t(this).addClass(e.productSize + "_active");
                            var s = t(this).parents("." + e.productElement).find("." + e.buttonAddToBasket),
                                n = t(this).parents("." + e.productElement).find("." + e.productPrice),
                                r = t(this).attr("data-sb-curent-size");
                            console.log(r);
                            var o = t(this).attr("data-sb-curent-price"),
                                i = t(this).attr("data-sb-curent-id-or-vendor-code");
                            console.log(i), s.attr({
                                "data-sb-product-price": o,
                                "data-sb-product-size": r,
                                "data-sb-id-or-vendor-code": i
                            }), n.html(o)
                        })
                    } else console.log("Заполните параметры productSize и productPrice");
                    return a.getSmartBasketMinState(s), r.click(function () {
                        var s = this,
                            r = a.getProducts() || {}, // все товары
							i = t(this).attr("data-sb-id-or-vendor-code"); // id товара
							
 
                        if (void 0 !== r[i]) {
                            var l = t(this).html();
                            return t(this).text("Товар уже в корзине"), t("body").append(a.alertBlock("alreadyAdded")), setTimeout(function () {
                                t(s).html(l)
                            }, 1500), !1
                        }
                        var c = {};
                        c.sbId = i, c.sbImg = t(this).data("sbProductImg"), c.sbName = t(this).data("sbProductName"),
                        e.productSize && e.productPrice && (c.sbSize = t(this).attr("data-sb-product-size")), e.productQuantityWrapper ? c.sbQuantity = t(this).parents("." + e.productElement).find("." + o.attr("class")).val() : c.sbQuantity = +t(this).data("sbProductQuantity"), c.sbPrice = +t(this).attr("data-sb-product-price"), c.sbPrice.toFixed(2), e.productQuantityWrapper ? (c.sbPriceCommon = +t(this).attr("data-sb-product-price") * t(this).parents("." + e.productElement).find("." + o.attr("class")).val(), c.sbPriceCommon.toFixed(2)) : (c.sbPriceCommon = +t(this).attr("data-sb-product-price") * +t(this).data("sbProductQuantity"), c.sbPriceCommon.toFixed(2)), r[i] = c, a.setProducts(r), n.empty(), n.append(a.showProducts(r)), a.getSmartBasketMinState(r, "updateSmartBasketMin"), a.commonResult(r, "updateCommonResult"), t("body").append(a.alertBlock("inBasket"))
                    }), n
                },


<button class="product__add-to-cart-button" data-sb-id-or-vendor-code="005" data-sb-product-name="Iphone 4" data-sb-product-price="7000" data-sb-product-quantity="1" data-sb-product-img="img/iphone-4.png">
					<i class="fas fa-cart-plus"></i> Добавить в корзину
				</button>


таким образом отловил событие клика

$('.product__add-to-cart-button').click(function() {
            alert(1);
            });


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

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

удаления из localstorage
пытаюсь удалить массив по id из localstorage

if (void 0 !== id) {
	 var products = a.getProducts() || {};
	var index = products.indexOf(id);
	console.log(id);
         if(index === -1) {
	    products.push(r[id]);
          } else {
	     products.splice(index, 1);
	   }


ну получаю ошибку

Uncaught TypeError: products.indexOf is not a function

что делаю не так?
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2019, 14:59
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Метода indexOf нет у объекта, как и нет у него метода push
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2019, 15:35
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

Сообщение от laimas Посмотреть сообщение
Метода indexOf нет у объекта, как и нет у него метода push
я понимаю, а как написать код удаления так чтоб удалялся 1 элемент массива localStorage?
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2019, 15:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от sty-wolf
чтоб удалялся 1 элемент массива localStorage?
Массив и объект, это разные вещи имеющие свои методы. var products = a.getProducts() || {} означает, что getProducts возвращает объект, а не массив, то есть и хранилище содержит не массив, а объект. А удаление в нем, это так https://developer.mozilla.org/ru/doc...erators/delete.
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2019, 16:09
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

т.е мне надо что то наподобие такого использовать?

n.preventDefault();
                        var r = t(this).data("sbProductDelete");
                        delete e[r], a.setProducts(e), t(this).parents("." + s.attr("class")).remove(), a.getSmartBasketMinState(e, "updateSmartBasketMin"), a.commonResult(e, "updateCommonResult")
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2019, 16:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от sty-wolf
наподобие такого использовать?
delete e[r]
Ну если e, это объект и в нем нужно удалить свойство выраженное переменной r, то да.
Ответить с цитированием
  #8 (permalink)  
Старый 31.10.2019, 18:49
Интересующийся
Отправить личное сообщение для sty-wolf Посмотреть профиль Найти все сообщения от sty-wolf
 
Регистрация: 30.10.2019
Сообщений: 19

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

данные добавляются
https://ibb.co/RhHmgNp

ну когда нажимаю повторно на кнопку(чтоб они удалились) вот что происходит

https://ibb.co/9sMrKbk


это то что хранит e
var e = {
                productElement: "product__element", // класс блока с карточкой.
                buttonAddToBasket: "product__add-to-cart-button", // класс для кнопки корзины
                countryCode: "+7",
                smartBasketCurrency: "₽",
                productQuantityWrapper: !1,
                productPrice: !1,
                productSize: !1,
                smartBasketMinArea: "header__basket-min",
                smartBasketMinIconPath: "/smartbasket/img/shopping-basket-wight.svg",
                smartBasketMinText: !1,
                telIsRequired: !0,
                emailIsRequired: !1,
                nameIsRequired: !0,
                localStorageName: "ProductsItems"
            },


var r = t(this).data("sbProductDelete");


setProducts: function (t) {
                    var a = JSON.stringify(t, "", 4);
                    return localStorage.setItem(e.localStorageName, a), !1
                },


и вот сам код

r.click(function () {
                        var s = this,
                            r = a.getProducts() || {}, // все товары
							i = t(this).attr("data-sb-id-or-vendor-code"); // id товара

                        if (void 0 !== r[i]) {
					    var r = t(this).data("sbProductDelete");
                        delete e[r], a.setProducts(e), t(this).parents("." + t(this).attr("class")).remove(), a.getSmartBasketMinState(e, "updateSmartBasketMin"), a.commonResult(e, "updateCommonResult")
						console.log(e[r]);
						}


как сформировать этот delete оператор, чтоб удалялся по id товар в localstorage
Ответить с цитированием
  #9 (permalink)  
Старый 01.11.2019, 12:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от sty-wolf
чтоб удалялся по id товар в localstorage
Если e, это информация о товаре в корзине, то где там ID товара вообще? То что хранит ваш e, это нечто невообразимое, хотя бы productPrice: !1 и прочее. Из этого объекта можно удалить, например, это свойство:

delete e.productPrice

то есть вы не к тому обращаетесь для удаления товара. Просмотрите структуру объекта корзины.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы в текст button менялось значение в зависимости от количества выбран mopsusha Общие вопросы Javascript 10 19.03.2018 20:16
Поставить input вместо button Djambulat Angular.js 4 23.11.2017 17:05
Вместо touchstart - click (на iOS) mn8156 jQuery 2 30.09.2016 19:18
элемент внутри кнопки button FanAizu (X)HTML/CSS 2 15.07.2014 20:44
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 10:55