Логика корзины товаров / Подсчёт подытога и итоговой суммы

Рет қаралды 11,678

3 жыл бұрын

В этом видео разберем один из вариантов подсчёта стоимости товаров и реализацию итоговой суммы заказа. Будем писать только JavaScript, поскольку вёрстка тут не имеет особого значения (и поэтому тут Bootstrap).

Пікірлер: 53

@prosto_razrabotka 3 жыл бұрын

😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

@hjetwd 3 жыл бұрын

Однажды тестировщик программ заходит в бар. Забегает в бар. Пролезает в бар. Танцуя, проникает в бар. Крадется в бар. Врывается в бар. Прыгает в бар и заказывает: кружку пива, 2 кружки пива, 0 кружек пива, 999999999 кружек пива, ящерицу в стакане, -1 кружку пива, qwertyuip кружек пива. =)))))))))))))))))))))

@user-yu6bm5nl7k Жыл бұрын

Первый реальный клиент заходит в бар и спрашивает, где туалет. Бар вспыхивает пламенем, все погибают.

@Goodbish 3 жыл бұрын

Даже если задача эта задача кажется легкой и сейчас её решение мне не особо интересно, но рассказываешь и показываешь так интересно, что всё видео посмотрел. Спасибо

@cliiick_meee 3 жыл бұрын

все очень класно - а где брови ?

@user-vw4xp5sj8e 3 жыл бұрын

Автору спасибо за видео, очень круто! :) Если вдруг кому интересно попрактиковаться, развлечения ради данный функционал можно расширить следующим образом: 1. Добавляем возле товара переключалку c режимом добавления товара в корзину поштучно и упаковкой. Когда переключаемся на упаковку, то при добавлении товара нажатием на плюс округляем товар таким образом, чтобы итоговое кол-во было кратным кол-ву в упаковке. Аналогично по нажатию на минус. Опционально можно сделать, чтобы у некоторых товаров была скидка, когда мы решили переключить на упаковку. Можно глянуть примеры, как это выглядит в разных интернет магазинах 2. Добавляем где-нибудь внизу поле с промокодом, после ввода которого к определенным товарам по прописанной логике применяется скидка. Тут уже можно дать волю фантазии)

@prosto_razrabotka 3 жыл бұрын

Вот такое вот видео вышло -) Лайк?)

@profesor08 3 жыл бұрын

Все это миллион раз обжевано. Но как на счет того, чтоб сделать какой-то хитрый и сложный компонент, который сложно трансформируется на мобилках и имеет отличную логику работу от десктопа. И все это одним кодом, без дублей. Я за уникальный контент, а не повторение одного и того же.

@prosto_razrabotka 3 жыл бұрын

@@profesor08 подсчёт суммы, который на десктопе делается одним образом, а на мобиле другим?! Вы в своём уме?

@timurkhudiyev 3 жыл бұрын

@@profesor08 ну так не смотрите в миллионный раз одно и то же)

@profesor08 3 жыл бұрын

@@prosto_razrabotka отображение, взаимодействие пользователя с калькулятором. Что-то действительно сложное, нестандартное, что подарит новый опыт для зрителя.

@FaYrUsinc 3 жыл бұрын

Круто когда в качестве переменной в квадратных скобках делают деструктуризацию массива даже ничего не говоря толком, но потом на следующей же строке разбирают как работает += Если это юмор такой, то лайк конечно. Если нет, то было бы неплохо и то тоже в таком случае объяснять.

@prosto_razrabotka 3 жыл бұрын

У меня последние 10 видео про js и почти в каждом есть деструктуризация. В каждом видео про это рассказывать... увольте...

@Vladikslavik 3 жыл бұрын

))) Ну да.. это типа: здесь у нас сиракузская проблема, числа-градины.. ну с этим всё ясно.. а вот здесь ниже 2+2 равно 4, это если 1+1+1+1, если кто не понял )))

@daniilthegunner843 3 жыл бұрын

Круто! А можешь про запросы рассказать. CORS всякие там,пост запросы и т.д)

@artem_ka3863 3 жыл бұрын

Спасибо! Очень интересно

@prosto_razrabotka 3 жыл бұрын

Благодарю -)

@fellainthewagon7166 3 жыл бұрын

Спасибо, крутой! Я учусь поэтому довольно не просто уследить за всем при просмотре видео, но думаю если параллельно отрабатывать в vscode то все будет понятно. Можно и лайтовее все пояснять, но тогда мозг вообще работать не будет

@boldureans 3 жыл бұрын

Крутяк!

@prosto_razrabotka 3 жыл бұрын

Спасибо)

@puzzleduzzle541 2 жыл бұрын

Подскажи пож. сделал всё как ты на видео, столкнулся с проблемой цифры до 1000 бутстреп отображает без пробелов, а четырехзначные и более с пробелом (пример "969" и "1 000") .Так вот без пробелов считает нормально, а с пробелом не считает subtotal и пишет NaN.

@kotlancer 3 жыл бұрын

Привет! Ты недавно постил gsap, было бы здорово что-то по нему посмотреть от тебя :) За корзину лайк

@prosto_razrabotka 3 жыл бұрын

Спасибо. На счёт гсапа подумаю.

@user-mf2we4gb8w 3 жыл бұрын

Твои ролики очень классные)

@prosto_razrabotka 3 жыл бұрын

Спасибо)

@agilkerimov 3 жыл бұрын

Конечно лайк. Не считая forEach к которому у меня "личнайа неприязьн" все круто

@prosto_razrabotka 3 жыл бұрын

Ну... бывает -)

@Rb-ur5em 2 жыл бұрын

Добрый день. Владлен Подскажите можно ли найти что-то подобное в принципе? Как лучше поступить ? Писать игру с нуля не получится точно! Простая карточная игра (качество и сложность не важно. лучше что-то по проще..) HTML, CSS, JS, MySQL Описание: Регистрация игрока, Минимум два участника Спасибо

@user-dv8fp6os2z Жыл бұрын

Спасибо! Очень полезное видео, только итоговую сумму я пересчитал в addEventListener с помошью метода reduce, всего одна строчка получилась: const amount = [...document.querySelectorAll(".summ_item")].reduce((summ, totalSumm) => summ + Number(totalSumm.innerHTML), 0);

@tandev713 3 жыл бұрын

Благодарю за материал! Вообще странный покупатель, который хочет купить 0 товаров. Я делаю минимально 1 позицию при итерации уменьшения. if > 1.

@timurkhudiyev 3 жыл бұрын

Отлично. Все просто и понятно. Правда проверку на 0 лучше сделать >= 0.

@prosto_razrabotka 3 жыл бұрын

Есть такое... согласен)

@romanovden Жыл бұрын

Много лишнего кода. можно было просто текстовый элемент валюты вынести за элемент. В другой спан например. Так же будет актуально при создании много валютной корзины. или я не прав?

@hjetwd 3 жыл бұрын

У тебя есть 3 строки - первые две это товары, третья - итоговая сумма товаров. Что общего у них? Есть ли повторяющиеся, шаблонные элементы? Да - цена. В первой строке - 2 000 руб., во второй строке - 10 000 руб. и в третьей строке - 12 000 руб. ... Так... стоп! Если глаз видит повторяемость, шаблонность элементов, то почему их разметка в html отличается? Почему у Итого есть разбитие на цифру (12000) и на валюту (руб.), а у товаров это тупо как текст написано, а не так же разбито? В итоге бы у тебя функция init() по единому шаблону считала Итого, а так же слушатель клика считал общую цену одного товара по тому же шаблону. ... Проблема с отрицательными числами - если input.value НЕ меньше 1. А то развели моду "не равно 0" =)))))))))))))) Сейчас школьных хакеров набежит и поломает ваше "не равно 0" через консоль, задав кол-во товаров -999. Минус 999 это точно не равно 0 =))) Признавайся, ты специально это делаешь, что бы забайтить народ на комментарии? =))))))))