Это вопрос, который я задаю себе, когда впервые начал писать корзину для покупок, используя только HTML, CSS и ванильный JS. Это проект, который нам необходимо начинать с нуля, и, как и любые студенты, я решил, что учебные пособия, веб-сайт и YouTube - это способ достичь этой цели.
Не то чтобы они плохие, они действительно классные! Совсем не так, когда вы следуете им неукоснительно.
Вскоре я сталкиваюсь с множеством препятствий, пытаясь создать код для тележки на основе руководств, которые я не совсем понимаю.
Вот одна из моих основных проблем с описанием:
Добавление товаров в корзину → Эта часть была ЛЕГКОЙ, пока не возникла проблема с удалением ИЗ корзины.
1а. Вот что происходит, когда я добавляю товар в корзину:
1b. И когда я удаляю целевой элемент и возвращаю его в локальное хранилище:
Это приводит к тому, что функция добавления в корзину не увеличивает количество (inCart), а добавляет новый элемент, который выглядит следующим образом:
Я сильно полагаюсь на свое локальное хранилище для отображения и управления моими элементами. Это повлияло на отображение, что привело к следующему:
Это ОГРОМНОЕ нет! (по крайней мере для меня!).
Эта проблема была кошмаром (думаю, для новичка вроде меня). Я снова просмотрел кучу учебных пособий и видео, спросил своих друзей и учителя, но не смог получить ответ, который удовлетворил бы мои потребности.
Именно тогда меня осенило. Я был так сосредоточен на СЛЕДУЮЩИХ уроках, что не смог четко понять, в чем на самом деле проблема.
Итак, я изменил его под свои нужды.
Я все поменял.
— -###
Я не уверен, смогу ли я опубликовать здесь код, который изучил с помощью этого руководства, поэтому просто кратко опишу его.
- Как работает код из учебника, так это то, что он проходит по моим «продуктам» и устанавливается в «корзину», используя название продукта, за которым следует весь объект. -
Я воссоздал свою функцию setItem с помощью таких методов, как forEach (), .splice () и .map ().
Простите за уродливые коды, потому что я еще новичок в этом.
Добавление товара в корзину, если она пуста:
Достаточно установить только значение null.
var x = JSON.parse (localStorage.getItem («ключ») || [];
Один из самых полезных кодов, с которыми я когда-либо сталкивался. Я видел рекомендацию в одном из постов на StackOverflow. Что он делает, так это то, что помогает предотвратить перезапись объектов, когда вы снова устанавливаете их в локальное хранилище.
- Я пропустил часть своих кодов из-за повторения.
- присвоение имени переменной x - это просто лень, которую я делаю при тестировании.
.map () используется для проверки существования элемента (с возвращаемым значением 1 или -1)
Во-первых, выбранный элемент устанавливается в setItem с использованием моих products (локальное хранилище). Используя .map (), я нахожу setItem в cartItems с помощью .forEach () и оператора if для быстрой проверки. Как только товар найден, значение inCart увеличивается. .splice () используется для удаления старой записи и замены новой записи (обновленная корзина).
Если .map () возвращает -1 (что означает, что элемент не найден), выполняется else, а setItem помещается как новый объект.
.forEach () используется для:
- Поверните все мои кнопки
- Просматривать все мои предметы для проверки наличия
Те же принципы были применены к функции removeCart () с некоторыми изменениями, соответствующими контексту.
Я использовал event.target.parentElement.parentElement.id, чтобы найти элемент в removeCart ().
Дополнение к коду, пожалуй, только такое:
event.target.parentElement.parentElement.remove ();
Это используется для удаления отображаемого текста / элемента, когда inCart / количество равно нулю.
Конечный результат:
Картинка не может точно сказать, в чем улучшение, но теперь все ошибки исчезли!