Урок 3. Разработка веб-приложения на php. Форма покупки товара

Автор Denis Lisitsin
Урок 3. Разработка веб-приложения на php. Форма покупки товара

пресс и так этот видео урок и в этом уроке мы должны обработать.

Клик по кнопке купить значит, что мы должны сделать по задумке. Я думаю я хочу сделать следующие значит я хочу при клике по кнопке купить чтобы показывать модальное окно в нём будет форма где пользователя совсем минимальная формы эту нас не интернет-магазин. Да где пользователи собственно только своё имя e-mail дальше можете приходить допустим ещё телефон чтобы он заполнял ну принципе у нас будет имя и e-mail в форме уже будет автоматически подставляться выбранный товар допустим товар 2 из черноплодки купить на нём и его цена будет поставляться.

Ну — это кнопка купить.

Вот такая вот задумка. Давайте её реализовывать значит, что нам потребуется потребуется нам модальное окно bootstrap, а давайте его возьмём так скорпион и добавим где-нибудь внизу так немножко секцию сколько. Вот так вот. Вот и что-то добавим нашу облака модального окна он изначально открыт не виден на страничке вот мы его не видим и будем видеть только при клике по кнопке купить насчёт теперь нам нужно сказать нашу кнопку нажал кнопку с модальным окном сделаем — это наверное через джаваскрипт который подключен чуть позже. Ну давайте для начала немножко поправил some Content модального окна ну во-первых модель тату нас будет оформление заказа оформление заказа adalya modal Footer. Я думаю здесь лишний нам он не нужен абсолютно кажется поэтому я его уберу. Ну, а в modal Body я поставлю форму значит простейшую форму. Давайте опять-таки возьмём с bootstrap A Forge так простейшую форму первую попавшуюся отсюда возьмём значит форум. Давайте дадим кто-нибудь или нефиг it by и метод передачи данных на всякий случай поставим в принципе у нас скоро будет отправляться наверное. Ну если не работает может быть постом будем отправлять так Label for первое имя name Input Type name соответственно так — это я тебе потом уберу placeholder оставлю. Аиде тоже name так ваше имя и хутор тоже его пишет. Я никаких особых здесь сразу предупреждаю проверка делать — это просто учебный курс и он будет направлена на то чтобы показать как прикручивать платёжную систему поэтому проверять корректность заполнения формы там ещё чего-то — это всё уже как мне кажется лишнее и мало связанные с. Темой данного урока поэтому я сознательно всё — это дело опускаю так хорошо так всё нормально. С копиром тачка следующее поле у нас будет email email после татуажа email здесь у нас тоже email и. Азии email так чудесно. Ну и ещё два поля нам потребуется — это выбранный товар и цена выбранный товар товар значит здесь нам placeholder не нужен мой сюда будем подставлять выбранный товар так product только Type здесь текст, а то есть ещё чтобы пользователь сюда не лез особо давайте мы поставим атрибут readonly так вот вот надо его наверно если переставить сюда. Я тебе сейчас будет цена цена, а также ритм улан-удэ прайс idprights. Вот и замечательно замечательно. Так ну и кнопка купить значит батон Type саммит здесь у нас купить всё замечательно. Так давайте теперь создадим папку псы мне о положим наше собственное единственный JS file которая тоже назову Main. ГСК значит, что я хочу у нас есть у товаров у каждого товара у каждого товара они у нас секция скрывала форма вот сердце у каждого товара есть кнопка с классом by купить водка этой кнопки мы с вами будем привязываться. Значит при клике по кнопке с классом у элемента. Точнее с классом by Class name by. Ну будем обрабатывать событие клика и выполнять соответственно к этому событию не. Какую функцию. А, что ты, что нам нужно сделать у каждого у этой кнопки есть. Да — это просто. Это — это product в которых соответственно хранится. Цена товара и наименование товара. А вот собственно. А давайте мы с вами стихи получим значит давайте создадим переменную прайс и возьмём у текущего элемента ложись A3 Data Price так и сразу же создадим — это переменная produce и здесь меняем просто на да — это так. А вот они наши две переменные давайте мы собственно получим теперь значение и. Гусейн модальное окно. Да ну в принципе как-то так значит где мы получим где мы возьмем значение обычно мы взяли там что-то я, что ты. Давайте посмотрим на них консоль. Лог прайс задумался об одном объекте другое было так про докторов в консоль при клике откроем консоль обновить страничку кликаем по кнопке купить. Турлатово и собственно ничего не происходит нам нужно ещё ретурн Cold — это у нас ссылка — это чтобы отменить переход по ней отменить поведение рассылки мы делаем Return false так ещё раз второй товар у нас что-то ничего не происходит. Наверное мы не подключили скрипт. Да — это так сердце. Значит у нас папка GS. Евгений File managers попробуем ещё раз так. Попытка номер три и вот теперь всё получилось а. Цена товара 110. Товар номер 2. Давайте каждый товар 140. Товар номер пять, а супер, а теперь нам они просто нужно получить значение. А ещё и добавить их в форму модального окна. Значит у нас есть — это самое модальное окно, а у него есть поля в форме поля в форме которая соответственно вот последние два поля они нас интересует. У них есть которые продают iprice. А вот мы по этим идентификатор обратимся и значениями поставим соответствующие переменная у нас — это Price & product значит. Обращаемся к элементам сыт.

0 комментариев
0

Читайте также