Download "UI-компоненты №4. Отправка корзины на почту"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: UI-компоненты №18. Мобильное меню с определением секции Next video: UI-компоненты №13. Валидация и отправка формы на почту в 2022

0:00

Вступление

0:50

Создаем модальное окно (html, css)

25:35

Вставляем товары в модальное окно (js)

37:00

Обработка товаров и их запись в форму для отправки

46:11

Заключение

UI-компоненты №13. Валидация и отправка формы на почту в 2022

UI-компоненты №13. Валидация и отправка формы на почту в 2022

Channel: MaxGraph - cайты как страсть

UI-компоненты №18. Мобильное меню с определением секции

UI-компоненты №18. Мобильное меню с определением секции

Channel: MaxGraph - cайты как страсть

Верстка многостраничного сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Верстка шапки

Верстка многостраничного сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Верстка шапки

Channel: MaxGraph - cайты как страсть

Верстаю сайт, используя фишки своей Gulp-сборки

Верстаю сайт, используя фишки своей Gulp-сборки

Channel: MaxGraph - cайты как страсть

$UI-компоненты №10. Степпер с вводом количества и кнопками увеличения\уменьшения$

UI-компоненты №10. Степпер с вводом количества и кнопками увеличения\уменьшения

Channel: MaxGraph - cайты как страсть

UI-компоненты №16. Бесконечно движущийся блок (ticker slider) на чистом CSS

UI-компоненты №16. Бесконечно движущийся блок (ticker slider) на чистом CSS

Channel: MaxGraph - cайты как страсть

UI-компоненты №6. Сохранение корзины в localStorage

UI-компоненты №6. Сохранение корзины в localStorage

Channel: MaxGraph - cайты как страсть

UI-компоненты №17. Создание карточек с прижатием кнопки внизу

UI-компоненты №17. Создание карточек с прижатием кнопки внизу

Channel: MaxGraph - cайты как страсть

верстка

верстка сайта

верстка сайта с нуля

верстка с нуля

адаптивная верстка

html

html css

уроки html

верстка лендинга

верстка сайтов уроки

css

js

maxgraph

ui-компоненты

карточка товара

карточка товара html css

готовые решения html css

карточки сетка css

корзина товаров на javascript

корзина товаров js

js корзина товаров

корзина товаров на чистом js

ityoutubersru

ui_компоненты

00:00:02

[music]

00:00:05

hello everyone, we are on the site channel as a

00:00:07

passion, my name is Maxim and we

00:00:09

continue our work with the components,

00:00:11

this video needs to complete what we

00:00:14

did already in the previous video, namely,

00:00:16

we made a basket,

00:00:17

we need to complete and send

00:00:19

this thing to the server, well, more precisely to email,

00:00:22

let's do this, so first you

00:00:25

need to create the modal window itself, the

00:00:26

designer, and thank God we have

00:00:29

such a window, we need to first

00:00:31

create it ourselves, then transfer the

00:00:33

data here and send it to this thing to

00:00:37

make a medal window, I will

00:00:38

literally use my own plugin water

00:00:40

wrote about them and I’ll tell you about it

00:00:42

probably somewhere on Wednesday, that is, we

00:00:45

’ll make it from scratch, I’ll show you how it works,

00:00:47

how I made it, we’ll make you 0, and

00:00:50

now we’ll just use it,

00:00:51

actually, I’ve already created a folder lips fashion

00:00:55

and here I connected 2 css mlg files with

00:00:57

let's now connect

00:00:58

index.htm and we will work with them

00:01:02

accordingly, we make a link, which means we are

00:01:06

looking here for lips,

00:01:08

looking for a module, looking for a css module, but I can’t

00:01:11

hear it, I need this path, you can

00:01:13

copy it, in principle, it will be useful at the

00:01:17

very bottom here so let

00:01:21

's make a taxi script after the simple bar and

00:01:25

connect it here

00:01:26

[music]

00:01:28

g.s. Let's save and check so we have

00:01:31

some kind of mistake chewing gum because

00:01:34

the plugin does not yet take into account something that cannot be

00:01:36

with the rector of that as well

00:01:40

because in the files itself about meetings we have

00:01:41

a call for us, we don’t need it, I’ll completely delete

00:01:44

this call for us here we need nowhere

00:01:48

so the error occurs but there will be no error

00:01:50

when we call y correctly

00:01:51

so we go to also s and right here

00:01:54

we will call point here the diameter of the minamoto

00:01:57

microphone and here we will have such a

00:02:00

mondo.

00:02:01

I definitely need for a button that

00:02:04

will open a modal window, of

00:02:06

course, pass the necessary parameters,

00:02:07

namely here we go to the cart, here’s a

00:02:10

button that’s

00:02:12

made of something and I won’t give it to you, it’s

00:02:15

strange, but we’ll do anything with a button, a button

00:02:21

that will have an attribute means data of

00:02:26

pov

00:02:28

yes we will have it, well, let's

00:02:31

just do my ld, then there will be a date graph they mishin

00:02:35

I have a couple of animations made there,

00:02:39

let's make faith in about the

00:02:43

animation and the third parameter is the date rub

00:02:47

speed is the speed that will

00:02:50

appear to well, let's set it to 700,

00:02:52

so for clarity,

00:02:53

we save it errors disappear in college, we

00:02:56

also save errors, it means there is something

00:02:58

somewhere I’m not learning,

00:03:00

let’s look at nothing, that there is no

00:03:05

marking of the winder itself, well, nothing, we’ll

00:03:06

add it, it’s

00:03:07

not a problem to add it, I

00:03:10

’ll go to the file now and I have the winders stored

00:03:13

and here’s the cedric I’ll copy and paste everyone,

00:03:17

it means that we have content, let’s

00:03:19

insert ours after the content,

00:03:20

how it all works, there’s no point in telling too much,

00:03:23

so I won’t, I’ll

00:03:26

show it all in the video, actually when we

00:03:28

create this plugin from scratch,

00:03:30

when we work it all here

00:03:32

we need to become a module to connect

00:03:35

this code with the plugin, so to speak, because

00:03:40

it looks specifically for the date graph, something like the same

00:03:42

one that is written at the

00:03:44

button pad 10 module module must

00:03:47

match

00:03:48

roll dialogue here everything is correct

00:03:51

moodlecloud yes yes yes everything so that it shouldn’t be,

00:03:55

yes, well, and now, in theory, if we click, we will

00:03:57

have a mandal point for everything

00:04:00

works fine, everything is great, that is, just like that, it’s

00:04:03

easy and simple, 700 fillings are

00:04:07

too much, let’s put put

00:04:09

the dough they want from and there by default,

00:04:11

so we can take or make it

00:04:16

300 by default and so on, great,

00:04:20

well, we have a winder said

00:04:22

container, let's give it our own

00:04:23

class, let it be an order mod, exactly a

00:04:29

module, a voice module will not be the same

00:04:31

class, at least, in principle, you can also

00:04:33

set your own class here, whatever

00:04:35

you want, but here we

00:04:36

basically don’t have a close button, so we can delete it in 35 and

00:04:38

delete it before we can delete it,

00:04:42

but since the plugin hasn’t been completely

00:04:44

written yet, I’m not sure that it will adequately

00:04:47

respond to this information, but leave it

00:04:49

as it was, yes, before

00:04:51

writing it down, I’ll check everything in more

00:04:53

detail so far I haven’t had time to put the button well,

00:04:56

we’re removing it, we don’t need it

00:04:57

alderman persuaded the content let’s also

00:05:01

call it power module content means

00:05:06

in the content what we will have let’s already

00:05:07

type up we have a header

00:05:09

feeding the order more precisely we will have

00:05:11

God here let’s do it like an

00:05:14

order for water so that further h2 power module

00:05:20

will go through the ordering process and we will have,

00:05:26

well, let there be a pan

00:05:27

order for us, we will take this

00:05:35

order,

00:05:36

what number is here, it doesn’t matter, it’s just for

00:05:38

clarity, well into the distance, we will have a

00:05:41

panzer module in fog, probably information

00:05:48

and inside, essentially profit 3 well or the list

00:05:53

can be made the list is

00:05:54

redundant let's make 3 means the ember

00:05:58

module ends

00:06:03

in a race so he decided to bring

00:06:12

[music]

00:06:14

ok so the goods in the order

00:06:17

we make three pieces of pandas so that in this

00:06:20

pan then Georgia the text will be given further we will

00:06:23

also call it as under an all

00:06:27

in fight it's like this,

00:06:31

then we'll copy this god, we'll paste the

00:06:34

tip instead of there, we'll write the soup for next,

00:06:39

we'll have here the

00:06:40

total amount of the order and this is the amount,

00:06:47

and the third one here will be

00:06:53

more complicated because here it will be

00:06:54

he gave the composition involuntarily ready note

00:07:00

let's just do the product and the memory will be

00:07:02

given to it there will be a composition of the order

00:07:07

like this the star of the order is described and it

00:07:09

will have its own arrow with the help

00:07:11

everything is done perfectly the insides and

00:07:15

the order

00:07:16

let's do it a little later for now we'll leave it

00:07:18

so on we have the actual form of the

00:07:21

order it's forms yes and only it was

00:07:27

necessary to make the forms like this,

00:07:30

the action doesn’t matter,

00:07:32

well, here we have a form that three you had with

00:07:36

import and a button we will have a label for water,

00:07:39

let’s call this lake of forms separately a separate

00:07:43

entity, that’s what they call a label, or even

00:07:46

just proudly

00:07:47

try it like we have a greater gift no

00:07:51

corridor he's a block for us we don't need further on it there

00:07:58

will be no first there will be a spam

00:08:02

order the text

00:08:06

will be given your name and we will have them

00:08:09

the way first the tempo the text to you there is

00:08:13

no cold and the class will be a blow input further label

00:08:18

on copy twice

00:08:20

paste write the whole number the phone

00:08:24

here will be like this, the body of the class gift input

00:08:29

remains, but a placeholder is also added, so

00:08:31

we insert this one, and

00:08:37

here it’s the same thing, in essence, yes, here we

00:08:38

will have to dedicate the phone number to him; the phone number is not

00:08:42

needed here, but these are just such little things by

00:08:44

exhale e-mail later mail. com place for

00:08:49

is excellent and the button loaf order betin

00:08:56

stains and will place the order is excellent,

00:09:02

let's now open our Christmas tree and

00:09:04

see what's wrong with it and this is what it looks like,

00:09:07

but in principle it also looks normal ok let

00:09:10

's move on, we have

00:09:14

the sizes and the jackdaws are defined, let's do it

00:09:17

we'll take them all, it's called cancer order

00:09:21

manul,

00:09:22

so we go to style.css

00:09:25

and then here we write the order directly with water,

00:09:33

insert the dimensions,

00:09:35

let's put minho from so that it's

00:09:39

adequate, let's see our motal skin

00:09:41

has changed already well, excellent,

00:09:44

next, we need to make an order fashion top,

00:09:49

this will be childhood flex

00:09:51

let's focus on this if the content is

00:09:55

between along the edges to scatter here

00:09:57

we need panels of 40 and on top of the same 40 before

00:10:00

here we do 40 each, let's not

00:10:03

bother too much here with if the traffic there is

00:10:05

polishing 40 pixels excellent indentation

00:10:10

we have everything lined up as it should now

00:10:12

let's stylize

00:10:13

these elements specifically, let's

00:10:14

take where

00:10:16

for the header the note Samsun the rest by

00:10:22

default it's yours 600 let it be where

00:10:26

we remember that we still have it connected in

00:10:27

globally 400 600 is fine everything is fine

00:10:31

then he inserted I need it here and here

00:10:34

everything else we need 5 d d 71 d.d.

00:10:37

don’t we have variables somewhere, let’s

00:10:40

remember there is a color accent,

00:10:43

respectively, work fist accent,

00:10:48

we are saved,

00:10:49

that’s great, the authorities have appeared, our blog

00:10:52

is great, and here we actually

00:10:55

need to stylize the order, we take all the

00:10:59

text and we will have an order here water I don’t

00:11:04

remember what we take take notes on the

00:11:10

white fund remains for us, let's put 400 here,

00:11:13

we don't need it, we don't need it, we don't need it, we don't need

00:11:17

8080, we have it like color life, so

00:11:24

thief cover light, great, good, let's

00:11:31

move on, so I need it, so everything is here, everything is

00:11:36

good, let's move on to the speed info, well

00:11:39

this is a block with a cheerful one, let's find where

00:11:43

we have it, here we have a bider, you can have a radius,

00:11:47

everything is in place, so it's normal

00:11:51

infant, we'll actually have one like this, let's go with the

00:11:53

little ones cheerfully,

00:12:00

it's good, the indentation will be about

00:12:02

40 pixels

00:12:03

for the title, we can make it 40 for the New Year

00:12:08

great, now for the money here 3440

00:12:12

and 34 great, that means we just do

00:12:16

fading three four pixels 40 pixels

00:12:19

everything is there, there is

00:12:21

an approach, well, now

00:12:24

we need to set the style data too, we also need to set the collected ones, in

00:12:26

principle, we can set them right here on the

00:12:30

bells and we’ll take it from yours, we’ll write 400

00:12:36

everything else we don’t need to talk about it, let’s

00:12:39

see it looks adequate now

00:12:41

let’s turn to the spa, why because

00:12:46

we have here with the pandas let’s turn to them

00:12:47

and do essentially the same thing here,

00:12:49

just fund 600 and there everything is great,

00:12:55

everything is excellent on the sides, that is, we give

00:12:57

this we will get the icon from the layout,

00:13:01

now we will go to the folder, we found it, so

00:13:06

we have 4 of it,

00:13:13

so we need to find our element, its

00:13:16

class here

00:13:18

gave an order to the products module, or rather,

00:13:21

not even like that, change everything to the singer a little,

00:13:23

we will do it like this, we will do it here bottom

00:13:30

tube and what -something, for example, this and

00:13:35

this, the composition will be punished, why so

00:13:38

because the content will be stored in the museum,

00:13:39

we need to divide the button from

00:13:40

the content, we did this and repaired the windows,

00:13:43

in fact, about well or not about it,

00:13:52

just betain, let’s do it, and

00:13:56

accordingly it will be here too we have

00:13:59

Belkin

00:14:00

let's see what it looks like

00:14:02

now so we open about this it

00:14:06

looks like this of course it doesn't look like this it's necessary well

00:14:08

wow ground cover transparent

00:14:12

lider and it already looks better good the

00:14:17

pointer cursor exists when the

00:14:22

page is loaded it doesn't matter it's just written here

00:14:25

you're driving on without anything but this needs

00:14:27

to be corrected, of course, it’s the little things in life and

00:14:30

so the composition of the order, we see that it’s still worth the money

00:14:34

when it’s the default

00:14:36

and yes it is style, we’ll take the same

00:14:39

absolutely as here we have it set

00:14:44

perfectly well, and we’ll

00:14:47

probably do it with arrows for the wives using

00:14:48

pseudo-elements

00:14:50

position and exit phase we will make of the

00:14:54

content empty position absolute right 0 so

00:14:59

0 and size 7 by 7 you are 77 migrants g 1

00:15:07

if Jim and round the position of the center of

00:15:11

the Russian

00:15:12

we stretch, likes it not to be

00:15:14

repeated perfectly, it appeared

00:15:16

a little in the wrong place but not in sight

00:15:18

let's do here minus 20 pixels, perhaps, and

00:15:21

here we'll give everyone a percent and

00:15:23

transform translate x minus 55 y, or rather

00:15:28

inter percent, now it's in the center 20

00:15:31

too much to give, let's put 10 on the circle,

00:15:33

but it looks adequate, in

00:15:35

fact, now we need to finish the form,

00:15:38

let's do it, there's a

00:15:41

certain panini too It’s difficult to

00:15:44

actually count them, well, let’s take

00:15:48

into account

00:15:49

432 minus 512, that is, up to 12 minus 432,

00:15:54

that’s 80, that means 40 each, tell the sides,

00:15:57

okay, great, that means we now have a

00:16:01

pam-pam-pam order there, this block

00:16:05

padding 8 pixels from the info we are now let's

00:16:10

step back and write here morjim then

00:16:13

20 to everything is good excellent well and now

00:16:19

on the shloka we'll take the style for this we

00:16:25

will have a review of my bard fish in style

00:16:32

we'll write these 500 thousand remains

00:16:36

here the rest everything is fine but the ecologist

00:16:38

light will come in handy again for us personally

00:16:42

next we put here is

00:16:43

the display flexo war this with the center

00:16:45

and jessica chastain because we need to

00:16:48

stretch it along the edges we did it zara

00:16:50

tyurin put the queen how to take

00:16:55

all these sizes in the input we put it we don’t

00:17:00

need it but the size and color also

00:17:02

need gays easier what do we need in general we

00:17:05

need we need we need to make a blogger

00:17:09

we obviously

00:17:12

have a dark color but the

00:17:14

placeholder needs to name its own color

00:17:15

so we will do it like this

00:17:18

so

00:17:20

the order input placeholder we will have

00:17:24

color like this like this yes everything is great

00:17:32

everything like We need something, we have different sizes,

00:17:34

as if the Ents had a pipe, let’s give them a pipe,

00:17:38

so first of all, here on the link we have f14

00:17:41

lowers 14, let’s also put in 14.

00:17:46

so that everything is beautiful and even, but for some reason they are

00:17:48

different in size, it seems to me

00:17:51

that something is strange here 237 it is

00:17:55

possible that the phone number is here,

00:17:57

why doesn’t it fit, something we will

00:17:59

do wrong, apparently we made 8

00:18:02

pixels yes here on node40 yes yes yes,

00:18:08

now everything is fine, everything fits here,

00:18:09

well, step down here, 14 pixels

00:18:13

from each [ __ ],

00:18:15

he’ll give another one, let’s just put it

00:18:18

in this 14, we already have this button

00:18:22

in place, in principle, it already

00:18:24

looks adequate, the only thing is that there’s

00:18:25

something here - then with the dimensions it’s still a little

00:18:27

different, especially with us, the fact that we haven’t completed

00:18:30

the infowatch is accepted with us, and the info has

00:18:33

a height of about one hundred and fifty-four,

00:18:34

our viburnum height is much smaller now

00:18:38

it’s up to 127,

00:18:39

here you need to indent and between the order

00:18:42

manul in fighting

00:18:47

chords fashion info iphone let's do this

00:18:50

and we need 15 pixels of padding here.

00:18:56

to put, say, y at 15, it is advisable

00:19:00

to do the cunnilingus of the last element, well,

00:19:06

now it looks much more adequate and

00:19:08

looks great on the leg, well, what have we

00:19:10

done and now we need to make our

00:19:12

product and of course here it is, the

00:19:18

same picture, also the title, also the price and

00:19:21

we have a delete button

00:19:23

great let's go bomber manul leaf

00:19:30

later is the

00:19:31

order water and this and inside there will be

00:19:35

an article Olga Goda from the seller further

00:19:43

cooking requires em g am g let's

00:19:48

take the same macbook then we will have a

00:19:54

review of mods the

00:19:56

text is very similar to the block but what was in the

00:20:00

card next there will be a h3

00:20:02

review of mods with this concept I'm sorry

00:20:06

titles of

00:20:08

course the title is given here next

00:20:13

we will have a spider price list very simple centuries

00:20:18

in fact well that is, as you can see

00:20:20

everything we do everything very simply

00:20:22

the only thing very simple walter knoll

00:20:25

david and here we will delete

00:20:29

written that is, and because the temple, in

00:20:33

principle, is very simple, the overall theme is

00:20:36

very simple, so you see that

00:20:38

we, in principle, are not lazy and do everything

00:20:39

clearly excellent excellent excellent excellent

00:20:42

so it means that we still need but now to

00:20:45

stylize this thing with

00:20:47

burgundy oil products let's take it and let's

00:20:52

write games below here in Lego style

00:20:55

if I'm flexo war this is the center and space

00:20:59

between

00:21:00

about the center is uncertain let's

00:21:03

leave it like that for now okay everything has become a pipe and the

00:21:06

dimensions here are 60 on the 6th jack we'll take it

00:21:11

for the image and set it here from or maxat

00:21:18

pixels

00:21:19

maxx race with cover of loren great

00:21:27

now aidar monologue he gave the title

00:21:35

so good let's go and we already have one

00:21:37

title it turns out so he made

00:21:41

steely dan she's good then we'll hit the

00:21:44

product from the paint the problem that

00:21:47

happens if the class is wrong to know here

00:21:50

it is on the face now it was like to give him

00:21:51

four, I sold a little of our styles through Ford,

00:21:56

let's go and then it will be convenient, it will be

00:21:59

about the birth of the product further from it,

00:22:03

in fact, all other styles will be insulated, that's

00:22:07

great, well, yes, this is what happens

00:22:11

if the style is initially set incorrectly,

00:22:13

more precisely classes, so here you are 400

00:22:17

we don’t need this here too here we have

00:22:21

color dark excellent further it is in drams

00:22:26

product price

00:22:29

we take the data Steven here we already have a

00:22:32

robot so we need to set the robot

00:22:36

accordingly robot sans-serif

00:22:39

be sure to indicate here let’s put 700

00:22:42

pixels I almost didn’t put it and here again

00:22:45

color dark great save let's see

00:22:50

what we have there for a second oh so it

00:22:54

turns out everything is very good in principle

00:22:57

yes everything is good here it's as if the

00:22:59

size has become smaller

00:23:01

pum-pum-pum not everything is expected from us everything is ok

00:23:04

so now here's what let's do from the

00:23:06

picture before this text here we have 10

00:23:09

pixels, respectively, I'm always here

00:23:12

we will have a lot to eat without great here

00:23:16

we have 4 let's make five for good

00:23:18

measure we can sing well and now

00:23:23

Aidar Rod David means ground and

00:23:31

border and it will grow and delete it needs to be

00:23:37

put

00:23:38

done correctness or put in

00:23:40

place okay, we take the style, insert it,

00:23:44

let's do it through a piece of pony

00:23:46

right away, but we don't need that here, let's put 400 here,

00:23:51

it's also not necessary, it's not necessary, it's not necessary, and

00:23:53

we'll put it here like this, then we'll change it to

00:23:57

light, great, what else should we take into account here? as

00:24:05

part of the sequence, in principle, you can

00:24:07

leave

00:24:08

plus or minus and so on, but you can just make the text

00:24:11

I’ll make myself under the product Marjorie’s text is

00:24:16

also 10 pixels so that, just in case, the

00:24:18

indentation is definitely a little different from the

00:24:20

layouts, but we know for sure that there is

00:24:21

access, delete it, perhaps put it in place

00:24:24

it doesn’t interfere with it, well, stop here at

00:24:26

the top we need some 20 pixels, this is

00:24:28

what we will most likely have for this

00:24:32

list, water tore the sheet along in top 20 on

00:24:39

it the top 20 we’ll put it so that it’s

00:24:41

smooth and beautiful,

00:24:42

excellent, but also for everyone so there is also a

00:24:45

maxim then 14, respectively, Adam

00:24:53

will have us, let’s make him the

00:24:57

last one then just like that, great, but

00:25:06

now we can add and they will

00:25:08

look adequate for us, let’s

00:25:11

check it all just in case and give it like

00:25:14

this, our winder when

00:25:17

the goods are filled, here but initially we will make our

00:25:20

master module sheet hidden, in fact, the

00:25:25

order mod

00:25:26

eats the discriminant will be at risk

00:25:32

because we don’t need it, and now

00:25:35

in time we will write the barrels of the night, wait 10

00:25:39

minutes

00:25:40

const order water

00:25:45

[music]

00:25:47

mouth. so here we will find you would think

00:25:53

document curie selector that's great

00:25:59

we did it now we need to

00:26:01

write a handler for it a

00:26:02

very simple handler let's write this is

00:26:07

the value of the click and here we will write

00:26:13

some things what exactly we need

00:26:16

first we need 3 minus x not yes there is also

00:26:19

const order christ let's take it

00:26:25

and show it here, we'll make a

00:26:29

select document here, look like this,

00:26:35

we'll make a variable for this, let's let

00:26:37

the flag be equal to zero,

00:26:39

so it will be easiest if the flag is

00:26:42

correct, is what we're doing and the

00:26:45

modal order to the sheet

00:26:47

set the display

00:26:53

block, let's do this and at the same time, the flag is equal

00:26:59

to initiate, otherwise we will have the

00:27:02

opposite action in fact,

00:27:05

we will be standing here, we will set 0, thus when

00:27:08

we get here it will become 0 again and that

00:27:10

means it will get here again, then here, and

00:27:13

so on, that is, it will simply spin

00:27:14

back and forth we need this block and that’s actually what

00:27:18

it’s accumulating, but in fact,

00:27:21

having your own blog won’t work here,

00:27:22

let’s make a class a class sheet of

00:27:25

experience and here we’ll make a groove, why is it a

00:27:31

class because we still need to

00:27:33

turn our arrow to rotate it,

00:27:35

but actually the class

00:27:38

so now we’ll find by throat bt let's

00:27:44

write here daddy or rather not even like that

00:27:48

no now with fire yes I

00:27:51

thought wrong okay now let's go here

00:27:54

transform and add here eid 180

00:27:59

degree yes I did it wrong actually

00:28:01

now we'll correct it means here

00:28:05

we'll correct it back to the display but to the

00:28:08

pond itself we will be new really

00:28:11

class sheet this is about them are we in

00:28:19

this accordingly now everything

00:28:21

should work adequately for you

00:28:24

let's check this matter we'll add

00:28:27

open it and what's the point we don't have an

00:28:29

author but everything

00:28:33

is spinning but nothing is a problem

00:28:36

screw style, it’s easy, I just didn’t take it into account here,

00:28:40

everything turns for you only the arrow

00:28:42

is fine, and we also have goods,

00:28:45

what about the saw table, what to do when

00:28:46

opening the winder, filling the goods, what to

00:28:49

do in principle is not difficult and

00:28:52

sending them using the place an order button

00:28:55

is a little more difficult, but nevertheless, it also

00:28:58

means that it’s easy to go here, as we see,

00:29:00

my plugins have such things as from

00:29:02

windows and

00:29:03

from claus own is open, we can

00:29:06

calmly do some of the actions we need in order to

00:29:08

make products, what are we

00:29:12

doing to begin with, we’ll take we’ll take

00:29:15

what we'll take is, perhaps, generates products,

00:29:21

our function here generates mods products and let

00:29:28

's call it, it will receive absolutely the

00:29:30

same things that we received before, and

00:29:33

we'll take the extra one that

00:29:34

it adds, respectively, we put it here and insert

00:29:36

it here, that is, in

00:29:42

fact, it will be approximately the same as

00:29:44

and this date was a single one, it’s no longer particularly

00:29:47

needed here, probably, although although

00:29:51

probably it’s needed, we need it, we need date 1, and we

00:29:55

need it, so we’ll do it like this, we’ll do it like this, we’ll do it like this

00:29:59

next with the title

00:30:03

accordingly, we’ll also pass it on correctly,

00:30:06

and

00:30:08

we’ll make the price list here a norm in pairs, we’ve

00:30:11

already got the demand ready everything for this is excellent, we

00:30:14

delete it, we don’t need it anymore, and

00:30:18

so we have this function, what we

00:30:22

need to do by clicking on the button, we

00:30:23

need to look at the products that are

00:30:27

inside and get data from them, and

00:30:30

it’s possible for us to copy this data

00:30:32

to this function the functions won’t even be needed,

00:30:33

let’s see the endings, we’ll leave the experience, but

00:30:37

here we’ll be now, what to do, what to

00:30:40

do, what to do, we need to somehow

00:30:42

go through the simple bar content,

00:30:45

we even have this somewhere in the blocks,

00:30:47

at least simple tank content, so we

00:30:52

take it here we see now at the end of the

00:30:55

uk here we’ll write a miracle, so we’ll open it slightly

00:31:03

and the troubles we’ll see what’s

00:31:04

stored in our cart we need a second,

00:31:07

but the pages to attack the html collection element I do

00:31:10

n’t really remember, it’s steam and the

00:31:13

collection that allows you to do it, in my opinion it does

00:31:15

n’t allow you to work with an array as with an

00:31:18

array, yes, that’s why we won’t be able

00:31:20

to make a conditional for note, let’s do this

00:31:27

ray equals this, in

00:31:32

my opinion, we won’t be able to do this, I don’t

00:31:34

really remember, that means oh, there is of gray the

00:31:39

end of the protein, so most likely let’s

00:31:44

try for fun, no, that’s all it works

00:31:47

we can get the element everything is great

00:31:49

great we can get the element we

00:31:54

can now get it turns out not

00:31:55

only the element its internal data

00:31:57

yes but that’s where the date go and so on that

00:32:01

means it started okay let’s try it

00:32:03

means years

00:32:04

equals so puree card selector product

00:32:15

data set

00:32:17

ID but I believe that this all

00:32:20

works in principle, yes that everything

00:32:22

opens for us, it works, yes, great, we

00:32:25

get an ID, which means that we still

00:32:27

need we need to become here, that’s the

00:32:30

same, so puree

00:32:34

card selector product type of this content

00:32:41

further years means something with its appearance,

00:32:46

of course got pull at the end was to

00:32:49

get yes that's how it means in this g

00:32:54

equals

00:32:55

therefore Curie selector product m&g

00:33:03

somewhere tribute src well and the last one

00:33:09

we have is enterprise equals with which this

00:33:14

line is completely given and replaced with the

00:33:16

price list if they were not mistaken then everything was received

00:33:20

correctly and this means that we, in principle, can also call the

00:33:22

rhythm of a volley of sorts, who can call this, well,

00:33:25

what do we need to do for this we

00:33:27

need, we found it, we’ve already found it,

00:33:32

so let’s do it like this, what we

00:33:36

need next, we need to do it like this,

00:33:38

then we need to do it in circles

00:33:41

hdmi, copy it completely

00:33:44

I need and here you call does not

00:33:47

generate as a product Venus this module

00:33:51

so here we have the price for now let’s leave it as

00:33:54

it is I don’t know how it will work although it’s

00:33:56

priced and we can, in principle, take it

00:33:57

completely from here let’s take it and

00:34:03

don’t hear us change here the product

00:34:07

means how product, that is, in my opinion, we have a

00:34:11

class there, if I’m wrong, then the name is like that, a

00:34:17

sheet of mud, yes, everything seems to be ok,

00:34:19

let’s try the error parent grief,

00:34:24

the selector is not a function,

00:34:26

so what do we have here, but because you are

00:34:29

here parent, it’s instead of a field, then we need

00:34:31

it good once again clicked on the

00:34:36

order composition, we got a block perfectly, we

00:34:39

made the appearance of a xs 4 block, well, it’s clear

00:34:42

why there would be three for this, but

00:34:44

now we can do it like this, let me delete it

00:34:46

completely and we can

00:34:51

add it, let’s say we either have m3,

00:34:53

there are 3 elements, we’ll come cart and there

00:34:55

will also be three elements here, everything is great, we

00:34:57

’ve done it, we haven’t yet received these

00:34:59

numbers and the amount, but not the type, we’ll do it too, it’s

00:35:01

not a problem, it means what we

00:35:05

need to do to get them,

00:35:07

we need to get a fold price for it, we’ll

00:35:10

do it here full price anyway, we

00:35:19

have, in my opinion, a futa element here and we will

00:35:22

simply take its text content in

00:35:24

fact the text content and we need that we

00:35:28

need quantity so we are basically

00:35:31

here these are made of tanks

00:35:37

we have all found them now we need to insert them in the

00:35:39

correct place therefore now we

00:35:43

will find the transported this element, namely

00:35:46

Aidar Murloc cartoons,

00:35:48

perhaps we won’t put a variable

00:35:52

from not so important, but the client

00:35:54

book selector finish

00:36:00

be sure to span to the text content equals

00:36:04

here we use the template lines myth to put

00:36:07

our winx number and write the word 6 pieces

00:36:12

well, this is the same for us you need to do for the

00:36:16

actual price the total amount of the order selection they

00:36:19

say the amount here she gave the amount

00:36:23

pan and I don’t remember in what format you

00:36:27

will go we should receive it directly along with

00:36:29

the price so let’s leave it for now just full

00:36:31

thrones let’s check so 1 2 3 3

00:36:35

we have then break into this is

00:36:37

the amount, that is, this is the amount we press and the sum

00:36:40

is correct, there are also 3 of them here, and here too everything is

00:36:42

great, great why

00:36:44

this moment is highlighted because it is the first one we

00:36:45

focus and the plugin is so configured that it

00:36:47

searches for 1 we focus and the elements inside we

00:36:49

check daws and actually gives it focus is

00:36:53

very convenient, well, in my opinion, for now I

00:36:54

have it, it’s great; we’ll deal with the deletion for

00:36:59

later, although in principle it’s possible, and now

00:37:02

the deletion will be fun, so let’s say so

00:37:07

what, so what, so what remains is for us to

00:37:10

only process the v-shape and

00:37:12

these elements too somehow push it

00:37:14

into the form, let's do this, and

00:37:17

so let's start with these products

00:37:21

somehow write down somewhere, we need to know

00:37:24

the object in which all this stuff will be stored,

00:37:26

respectively, that we have the

00:37:30

object data, the dative is no longer a problem,

00:37:32

this is great We’ll probably even make a

00:37:34

so-called product here, and then we

00:37:45

’ll make it here based on the principle of products, we’ve

00:37:48

got enough here,

00:37:49

look what I want to do, I want

00:37:52

it turns out here, that’s when we

00:37:54

process into this array, in

00:37:56

fact, and receive all these elements

00:37:59

through an object, so what will we do?

00:38:02

let's make a train object here

00:38:06

and we'll make a general title equal to the length and

00:38:12

let's do this, although we don't need them,

00:38:14

so the society of this is equal to

00:38:15

the title about the price is equal to the price king and the

00:38:23

principle today, we've shoved

00:38:27

all these objects in now we need the product ray

00:38:30

push-up in theory Everything should be

00:38:35

correct, then we can here outside

00:38:38

our

00:38:40

for then display it, let's try

00:38:44

the console to the ground, the product will try to replace

00:38:51

2

00:38:52

T-Rex products, here they are, our two products in the array,

00:38:57

great, we even got an array and

00:38:59

actually this is what we needed to

00:39:01

do initially get an array, but what to do

00:39:05

next with this array, how to work with it,

00:39:06

but then you need to work at the summit,

00:39:09

I won’t connect any there, not a mask

00:39:13

phone, not any jazz Vali date

00:39:15

of plugins, all this was on the channel in

00:39:17

this, you know, now I just want to

00:39:19

send so I make the sending very

00:39:22

simple, we now take our

00:39:25

Algerd form, so the document dash selector

00:39:33

order with this screws to the summit and now

00:39:40

we will send this form right away,

00:39:44

we do it of course, and although there are brands in bulk, there is

00:39:48

no need no no need excellent

00:39:51

good first thing we will do we are

00:39:53

creating a form datur, this is an object in which

00:39:57

everything that will be

00:39:58

transferred to the form will be stored, the form on there is not a

00:40:00

fan, you know perfectly well why so, that is,

00:40:07

you say des in this boundary variable,

00:40:10

okay, what do we do next, we need to

00:40:12

place the product in our here in the date form

00:40:16

the format has an

00:40:18

append method and it accepts a string here

00:40:23

we will write the goods and we will transfer the

00:40:25

actual strictly from 3 we will be

00:40:27

formed using our array

00:40:29

but since we cannot simply

00:40:31

transfer an array we need to turn it all

00:40:34

into Jason format so we

00:40:36

do Jason thong fi and we’ll

00:40:41

convert it all into this format,

00:40:43

now we have the format stored in the product, they,

00:40:45

in principle, will be sent without any

00:40:47

problems, everything is fine, everything is as we need it, but we

00:40:51

almost need to put our phone number here,

00:40:58

e-mail, and so on, so we

00:41:00

’ll do three more here things in it are equally

00:41:03

sat down, let's somehow designate here to the

00:41:08

moon to him on Sapega should be an obvious

00:41:12

example but the name further but here will be an

00:41:17

example but the phone and us by email

00:41:26

smoke the selector so Yuri the selector means

00:41:33

that we will have it here let's do type

00:41:35

or not anyway, let's just

00:41:42

check this, check, well, yes, a big one for the

00:41:45

impulse will be

00:41:48

next, we will have the phone number here,

00:41:51

you will be the phone number and it will be mine, which

00:41:56

will be here and the email,

00:41:59

accordingly, next to the format, we need to

00:42:01

fill in these things about intimacy, name and

00:42:11

then we will copy all the same things,

00:42:14

respectively those there will be a body, there will be mail, there

00:42:19

will be no phone here, everything will be

00:42:24

quite standard for him, and

00:42:27

we need the loader itself now for

00:42:29

1 mail per form, yes, let's do it,

00:42:31

the loader will be simple

00:42:35

using the usual x5 m,

00:42:38

which means anyway new xml http request,

00:42:48

open it further at we will have a

00:42:51

handler here up to 1000 unregistered

00:42:55

shadow of what, but this function will

00:42:59

determine whether everything is good with us,

00:43:01

whether everything is sent to us,

00:43:03

so if the taxi is registered in register 4 and if

00:43:10

1000

00:43:11

status is equal to 200, then it means we

00:43:17

are sending everything in the morning, so we will write console.log

00:43:20

sent everything is fine then we will have

00:43:24

further we need our sacher to open

00:43:28

xr up on post request yes therefore here after

00:43:34

all we will need e hryvnia

00:43:35

default Serb mouth we will send it all to the

00:43:40

mail matches which we will add and personally

00:43:43

write the pipes Well, that’s all we need this is now

00:43:46

to send this charts and that is,

00:43:47

send a request send we need

00:43:49

the format we pass here and at the same time

00:43:52

saw that is, we can reset our form

00:43:56

suppressor something like this, well, in

00:44:00

theory this should work if we

00:44:02

did everything correctly, add mail.

00:44:05

this is how it works, let's try and

00:44:08

a few more things you need to know

00:44:09

before you actually send

00:44:11

this whole thing, you definitely need to indicate

00:44:14

here forms here date form selector

00:44:17

in this case this is the form that we have lv that is

00:44:19

here here it is here it

00:44:21

refers to this so here you can

00:44:23

add it, you need to be sure to pass it on, it won’t

00:44:25

work, well, everything will be decorated,

00:44:27

you can leave it, let it reset, and also

00:44:29

everything is fine, we are in the mail oven, we need

00:44:31

to make a few small

00:44:32

adjustments mail php, I took exactly the same one

00:44:35

as I had in one of the

00:44:37

videos about sending the forms,

00:44:38

in fact, but I changed it a little,

00:44:42

what was changed here, I added something like this

00:44:44

. Jason the text you see is in post

00:44:48

format and took the goods and with the help of

00:44:51

landing codes I converted it from

00:44:54

Jason back to regular text

00:44:56

then I took it created approximately prot

00:45:00

walked through the whole of this

00:45:02

array so he walked through it

00:45:04

wrote down all the elements and got them yes there are

00:45:07

some unnecessary things here, but in

00:45:11

fact it’s only necessary there, so it’s simple,

00:45:12

so it can be deleted like this, and so I

00:45:15

just wrote it down here in tft rka

00:45:17

and all this pickaxe, then it will be

00:45:19

used further now here in the

00:45:20

condition I wrote that I don’t want that I was

00:45:23

keeping track of the goods right here, right here, and

00:45:25

at the bottom where

00:45:27

the output occurs, I just added this

00:45:29

additional kind, so I added it here

00:45:32

in the end, when I saved it all, then I

00:45:35

uploaded it all, give it again, I’ll reboot

00:45:38

3, I’ll upload it to the hosting,

00:45:42

I’ve already done this already I checked everything is already

00:45:45

working and this is what I received in the end, this is some kind of

00:45:47

unsuccessful attempt, but here is a

00:45:51

successful attempt, that we have some

00:45:54

name, phone number, mail, and this is what we received

00:45:57

in excess, these fields are the ones that I

00:45:58

just deleted from the oven, here There

00:46:01

won’t be any extra ones, there won’t be only two. In the end, I realized that

00:46:03

we have another table built into the table,

00:46:05

like this, and in it,

00:46:07

essentially, there will be just the value of

00:46:10

these, that’s all, that’s how it works, and

00:46:12

it all comes to you at we

00:46:15

need mail on this, probably all that is

00:46:20

left for us from this layout is

00:46:23

this, this is the price we will

00:46:26

definitely make

00:46:27

and then we will look, most likely

00:46:28

we will work on atoms, we will work on some

00:46:31

other switches and so on

00:46:32

here, suggest options or go I’ll give you an overview of my

00:46:35

entire environment, I

00:46:37

hope we’ll do an analysis of my

00:46:40

plugin and understand whether it really works

00:46:43

or not, if it works, you can

00:46:45

use it and everything will be fine, so far, in

00:46:47

my opinion, everything seems to be fine, but

00:46:49

that’s all, good luck to everyone until the

00:46:52

next one video and bye

Description:

Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей. В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются. Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js. В этой части я сделаю отправку нашей корзины товаров на почту. Содержание: 00:00 - Вступление 00:50 - Создаем модальное окно (html, css) 25:35 - Вставляем товары в модальное окно (js) 37:00 - Обработка товаров и их запись в форму для отправки 46:11 - Заключение Увы, забыл сделать удаление товаров, простите :( https://github.com/maxdenaro/maxgraph-youtube-source/tree/master/UI-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B%20%E2%84%960.%20%D0%A1%D1%82%D0%B0%D1%80%D1%82%D0%BE%D0%B2%D1%8B%D0%B9%20%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD - стартовый шаблон для верстки https://www.figma.com/file/28GCW0PvfdyEAU2T39rjNc/ui-components?node-id=0%3A1 - макет в Figma https://github.com/maxdenaro/maxgraph-youtube-source/tree/master/UI-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B%20%E2%84%964.%20%D0%9A%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D0%B0%20%D1%82%D0%BE%D0%B2%D0%B0%D1%80%D0%BE%D0%B2%20%D0%BD%D0%B0%20%D1%87%D0%B8%D1%81%D1%82%D0%BE%D0%BC%20js%20-%20%D0%BE%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0 - готовая верстка на GitHub Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? https://www.youtube.com/channel/UCxJyCit95jsb-JLE3kXnq1Q?sub_confirmation=1 Моя страница вконтакте: http://vk.com/maxdenaro Мой блог: https://verstaem.online/blog/ Мой сайт: http://maxgraph.ru/ Канал в телеграм: https://teleg.run/maxgraph Чат для верстальщиков: https://teleg.run/maxgraph_chat

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "UI-компоненты №4. Отправка корзины на почту" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "UI-компоненты №4. Отправка корзины на почту" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "UI-компоненты №4. Отправка корзины на почту" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "UI-компоненты №4. Отправка корзины на почту" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "UI-компоненты №4. Отправка корзины на почту"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "UI-компоненты №4. Отправка корзины на почту"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.