Original subtitles

so

we'll be creating this um

ecommerce store

in this tutorial

a simple e-commerce site

created with knox and beautify

so

here we have this

carousel

scroll through some of the products that

are on sale

down here we just have one list of

products in a slider

a newsletter box and a photo and of

course you scroll to top thing

button

um click on a product and you carry it

to the details that i put up you can add

it to your cart

here this is the notification from sweet

alert

and then a number pops up on your cart

click it and you see the product here

you can increase or decrease the

quantity

continue to check

other details and then

complete your order

and of course after completing order

clear the cart

and you can shop again

there is this um theme select top here

allows you to switch between light and

dark theme

and if you click on this as a store icon

it takes you to

the products categories on the side

search bar

and then

of course clicking on our products take

it to the details you can add it to your

cart

alright so let's get cracking so head

over water vs code

and we create a new lock stop

with

npx

create

box up

and we're already in the folder all the

files so just use our dots

yes

let's proceed with this

package

let's just name it commerce

i'll be using javascript

npn

beautify as my ui framework i don't need

axios i need pwa

and i'll be using content

just to store the data for the site

um since we're not hooking up to

any server or

anything to get the data for our website

so

content so you press the space bar to

select that that's press enter

uh i already have the pretty extension

installed won't be using any linkedin

tools plus they're annoying so next

uh noticed in

single page because um we can actually

host this on netflix when we're done

static

netfly and it's recommended that you

select the js config

file here so

enter your github username

we'll be using get as a version control

system

let's go and now we have the next app

created um i'm just going to go ahead

and add some dependencies

i'll be adding nox types

um suite alert for the notification

nox web font loader to change the font

from roboto so let me just copy this and

paste it in the terminal

so we have nox types

this will help us with the types in nox

this is the ui um

package for sweetheart the material one

web phone loader of course to change the

fonts views which are to show the toasts

and pop-ups

so let's go with those

all right so once they're installed

what i like to do is to just configure

as much as i can in

the

noxconfig.js file here

so

usually just remove this

title template if i'm not

using

if i'm not worried about seo

um just call this free

commerce

you can add a description here

[Music]

the commerce website

it doesn't matter

uh

css

do i want any css in this app yeah let's

add

css files call it main

css

and just copy the path

and add it here

good i need to add a few modules to this

thing so let me see what modules do i

need

i need the

nox web for noda module

the

sweet alert module as well so let me

just

get those and add them here

so just press this in here

and there's no css um it's coming from

the documentation from view sweetheart

too if you want to use this in nox with

a different

theme

um you have to add this no css to the

end of the module name

uh

since we added the

material ui

theme for

sweet alerts we can just add that in the

css array as well

so let's just paste this here we need to

configure web phone loader um you can

check out the documentation for web

phone holder i just added to the

description

um but essentially you can use any um

the free fonts on google

so let me just put the configuration

for the font that i'll be using

in here i'll be using dm suns

actually i like this font i think it's

the font that um nox uses on their

official website i actually like it the

beautify object

if you visit this website

um

where you can find a documentation for

the beautiful module for nox they'll

actually show you how you can configure

different parts of the

the modules so the first thing i like to

add is tree shaking

and set that to true and then the

default assets in the default assets

object

you get to specify the font as well as a

default font size and i think this will

override the

font size that beautify set

the global font size so yeah let's let's

work with that

the next thing i like to change is my

feminine so i'll change this from dark

to light

of course these are the lights and i'll

be using

deep purple because i actually like

purple

um with the dark and one version

i'm going to actually add

a

custom color in this object

so i can use it throughout the

application

um for the light theme

the background color will be white

is that white

wait not too many f's one two three four

five six are good and i'm going to add a

surface color as well

so this color will be used for like um

elevated services like cards and

nav bars etc so let's go sir

i can't spell very good

and then let me just copy this down

create a dark variant

of course i'm going to use the same

primary color and for the background

color i'm gonna use this one

and for

the surface color for the dark

theme

oh i'm gonna use this one

uh that's it for the most part for

configuration let's just say this

if you would like you can actually add

configuration for the pwa

module here

all right so let's go to cleaning up

some of these files so we can close this

and then we go to components i won't be

using any of these components

so let me just

select all

uh

for the

layouts

i

will just remove the default layout

all right good

and i don't need this inspire page

i don't need this um

in my template so

let me just create a new template

see that empty for no

and let's configure the error page

all right so error page i don't like

this thing

because

this default error um page just shows

a text with a link in the top left

corner of the page i don't like that

so

let's let's let's let's update this

i want my error page to

look something like this just a page

with the text

nicely

formatted in the middle

um with error message

showing exactly what went wrong

so

we continue

probably give us a class

fill the heights

v-roll

and justify this raw center

all right

message

oops

something what's wrong

here

and then show the error message

and the error messages coming from this

error prop that's passed in whenever an

error is strongly knocks

so

error got message

uh let's style this thing a little

so

you want red

text

that works

and let's just create a button

that will redirect our user to the home

page so that's slash

um

capitalize the text here

good

now let's run our app and see what it

looks like

and camera on dev or yarn div if you're

using yarn

all right so we can go to localhost 3000

uh we should see our application

let's go

so open a new tab

localhost 3000 and here is our app

and it's displaying the index page of

course in our index page we had nothing

so it's showing nothing uh but if we

should go to a row that doesn't exist

just to show the error page

here we go

i guess we can make this button primary

column

primary color button

if we go back to here yep

so the messages this page could not be

found

all right that works for me so let's go

home

to our blog page

alright so

the app is up and running

we removed some of the defaults

configuration

what's next let's add some

data to our content folder all right so

nox content is this awesome module that

allows you to

store

data in this content folder and you can

actually call that data it act as a

server type of thing

so what we will do is we'll create a

products folder

and then i'll add our products.json

file inside this folder

so right click new file

and i already have some products here so

let me just add them in like i said

earlier the images are coming from pixel

um i have five products here

and just so we are familiar with the

properties you all have a unique id

name if they're on sale or not

the tags for the product image url

descriptions just some learn with some

text price sale price

and greetings

all right so we have five of these let's

save that

um we also want to create a character

corey's

folder

so let's just create a new file

wait i think this has been created in

products

it's a new file

okay

slash

and of course

let's just copy these

over

so each category

you have an id

a name and an image

and this is what we'll show on the

product

index page yeah

so when you go to search for a product

these categories will be on the left

so let's just save that save this

and close the error

and

let's just restart our server

getting some more in messages from or

console

something about the

json format let's see what's wrong with

just a follow-up letter as well just a

format

i think we just need to restart all

right

and let's just restart

all right no warnings all right let's

just jump back to the website

to see if we'll get anyone in there

oh no not in here let's just refresh all

right i think we're good

all right so since we have no warnings

let's

add or nav bar

to the application so

we just go to the components folder and

create a new file called nav

view

and in here

we'll just add or a bar

and give it a few props so the first one

i want to give it is the color prop

and

this will be the surface

color that we added to our

beautify configuration let's give it a

height of about 80

on the class

of l

this class i like to create

in or main.css file because i don't like

the

the default um elevation that comes with

the nav bar so

let's just give this box shadow

of

zero pixels for pixels

um

10

the radius of 10

and the color will be

zero

zero zero 0

0.08

this mean is important so that overrides

the

elevation from beautify um another class

that i'd like to add

is this call class this class called

pointer

um

it

just sets the curse of the pointer

for different paragraphs that i want to

add a click

um thing to so let's just save that

so l here

um

let's add the up prop and this basically

just

adds the

fix position fixed down to the

up bar and keeps it at the top of the

application

uh

another thing that i want to do

like that

is to add

um styling based on the break point of

our application so i have to bind the

style

and we'll pass it on object

and the cell that we want to adjust is

the padding

so we'll just say

we want

the pattern to be

x while we're

at this breakpoint so for me

i'm just going to say beautify

dot breakpoint

dot

md and up so we're going to check if the

break point is medium on up and if it is

we'll say that we want the part to be

zero

pixels top and bottom 100 pixels

left and right

if it's not medium or not then just

leave it blank

that's all this is saying

all right so we can close

the app bar tag

and let's just add this to

this component to our

um index file so let's copy the relative

part

go to index

and paste it here

and this will work without actually

doing

um import

blood on here

because of

the components

module that was added to nox recently um

once you set components to true in your

next config file it will automatically

import

your components so let's just save this

and see what's happening on

the website

so you can see here we have

a surface

color of

the dark surface color that we set

and

i think this is because let me just

close the demo up i think this is

because

we have the application set to dark so

let's just check back on that in vs code

so in default we have dark here i think

that can stay as dark i mean on nox

config

we have light set to true

the surface is oh oh oh okay so this

should actually be dark

not light

so once you update this

the up restarts

then we should see

that this thing is white refresh

and it's white and this is the elevation

that i like on my application

the next thing that we want to do is to

actually add

the background color for the application

when it's in dark and light mode

so to do that

we can just go to the layouts

folder where's the little swallow

and go to default and update

the styling here

so

we're just gonna add this um we're gonna

bind this style again pass in an object

and this time we'll pass in the

background

color

and for

css properties that are hyphenated you

have to use um

camera keys

when you're passing them in an object to

the to the style here once you're

binding it like this

so we're gonna check again

if we are using the light or dark mode

from beautify and then we'll

display

a background color based on that so

we're going to say here to find

dot

theme

so this will check if we're using the

dark theme

and if we're using the dark theme we

want to use this color if not

we're going to use white

so

let's just paste in our

color

the next thing i want to add is the

title for the website

and for that i'll use

a component from beautify

carvie toolbar title

and in this i'm just going to add the

word free e-commerce

and add some style to this

so i'm gonna add a class of text

md

h5

um what this md represents is medium and

up

it should be h5 and on the lowest um

medium on low or less than medium size

screen

um it should just use the default

text style for this i want the font to

it to be bored as well

and i'm going to add that pointer class

because when you click on this thing i

wanted to take you to the home page

notes other functionality we just call

the click

method on this

element

and we're going to call route saw dollar

sign router

and we're going to push

to

the

index page

so we can save that

and check to see if it's showing on or

browser

there it is and you can see the cursor

change to points here

so if you weren't on this page

and click on the free commerce

title here

it would take us to the homepage

back to vs code

so the next thing we want to add

are the actual buttons

so

i want some space between the title and

the buttons so just out of v spacer here

and then i'll add my icon bonds

and

we just want to add the icons so add the

icon

i'm gonna change the size of the icons

because by default i think they're 24.

so i'm just going to change them to 20

and then call the icon says mdi store

all the line

for the first icon

and then let's copy this down

and i want the cards icon x

after the card icon i want to divide

there

and this will be a vertical level

with some margin because i want some

space between the divider and the

buttons

all right so the class the class is

going to be

um

mx

for medium and up we wanted to be five

and for smaller screens we just want to

not so much space between them and then

now we're gonna add

the last one in or

up bar and this is just gonna

toggle the

um the theme

so we're gonna use this icon called

brightness

seven

all right so let's save it and see what

it looks like

and as you can see we have more icons

here not doing anything just yet

but they're working

let's just zoom in a little so you guys

can see what's happening

all right

now that we have the nav bar set up for

the most part i think we can create a

photo

so

let's just create our footer files

um

i'm just going to create a new component

called footsong.view

and in the photo

i'm just gonna

create a card

we want this card to be

tile this all right this will remove the

border radius

um he wants it to be flat this will

remove the elevation

um we want to give it a class

so on medium screen the pattern will be

10

on our own on smaller screens it will be

five

and what it takes to be in the center

and of course the color of this uh

footer card will be that surface column

i'll add it to the beautify object

so we're going to add

h2 tag

and

the name of our applications for

e-commerce

uh let's add a class to this h2 tag

so on medium screens

i want the text to be h6

and i want the font

to be born

i'm going to create some

social media links

so

just create a data

function down here

should return an object

and of course the sm links it's going to

be an array

of objects so it's going to be icon

and the icon that we want to display for

this um social media link so let's just

facebook

and then the actual link

which is just gonna be a hashtag for now

so we can save that and let's just copy

this down a few times so facebook on

twitter instagram and youtube

twitter

instagram

youtube

all right so up here we want to create

the uh buttons to go to different social

media pages so i'll just create a div

with a class of text center and this

will send to the buttons

and we're going to create a v button

with a v4 on it

and this v4 is just going to loop over

the

objects inside the social media array

that were created just a lot

so

just say button

i

in sm

and we have to add a key

i'm just going to give my key um

media

and index

that works

um

call out a

let's just use our surface color

and class

margin right by two

um we want this to be a fab button

and we don't want any elevation so we go

with the press

and inside the button we're just going

to render the icon

so we're going to use b

the icon

and save that

now if we add this component to our

page let's copy the path

to our index page and see what it looks

like

so save that and back to the browser

and there it is

now of course as we add content this

will be pushed on

i don't want it to be fixed down here

so i'll just leave it

like this for now

back to vs code

let's just

close these files

don't need this anymore i don't need

this for now

only this one all the way so long all

right

so now that we added the photo

let's um try getting the data from our

content folder inside or index page

so to do that

um i'll be using the created hook

inside is creating hook

i'll just be calling the information

from our content follow

um to do let's actually need

to

create different properties that can be

used

in the template so let's go products

this will be null initially

and

we want to sale

items

as well

so up here we're just going to say this

dot

products

is equal to this

content

and

the follow that we'll be searching for

the products in which is products

so products

and then we just want to get items

where

the on

sale

property is equal to true

then we call fetch

we want to do this

oh no this is for the actual sale item

so let's sell items and we want to do

something similar for

products

so

we're not going to use a where clause

for

our products we're just going to get all

of them so first thing like this

and once we hit save and hit box in

browser

we should be able to refresh and get the

data so let's just

go to our

view extension

here navigate to our index page

oh and it's actually returning a promise

so what we need to do is

we need to head back to vs code and

actually update our code

to wait on this thing to get resolved

before assigning it to the to the

data variables so wait

oh wait and of course in order to use a

within any function you need to make it

a synchronous

so once you hit save there go back to

chrome

refresh

we have our products

and we have our sale items

all right so now that we know that we're

getting body data we can actually start

rendering them on our

page

i'm going to create a carousel

to display the sale items

um

let me just create that component no

so it's

let's call it home

carousel

you

[Music]

all right so we'll create our v

carousel

and we're just going to give this uh

heights

400

view height

and we're going to hide the limited

background

now in the v car cell

it actually provides a slot for you to

override the default next and previous

button so we're going to override them

as well

just create a template

and the named slots

let's go previous

and let's pass an object here we'll

destructure the object that's passed

to us from the previous slot

and pass in

attributes

and on

so we want

to use a fab button for previous on next

buttons

so

let's just create a vbtn

fab

[Music]

let's make that depressed to take away

the elevation

and we will need to bind

the attributes as fast back

and the v on

should be this on

that's passed to us

um

for the icon for this button

we're going to use the

our left

so that's mdi

our row left button

and let's just change the size

20

and we're going to do something similar

for

for the next one

uh

let's do

next

and it should be right

all right good

so

now that we have

the

previous and next button overridden

let's add the carousel items

so we

can sell

item

and we're going to loop over the sale

items in this

recursion item component

and just display them

as a carousel item

so we need v4

and for each product

on index

in

sale

items

oh

it should be an underscore

and we're getting this squiggly line

because we need to pass in a key or

create a key

and the key will be sale item

i

index

yup that works

and then we can actually close this so

for each cell item that's passed in

it will render a carousel item

in this carousel

so let's accept the sale items prop

i hope it should be uncomfortable

and the prop type will be

an array

now what do we want to render here we

want to render an image so we're going

to use the image

the height is going to be 100 view

height

and the source is going to be

the image on this product

so let's pee that image

and inside this image we will have a

container

put a plaster fill height

and we're going to render a row

with

the dense crop and we're going to align

its center

now we only want one column

so we're going to render the

and for

medium and up

it's going to be

uh

seven it's going to take up seven of the

12

slots

inside this column i'm going to have a

div

and

this div is going to have our style

to change the background color so we're

going to put a white

uh background color behind vertex

i give it an opacity of it

and we will also want to add a class

to this div

um

we're going to add a padding on medium

screen down up of 10

and on smaller screens 5

it's going to have rounded corners

and the text is going to be

block

regardless of the theme

we're also going to send to the text

and

we want the text to be on the left

on larger screens

let's save that

of course we're not going to see

anything yet on our index page because

we have imported this uh component

so let's just add the product

information

so i want the h2 tag

with the class of texts medium

h3

and on smaller screens

page five

and this is going to be the name of our

product

then we want to show

the price

of the product

so

that's going to be

p

price

uh let's give this a class on

larger screens we want it to be

h5

and on

smaller screens we wanted to have

subtitle one

as the size

i want this to be our primary color as

well so use primary text and

so margin from the top

margin top five

next we want to add the product

description

so

let's add another p tag

p dot description

understanding on this

oh plus

x

medium

22

and a margin bottom of seven

all right lastly to this um we want to

add our button

and this button will be the press

to remove the elevation

uh

we'll have a color of primary

class of test capitalization

capitalize

and a minimum height

of 40.

and what will this button say this but

we'll just say check

it out

all right so let's save this and add it

to our index page so boom

boom

so let's add it below or now

and let's pass in the

sales

sale items

so buy and sell items to

sale items here

let's close this and see if it works

and it does

so

each cell item

is here

it's good

check it out button is here

and if you check the

the content file

in vs code

you'll see

that

only three products have

the on sale

parameter set to show this one

this one

and the watch

all right so now that we have our sale

items

being displayed

we can actually move on to

in the

slider that's on the home page um this

will display all our products

so let's just close this one

add some space below it

and that's all the container

uh

this container

will just uh have like a label

so in here you can check these out

uh let's give it a class let's give it a

class

of um

on medium screens i want the text to be

h4

and on smaller screens let's just leave

it at a6

add some space below this

and we want to create a component called

product sliders

so let me just create that no product

slider

and in this component we're just gonna

create um

we're just gonna use a v slide group

component to display all our products

so v

slide group

and the v slide group components accept

multiple v slide items

so we slide it

now we're going to

use a v4 on the v-slot item to iterate

over the products that will be passing

in so v4

and of course we have to give it a key

each item needs a key

we're just going to say hearts product

i

let's leave it up

uh of course we need to pass the prop

in so we're going to pass in this

products

and it's going to be an array

so here we need a card that will display

all our products

so

let's go

um

these cards will be links

um the color

surface

uh the width and let's see if there was

a 300

class um we're going to override the

elevation

that comes with the cards from beautify

and add our own

let's give it a marginal tool

margin bottom of five and a margin right

of five

now inside each card we will have

an image at the top

image will have a height of 300 and the

source

will be

the um

current products image url

current products image url yeah

so we can close this

uh

it's always good practice to have a

placeholder

while your image is being loaded um

beautify actually provides

this slot for images so you can just

create a template

and create placeholder slot

and

for placeholder i'm just gonna copy and

paste this uh

circular progress

um

bar in so it has a width of two

pixels a size of a hundred

uh the color of the primary and

indeterminate as a state so it will be

spinning spinning spinning

i'll save that

now

for

or car

title below the image we want to add the

name of the product

so we're gonna add the

title

of text title

i'm gonna pee down in

let's give you some styling

we want the price as well

so let's use our subtitle component for

that

uh let's make the price

text color or primary color

and having

bottom of three

and then let's add

the tags

that are associated with the products of

our text

we're gonna use chips to display

the different um

tags

so we're gonna iterate over the

different tags as the

tags i think they're they're in an array

yep

so let's iterate over them

v4

so we're going to say

t

i

n p

tags

of course there's a key

okay

i'm gonna use product

product id

followed by i

very unique

and let's just put t there

um we want this to be small extra small

we want them to have the label style i

want them to be outlined

uh let's just give them some

space

so

much right one

yeah that should be it

so now we can actually add this to our

homepage so let's copy the path

and add it right here

well of course we need to pass in the

prop

so we need the products

and it's going to be

the products i'm doing here

let's close this and save and see if it

works

and it does

so we have all our product cards down

here

good

all right so the next section that we

need to work on is the new data section

and of course that will be below

the slider here

so let's jump back to vs code and work

on that

so let's just create a new component

use little

yeah knows that there's just going to be

a card

um it'll be rounded

and let's just add some styling

and color

now in our newsletter card

we

just gonna have

heading of news that's all

and some ticks

subscribe

and let's see

this comes

this

i just add some style to our text

so this one

takes medium 283

and for this one

text medium is going to be h6

and some margin top

all right so we want a

text field so the user can enter their

email address

and a button to

actually subscribe if we are to hold

this up to a bucket

in the future so let's just use a

v-sheet

to do that

um set the color to be transparent

class

comics auto to center sheet

and the max width

max

weight

of 400.

alongside this we can add our text field

and let's just model this to

some data so

email is no

email

below this text field

we need a

button

so this button will be outlined as well

another minimum height of 50.

will be a black one

and it'll just say subscribe

now we want to call a function whenever

the user click on this um

subscribe button let's just call it

submit

and create the method down here

now in this

i'm just going to add a sweet alert

model

so you can call this dot

song

subtitle

thank

you

for subscribing

it's going to be success

uh

let me add some

configuration to this so we allow

outside click

i'm gonna set that to file so that user

can click outside to close the model

um

allow skp to false so they can't use

escape to close the model i'm gonna set

a timer of 400

so the model will show for four

seconds

um

and we're going to show the

timer progress bar so let's set that to

true

and our text um

let's just add this text here

so you'll be notified when we have a

deal or items on sale

and let's remove the confirmation button

as well

so we can save this

and um

that should be it for our all components

let's put it on our

home page just copy the relative path

put some space

between it and the slider

hit save

and let's go to chrome and see what's

happening

so you scroll down and here it is

we have one newsletter ariel and if you

click subscribe

you get this pop off

nice

alright so now that we have

the

newsletter components let's create this

scroll to top button

that should be down here

uh let's go back to vs code

and close this newsletter

and let's just create a new component

scroll

top

and this component is

somewhat simple

um it's just a button

um so let's probably be

cn

and we're gonna give it uh

the fix prop so that it stays

in the bottom

right hand corner of our screen at all

times

over right

bottom

all right now let's

make it a fab

uh give it a call of primary

um

we want to

also

some action whenever the page is

scrolled and

we're going to put the v scroll

directive from beautify on this one

so let's go v school

and the name of the function that we

want to call whenever the window is

scrolled is check scroll

we also want to

show this button based on how much of

our screen has been scrolled

so let's call this property show fab we

need to create this property

down here

but let's

let's close this off first

unput on an icon inside this

so we're gonna use the chevron

icon

save that

and set this to files initially

alright so for the method

um we should create this method

so

in this check scroll method we're just

gonna get the um

the window scroll y

value

and

perform some logic based on that so

let's call this h so we go to window

scroll y

now we want to check if

h is greater than 300

and if it is

we'll show the one

else

we will hide one

now this will actually show and hide the

button

once we scroll the window

what we want to do once the button is

visible is we want to be able to click

on it

and then we should be able to go back to

the top of the screen so we are the ad

click

and go up method

go up

and what this will do

it will call the

go to method from or beautify object

so

this

dollar sign ut5

dot go

to

and we pass in the duration

and we wanted to take one second

so if we add this to our home page then

we should see it appear once we scroll

down on the screen

so let's jump back to chrome

and refresh for good little

scroll down and it appears

and if you click

scrolls back up and disappears

all right good

um

you will notice that it's just jumping

on off the screen

but we wanted to actually transition in

and out so we're going to use another

component from beautify

it's called

fab transistor

so

v

type transition

let's just move this on

and if we go back to chrome

you see we have

a nicer looking transition taking place

all right so that's it for the most part

for the home screen

uh

next

we will uh create our products page

so let's jump back to vs code and

close this

and we want to create a page called

products

so products slash

index.view

and in this product page

we will have

our navigation bar at the top as well

so

let's just bring that in

and we can bring it in by just going

over here

and copying this now

and that should be it

so let's let's take a look to see if

that's actually a thing in chrome

so if we navigate to products

we have our number

if we click here

we go back to the home page

but we want to be able to click on a

button and not type in products in the

url so let's hook this button up to our

products page

so back in vs code

we will just go to

on off components

and for

or store button

just add the nox prop

on the two prop

and you want to go to products

hit save

go back to chrome

and when we hit this

it takes us to the product space nice

alright so on the products page we want

to add a few elements

let's

close this

and the first thing we want to add

is the

section to display our categories and

the search

input field so let's create a container

let's put a row

in this container

make it dense

now the

left side of the screen

we're just going to take up three

of the 12 spaces in the grid system

so

we column

and we want

or

column pick up three on medium on up

screens

and we're going to add a div

with the

text field

so we're gonna add an icon

to the text field which is the search

icon

this is going to be an outline text

field

it's going to be clear now as well

i'm going to give it a placeholder of

search

i want to save that and head back to

chrome

and go to the products page

you see this here

and it's clear

good

so hit boxes to vs code

and let's

add our

categories

so the list item shown our categories

will need the information from our

content follow um in order to get that

information we'll have to

get the data on in the created hook so

let's just copy this um from over our

index page

paste it here

no we don't want the sale items we want

categories

i want to say it is our categories

is equal

to the content

and then the chat equally folder

which is

this photo

and we're not using nowhere clause

we're just going to fetch everything

same thing for the products

now once we hit save

um and refresh our web page

we should

see the

categories

with a view dev tool

under here

categories

products

good

so now that we have the um the

categories and the products in our page

we

want to start rendering them

to render them we'll actually use uh

a list so below or

[Music]

text field

we'll just add a vlist

v

list

now we're going to add the subheader

prop because we're gonna add a subheader

in this list

and the color is going to be transparent

we also only want to show this list if

we are on medium sized screens on up

and to do that with beautify

you just say dollar sign beautify the

breakpoint

dot md and

up

and let's add or sub head up so v sub

header

and this will be categories

and then we're gonna add our list items

so like i said earlier we're just gonna

loop over

the

categories

so that's a v4

and then we're just gonna add

the image and the name of the category

to do this

so

vls

item avatar

just add the image

and it's going to be

c

image

let's close this

and for the list content

we're gonna add the title

and it's going to be c dot name

all right so let's save this and go back

to chrome and see what's happening

and there there

are categories with images

so

you can search for product

and

in a real world application you will

you'll be able to click on these things

and it will filter

the products that um

are in the different categories

all right so back to vs code

and we now want to render our

products so

in this

column we can minimize this

and

next column

we're going to give this uh nine spaces

and then we're going to use a row

to display the different um products

so instead of putting the v4 on the

column within the row

i'm just going to use a template to

iterate over

the different products

and then inside the template we use the

column

and

the column on smaller screens gonna take

up all the space

and on larger screens just six

we need to assign a key

to the column as well

since it's

inside

an element with v4

let's just name this product

p the id

and we can use

i as well

so

inside this card

inside this column we're going to add a

card

and of course this is going to be a link

to the product details page later on

we're going to add a color of surface

and a class

of l

to

override the elevation

um margin of 2 all around

margin bottom

of 5 margin right

of 5.

and then we can close this card and

let's add the

the information that we want to display

about broken the card here

so we're going to add the image

and bind the source to the products

image url

and give it a height of 300

and of course in this image we can add

the

placeholder as well

so let's just copy this prop and paste

it in

below the image we want to add

our title

so i'm going to copy this and paste it

in as well

so it has a class of um

text body one on medium screens on up

and a fun way of bold and all screens

the price

of the product will below this in our

subtitle component

this card subtitle and we'll make the

text color primary um give it some

pattern bottom of three and just render

the price here

we also want to add the

tags

associated with the product

so we just put that in a vcard text

component and it's the same

chip

from our

product slider component

so we can save this

and check our chrome

to see

what's happening

and there we go

our products are in

and looking good

now we want to be able to search

here

to find different products

you can see no it's not working

so let's just add that functionality

so back in vs code we have to create a

filter

computed property that will filter the

actual um results as we search

so let's create a search property first

set it to null

and bind or

text field up here to this

property

so let's just search

and in our computer property

we're going to have a property called um

filtered

products

first we're going to check if

the

search term is null or empty

or

if there are no products

so for some strange reason we didn't

load any products

we're just gonna

return

this

products

or this empty array

now if we do have

um something in our search field and

something

in products

then we want to return

um

products based on the user search term

so we're going to say this.products

filter

uh let's just um declare these variables

locally to this function

so s is going to be the search term

so lowercase

and that's not working

the name is gonna be

the name of the product that's been

passed in this filter function

to lowercase as well

the price

is going to be the price of the product

to string

the string is written like this so

command t

and

for the sales price

uh also for sp

and it's going to be

p dot sale price

and we're going to check if this value

exists and if it does exist

um

we're gonna call the tostring method on

it

otherwise we're just gonna pass in an

empty string

and

the rating is gonna p

dot ratings

and from this filter function we just

want to return

n

which is a name

if it includes

s

or

if price

includes s

or

s price

includes s

or

if the rating

includes

s

so if we save this

we can now change the

products here

so filter products

i want to save that you can head back to

browser

and see if everything is working so

let's refresh this let's type in yep

beats

and if we type in like

yep

and if we clear this

it returns all the products

good

all right so now that we have the

products categories it's been filtered

we can add the footage to this page and

the scroll to top one

so let's jump back to vs code

and let's just

copy them from over here

[Music]

and paste them at the bottom of

this let's see what they look like

in chrome

all right good

so now we need to add the details page

for each product um we won't be adding

it for each product we're just gonna

navigate to

a url with a product id in it and then

you can get a product information based

on that uh url param so when you go to

product slash 1 or 151

it should load the product information

that corresponds with this product id

so let's jump back to bs code

and let's create this product page

so

we can

close these i think

and go to pages products

underscore dot view

let's go idle view

so let's go to div

and let's add a navigation bar

and then

let's call the product information based

on the

url parameter

of id for this product

so once this page is created

we want to call

the

um

we want to get the information from the

content folder

so

let's copy and paste this in and instead

of products let's just say product

and the product is going to be

this content products

dot where

the id

is

equal to the id that's passed in

via the road params um this id that's

passed in from param is actually a

string so we need to convert that's one

integer because the

um json file there are integers here

there are strings

so

let's just use parseint

and we're going to get this

router

the params

id

uh

it should

send back only one

um item but we can explicitly

tell the content module to limit it

to only one

and we want to fetch that information

this thing is going to return an array

so it will be best to store

the response in a variable

let's say counts

p

and then we can say the product is equal

to p

the first item in p

of course we need to create this product

variable

so

let's just put it there

and set it to null

all right so now if we should navigate

to this page

it should pull

the

product information

for the product with the id in the

params object

to navigate to this page to this page to

navigate to this page

um we need to add a

click function to the different

products so let's go to the products

title

and on this card

we can just add nox

to

and we want to go to products

the

product

id

and we want to add this

this piece of code

to hmm where did we want to add this to

the home carousels button as well so

here where it says checked out

we want to navigate to the product

um detail page as well

so let's add it there

and i think

that's it

let's jump back to chrome and see what's

happening

so let's go to the home page if i click

on this

oops

we have an error

so it cannot read properties of

undefined it's reading id

hmm what's causing this

let's jump back to vs code

and see what's causing this so from the

home

car cell c

we have p

p id

i think the issue is

here

yeah this is here so instead of um roto

it should actually be route

so this

downloads the id

so jump back to chrome and

refresh this page

and we have no error

and if we inspect

we should see the information for this

specific product

and it's here

so now we can actually render the

information

in the template

so let's jump back to this code

all right so in this code we want to

actually render the product on the

screen

so

this will be container

and we only want to show this if

the product is present

we're going to use a row

let's just justify the center

and then a column

on the smaller screens

11

for medium one up seven

so let's display the name of the product

so i'm going to say product

dot name

and let's just style this a little let's

put it in the center

change the size on medium screens

and make it bold

um

we're gonna add the rating so let's use

the written component from beautify

we're gonna make it read only

we're gonna unload half increments

so we can have four and a half stars

um we're gonna give it a little margin

from the bottom

we're gonna make the star colors yellow

dark and two so a darker shade of yellow

uh

a background color for empty stars

um we're gonna use gray

the value

uh this accepts the number as stars that

you want to be filled out and we're just

gonna use products.ratings

for this

let's change the size of the widget

itself

let's close this

all right after the rating we want to

add the

um tags

so let's just copy the

tags that we've been using

the same chips

and then we're going to render the image

so instead of

typing out the entire image

it's not much

let's just

copy and paste the image in

so it's going to have a width of 100

um

that elevation

around the corners and it's gonna take

up um 50 of the screen

we also want to render the description

of the product

and then

we want a bun that will allow us to add

this specific product to the cart so

let's create that one

so the minimum height of 45

minimum widths of 170

all it takes to be capitalized

i want it to have our primary color

and of course it's just going to say add

to cart

so let's save this and see what it looks

like in chrome

and this is what it look looks like uh

i don't know why these things are not

sent out but let's fix that

so in vs code

let's just um

jump back to the rating

and i'm going to wrap this thing in

active

with a class of

um center

and let's see with some margin

from the top

so we want the rating to be centered and

we want the chips to be centered

good

so now if we go back to our home screen

click on any of these things it should

take us to the details for this

page

the same should happen for these as well

yep

so from the card

yep

good uh now we want to add the

um footer and the scroll to top button

to this page so

let's jump back to vs code

and let's just copy it from our index

page

and put it here

oh you may want some space

new mods chrome and there we go

good

so now that we've

added the details page

we want to

add the

add to cart function to our

application um to accomplish this i'm

going to use uh ux

um so let's just jump back to vs code

and create or

um cart store in ux or cart folder in ux

um

so we'll right click create a new file

let's call it cart

state

js and the state in view x it should

export a default function

that returns

an object so let's just do that

and return

an object an english object

will be our cart

so initially our cart will just be

an empty

array

we'll also add some mutations

to this um store

so let's just create a new file called

mutations.js

and mutations

just export the default object

and the first

mutation that we want to add is a

mutation to

load the cart

mutations taking a state and payload

but for this one

we don't need a payload justice did

so we're going to get our cart from

local storage

let's just

try to get it here so it's going to be

local storage door gets item

and let's just name it um free cards

and we're going to check if free card

exists

so if

we have that value

then we want to set the

part in our state which is this thing

we want to set it to

the

car that we got from local storage

so jason parse

cart

now

to add an item to our card

we are going to have to pass in a pro so

let's call this function r2 card

and then

we want to check

if the item

is

so we're going to say let's item found

we equal to states

not find

and because the card is going to be an

array

we can use a find um

function

and this takes in

another function

that should return a value

so

this function will accept a parameter p

which represents a single product in the

cart and we're going to check if p

dot product

the id

is exactly equal

to the product that's been passed in

which is this

one's id

now if we do

not find it

so if the item is not found

then we're going to say stay

a cart

now push

and we're going to push on object we're

going to pass in the product

which is this one that's passing

and then we're going to

create a quantity field

and set it to one

if it does

exist

meaning the item that we search for

exists then we're just gonna increment

the quantity by one

all right now after we update the

card variable

over here in the state

we want to save the item to local

storage

so we're just going to update local

storage

so it's going to be local storage.set

item

and up here we call it free card

so i'm gonna set free cards

to the stringing five version of our

card

so suggestion not stringify

state dot cards

and of course

once the card is updated we want to

notify or use all to let them know that

hey

we updated your card successfully

so

we're going to use the um

sweet alert to do that

so we're going to set it to a toast

the texture is going to be

cut or muted

gonna use the success icon

uh

timer is gonna be four seconds

we are not going to show the confirm

button and we're not and we're going to

show the progress of the title

we also want to change the position

to top

end

and that's it for the art card function

uh once an item is in or cart we also

want

the ability to decrease the item code

to remove it

um remove a specific item um to increase

the item code until clear the cart

entirely

so let's add these functions

um the decrease

item count function

is going to take in

the index

of the item that we want to decrease

we're just going to say let's item equal

to state

dot cart

add the given index

and then we want to say if we can't find

this item

do nothing oh

and we're gonna check if the

items quantity is exactly equal to one

and if it is we're just gonna remove the

item from the cart entirely because we

don't want

um items in our cart with a quantity at

zero

so we're going to do state back cart

box splice

and we want to start removing the index

that was passing and want to take off

one item

else

if the quantity isn't one then we're

going to just

remove one from the count

and of course we have to update our um

user to know that a

card was updated

so

cart updated success message stop in

and of course we want to update

local storage again

so that's the decrease function

we want the ability to remove an item

from the card

so

let's add that function

remove cards item

state

index

and we just want to splice

the

card state on the given index so we will

state that card that splice

index remove one item and of course

update our user

and update local storage

so let's say i don't move

and then we want to be able to increase

the item code so let's go increase

our count

and let's check for the item

so the item is going to be

straight down the card

index

and then we just want to increase the

quantity so plus equal one

and of course update the user

on local storage

and lastly we need a function to clear

our cart

uh we won't be passing in anything here

we'll just like with the state

and state

dot

carts

is going to be equal to an empty array

then we want to remove the card key

from

local storage

so free card

is what we'll be removing

good

so now that we have these functions in

place

uh one more thing i want to do

is i want to create a plug-in

that will actually

load our car to whenever we start our

application or

navigate to anywhere in our application

to accomplish that we have to use um

a plugin

so let's create a plugins directory

plugins

plugins

and let's just name this cart

plugins card objects

in this plugin

we're going to export

a default function

and we're going to

take in the store

from the context

on also

we're going to use the inject function

uh

so unload

we just want to call

the

load card method from or mutations here

so we're just going to say store

comments

carts

and load

cart

so once we call this

um

it will actually assign

the card from our local storage to the

um card state

the next thing that i want to do is i

want to inject a function that will

actually format our prices

so

i'm going to inject

we're going to call this format

money

and this inject method takes in the name

of the function so the name that you

want to give it globally

and

then what should be return or what

should happen when this function is

called so it's going to accept

a param

it's called money

and i want to return

a new

um

international number formats

in the number format we have to pass in

the locale so i'm going to use in

us

and then

for

the

options i'm gonna use currency

such a tsd

and style

should be

currency

then we can call the format

method and pass in what we want to

format

good

now we want to add this plugin

to our config file so copy the relative

path

go here

and paste it in

that's it

let's restart in the servo

and let's check chrome to see if we have

any errors as soon as this

finishes

all right good

just refresh no errors so far

no error so far

all right

so

let's jump back to vs code

now let's close the terminal and we want

to use this

form of money

function

on the different places where we're

displaying the

price of the um products

so in components let's go to the

carousel we have it here

and how you use this is dollar sign the

name of the function

and the parameter which is going to be

the price

see if we should save that

let's go to

product slider

using the price here as well

and

let's go

to our

products page

showing the price here as well let's

remove this

final price

and i don't think this card is actually

redirecting nicely

so let's change this to

products slash

let's go back to chrome

check it out

yep

prices are being formatted correctly

here

here

here as well

good

all right so now that we

have the

functions in place

let's

uh

add the add to cart um function on the

product details page

so

let's go back to vs code

and for

[Music]

the

product details page whenever the user

clicks on the up to

cardboard we want

to trigger that um mutation so let's go

click

and we want to call store

commit

also carts

namespace and we want to call the

optical mutation

so

add to cart

and then we pass them the product

which is this product down here

so let's just save that

and see if it's actually

doing anything

so jump back to chrome

let's click this and

it works you see the add to cart um

thing here and if we inspect

ux

there's one item in our cart

and if we click this

cart updated

the quantity increases

all right good

uh let's see if it's being stored in or

local storage free card yes it is

all right good

so now we want to update this

card icon if the user has

an item in the card

so let's jump up to vs code

and we want to go to the nav component

down to the

cardboard

all right so

what we will do for this

is we'll display a badge if

there is an item

in this in the

cart for the user

so

let's go we

watch

and we only want to show this badge

with this store

by states

cards

or cards

not length

is less than zero

if it is

let's

show

this icon

and if it's not

then we'll show the empty icon every

else

so i want this badge to overlap

and i want the content

to be

uh i don't know what it's going to be

the number of items in the card so let's

just carry this over

hit save

let's jump back to chrome

refresh

and you can see the number here

so we have one item in our card

let's try adding something else let's

add this headphone

so we'll get the notification and then

two items

now this uh icon button should

be switching the theme of our

application from light to dark so let's

let's implement that alone

so in our nav

component

we'll just call a function on this

button when it's clicked

let's call it toggle theme

just copies here

when this

method is called we just want to change

the

beautify

theme

to the opposite of what it is so it's

going to be the opposite

of what it is

so let's save that and see if it's

happening

and it works

now of course if you uh refresh the page

we'll go back to the live theme

uh you can actually process this if you

want in local storage

but i'm not going to do that here

but it works as it should

next thing that we want to do is to

implement our card page

so let's jump back to vs code

and we want to create

a folder

called

cart

now in this cart page we want to show

our navbar

and whenever we click on the cart icon

we should be taken to

this page

so

let's just add it here

and down here

now

if we have no items in our

cart

we want to let the user know that hey

nothing is here

um

you can actually add some items to

continue

so

let's just

add some styling to this div

and add the message

just yet

keep shopping

save that

and this should only be the case if

like i said earlier we have no items in

our card so vf

score

state

card

black card

is equal to zero

and why are we getting this error

message

we always v

four should be if

and our charging over anything

and then we will have a container

with the different products that are in

our cart

so

the container and we want a row

and we're going to loop over the items

in our cart

what i keep doing that

we want items in our car so

and i'm just going to copy and paste the

code here and then we can explain it as

i go along

all right so here we have a

column with a card inside

it's flat and the

column is going to be surface

we have a button at the top

with a delete icon inside and this will

remove

the item from the card as you can see

it's calling the remove card item that

we created in mutations earlier

which is

this

so you just pass in the index and it

will remove the item from the card the

index in this case will be i

uh next we have another row

which will help us to lay out the items

on our card

so you see we have the product image

here

with a height of 220 we have the name of

the product

followed by the

quantity

and we also have

the price

of the product here

and this is multiplied by the quantity

we also have

another icon button that will increase

the number

the quantity for this item

and a minus one

that will decrease the quantity and

between the two buttons we're displaying

the

quantity count

uh the only thing left to add to this

is the

footer component on the scroll to top

component so let's just add them here

and let's check chrome to see

if it's working

so if i click on cart

here we go we have

these items in the cart and if i click

on the plus one it increases the

quantity and the price

decrease

and if we should go below one try to

decrease after one it will remove the

item from the card completely

you can also explicitly remove them

like this

and you can see the the message here no

items

yet keep shopping

and of course the

badge is no longer being displayed

so let's go back to our products page

and add a few more products

then we can go to our cart page and we

see them here

so once you're on our cart page the next

thing that we want to do is we want to

proceed to checkout so let's add that

checkout button up here

so let's jump back to ps code

and right above or roll

we want to add that button

so

it's just going to be

this one

and what's happening is we're checking

if we have more than

one item in our cart

before displaying this button

and what this button will do when

clicked is it will move on to the

confirm page which we will be creating

no

so inside cart let's create a new file

called confirm above view

and of course we want to add or

navigation bar

in here

so let's save this file and go to the

confirm file

and inside confirm we want to display

this message as well

if there are no items in the card

and the user somehow

navigates to this page

let's just add that here

we also want the option of confirming

once you've entered all the necessary

information in the different fields

and you want option of going back so

let's just add that here as well

this container

so

let me just paste these buttons in

so this button will

take us back

to the card page and this one will

complete the order by calling this

process function

which we haven't implemented yet

inside

the container we want to create

two forms

that will allow us to accept user

information

so instead of typing everything out let

me

just

copy the form oval

that's a pretty long form

so to briefly explain what's happening

um we're using the v form components

and we have added a ref

a form to it and added a class of margin

top

a little label at the top of the form to

see what we're collecting here

and of course we have

email

name phone

address

city

country

and some credit card information here

let's create these properties let me

just copy them over

so we

added added a dummy credit card here

with an expiration date and cpv

and then

we want to create

the

rules

for

um

for the different input fields

now

what i'm going to do is

create a property called rules

here

and rules will be

an object not an array

with different functions

now

the

required function

is going to accept a value

and it's going to

return true

if value is truthy

and

if it's not it's going to return this

text call required

so let's save this

and the second rule that we want to add

is this email rule

it's going to be a function

that takes in a value as well

and inside this function we're going to

get our regular expression

so let's call this

pattern

and we're going to set it to

this regular expression

provided it in an email

and then we're going to return

pattern

not test

the value that was passed in and if it

fails

then we just return a string that says

invalid email

now let's see if all of this is working

let's jump back to chrome

we have our checkout button to refresh

the page and if we go to checkout

and

yep

rules are working

should be able to go back with this

button

go forward this one

good

now we want to implement the

complete

uh function the process function

so when the user enters the information

here

we can process their order

so let's jump back to vs code

and we're going to go to methods

and process

just make this a synchronous

and the only thing that we'll be doing

is just checking if the form is valid

so we said this

also refs

form

and

form is coming from

this right here

and we're going to call them validate

method

so if it's not valid

then

we'll just do nothing

if it is valid we're just going to

notify the user

with a sweet alert pop-up so let me just

copy and paste this over

so we're going to wait on this to run

for three seconds we're just going to

say processing order we're going to show

the info icon

we're not going to allow the user to

close a dialog

and the text is going to be please wait

once this three seconds

um has passed then we're going to show a

second dialogue

and the second dialogue is going to say

hey your order your order is complete

and thank you so much

and

it's going to run for four seconds

and then we're going to remove the items

from the cart that our user just ordered

and

go to the home screen

so we're going to call the clearpath

method

from the mutations

then

push the home screen

so let's save this and see if it works

let's jump back to chrome

if we try to complete this

of course it asks you to enter some

valid information

and if you enter some valid information

and click complete then it says please

wait

you can click outside

and then it takes you back to the home

screen clears the card

no items

all right i think that's it um

i think the the source code for this

thing will be in the description so you

can check it out if you need to copy and

paste anything

or if you just want to download it and

play around with it modified yeah that's

up to you oh yeah

that's just

that's how you create an e-commerce

store linux beautify and

some images from pixels