- [Instructor] So I want to show you how to create menu items
that have command keys associate with them.
To do that, I'm going to scroll down
in this background.js file
and look for my menu template.
And I want to add another sort of menu item.
So I'll copy this previous one.
And I'll put a comma here.
Paste this new one.
This one's going to be called shop.
And it's also going to have a submenu
that is going to have
another item here.
And I'll also give this a label of shop
because there's going to be two views in this application,
the shopping view and the checkout view.
So I want to have both of them.
We'll get rid of all these.
So label shop and we'll do the other one.
We don't need that comma.
And this will be my actually checkout view.
So shop and checkout.
When you're shopping, you're going to be in the shop view.
And this corresponds to the routes
in my view js application.
So in addition to the shop label,
we need to do an accelerator object here.
So accel-rate-or.
This is essentially the command keys.
And what we can do is specify different
command keys for Macs and PCs.
So the way we'll do that is we'll say,
we'll say process platform,.
We'll do a ternary statement which is,
that's just a way of writing and if-then statement
that goes in a single line.
So we'll if this happens to be a darwin machine,
which means a Mac,
that's the name of the,
what the operating system used to be called
for the Macs a long time ago.
So if this is darwin then we'll say,
command
shift
I.
Otherwise, it'll be
control
shift
I.
So these are pretty much normal English separated by pluses.
And then we'll put a comma here
and create an event or a track and event called click
and then in here we'll say,
take the window,
which is the object that we created earlier for the window.
And actually, this was actually generated
for us by our process.
And then
we can say webContents
and we'll use a send method to send an event,
we're going to call shop.
So this is one that I'll have to create myself.
So this will take care of the shop item.
Let's go ahead and copy this,
rest of the object here for checkout.
And so I'll make this command shift U on a Mac.
Control shift U here on a PC.
And then this will send an event of checkout.
All right?
So once you do that,
we can go ahead and save that
and all we need to do now is track
these shop and checkout events
in our application.
So I'm going to need to go to main js.
And if you remember from very early
in the first few chapters,
we tracked an object called ipcRenderer
when we were in the web view of our application.
So we're going to need to import this.
So we're going to need to import ipcRenderer
from the electron library.
So that'll give us the ability
of track events inside our application.
So now, all we need to do is
do something when the events take place.
So we can ipcRenderer on,
and here we can put in the two events that we created.
So we can say whenever the checkout event happens,
then pass along that event information if necessary.
You don't really need to pass the event if you don't use it.
But if you do need the event information
to do something with, you could do this.
And then we can issue a command.
And this command can be anything
but because we're using routes
in our view js application,
we can use a command that modifies the route.
And we've got two routes.
The default and then this route called checkout.
So what I can do here is say router push
and then checkout.
Cool.
So now we need to do the other event.
So whenever the other event and that event is called shop.
And it's just going to send things to the,
sort of default route which is the slash.
So the routes are pretty much like URLs on a website.
The slash is just the main sort of part of the website.
So let's go ahead and save that.
And let's try running our application now
and do
an electron serve command here.
All right, our application will run
and you should see the shop menu with the two items.
The command keys are going to appear up here as well
and let's go ahead and add some stuff here
and then if we go to the checkout route,
we should be switching over to the checkout route.
I know we can get to it with the interface
but it's sort of time to be able to go
to them in a menu and it shows you
how you can communicate between
the menus and the application itself.