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

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2020
  • В этом видео разберем один из вариантов подсчёта стоимости товаров и реализацию итоговой суммы заказа. Будем писать только JavaScript, поскольку вёрстка тут не имеет особого значения (и поэтому тут Bootstrap).

ความคิดเห็น • 53

  • @prosto_razrabotka
    @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
    @hjetwd 3 ปีที่แล้ว +16

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

    • @user-yu6bm5nl7k
      @user-yu6bm5nl7k ปีที่แล้ว +1

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

  • @cliiick_meee
    @cliiick_meee 3 ปีที่แล้ว +6

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

  • @user-vw4xp5sj8e
    @user-vw4xp5sj8e 3 ปีที่แล้ว +1

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

  • @Goodbish
    @Goodbish 3 ปีที่แล้ว +3

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

  • @prosto_razrabotka
    @prosto_razrabotka  3 ปีที่แล้ว +8

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

    • @profesor08
      @profesor08 3 ปีที่แล้ว

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

    • @prosto_razrabotka
      @prosto_razrabotka  3 ปีที่แล้ว

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

    • @timurkhudiyev
      @timurkhudiyev 3 ปีที่แล้ว

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

    • @profesor08
      @profesor08 3 ปีที่แล้ว

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

  • @daniilthegunner843
    @daniilthegunner843 3 ปีที่แล้ว +1

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

  • @artem_ka3863
    @artem_ka3863 3 ปีที่แล้ว +1

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

  • @FaYrUsinc
    @FaYrUsinc 3 ปีที่แล้ว +3

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

    • @prosto_razrabotka
      @prosto_razrabotka  3 ปีที่แล้ว

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

    • @Vladikslavik
      @Vladikslavik 3 ปีที่แล้ว

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

  • @fellainthewagon7166
    @fellainthewagon7166 3 ปีที่แล้ว

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

  • @boldureans
    @boldureans 3 ปีที่แล้ว +1

    Крутяк!

  • @kotlancer
    @kotlancer 3 ปีที่แล้ว +5

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

    • @prosto_razrabotka
      @prosto_razrabotka  3 ปีที่แล้ว +1

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

  • @user-mf2we4gb8w
    @user-mf2we4gb8w 3 ปีที่แล้ว

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

  • @agilkerimov
    @agilkerimov 3 ปีที่แล้ว

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

  • @timurkhudiyev
    @timurkhudiyev 3 ปีที่แล้ว +1

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

  • @tandev713
    @tandev713 3 ปีที่แล้ว

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

  • @puzzleduzzle541
    @puzzleduzzle541 2 ปีที่แล้ว

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

  • @stasila78
    @stasila78 3 ปีที่แล้ว

    Благодарю за видео. Ну скинул бы архив для тернировки...

    • @prosto_razrabotka
      @prosto_razrabotka  3 ปีที่แล้ว +1

      А почему бы самому не написать код? Для тренировки..

  • @hjetwd
    @hjetwd 3 ปีที่แล้ว +3

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

  • @Rb-ur5em
    @Rb-ur5em 3 ปีที่แล้ว

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

  • @romanovden
    @romanovden 2 ปีที่แล้ว

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

  • @TheTanker1981World
    @TheTanker1981World 3 ปีที่แล้ว

    как сделать чтобы не надо было каждый раз чистить историю браузера чтоб обновлялся js css код

    • @user-tl8bf4gm6m
      @user-tl8bf4gm6m 2 ปีที่แล้ว

      извини, я задержался.. CTRL + F5

  • @perseveranse
    @perseveranse 3 ปีที่แล้ว +2

    ёлка: У ТЕБЯ ЗДЕСЬ НЕТ ВЛАСТИ

  • @AmericanDragon134
    @AmericanDragon134 2 ปีที่แล้ว

    Давайте попробуем с помощью Реакт.жс

  • @GGG-sz4hm
    @GGG-sz4hm 3 ปีที่แล้ว

    Нифига не понел. До этого уровня мне расти и расти

  • @user-dv8fp6os2z
    @user-dv8fp6os2z ปีที่แล้ว

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

  • @user-nj1dh5qf4b
    @user-nj1dh5qf4b 3 ปีที่แล้ว

    на айфоне не работает почему-то