Это вопрос, который я задаю себе, когда впервые начал писать корзину для покупок, используя только 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 () используется для:

  1. Поверните все мои кнопки
  2. Просматривать все мои предметы для проверки наличия

Те же принципы были применены к функции removeCart () с некоторыми изменениями, соответствующими контексту.

Я использовал event.target.parentElement.parentElement.id, чтобы найти элемент в removeCart ().

Дополнение к коду, пожалуй, только такое:

event.target.parentElement.parentElement.remove ();

Это используется для удаления отображаемого текста / элемента, когда inCart / количество равно нулю.

Конечный результат:

Картинка не может точно сказать, в чем улучшение, но теперь все ошибки исчезли!