– English Lyrics

Lyrics & Translation

[English]

Hello guys, today I want to show you

quickly a few examples of livewire in

action. So yesterday on this channel

I've shown t-shirt project with activity

log but some of that project was based

on livewire and I will show you two

cases. For example, if you choose a

color of a t-shirt, as you can see the

sizes are refreshed automatically. I

choose red t-shirt and then it shows and

disables the options that are out of

stock. So this is powered by livewire

component on that specific side of the

page. And also second function I will

show you is actually adding to the cart.

So whenever I click this cart one is

updated on top with the number being

refreshed automatically without

refreshing the full page which is again

live wire component with events. Let me

show you the code. So the page of

showing the product is a typical Laravel

blade. No live wire here. So we have

show blade with full HTML in this case

and inside of that blade we have live

wire as a separate part of that page. So

this is how I typically use livewire in

general. This is my personal preference.

I don't use livewire as architectural

decision for all the routes replacing

laral controllers but instead I use it

only for small specific portions where I

do need dynamic elements. Let's take a

look inside. So that product selection

livewire component consists as every

livewire component from blade and then

class of data and logic. If we took a

look at blade so you would understand

the first visual logic. We have a form

wire submit add to cart and we have

hidden values of product ID color and

size coming from livewire component.

We'll get to that in a minute. And then

if we have colors then we have for each

of colors we show those divs and inputs

and we have radio with value with wire

model live and live is important in this

case. So this is one for each for

showing this part of the page the

colors. Then we have another for each.

If we have sizes then for each the sizes

similar thing we show the labels and

inputs with wire model with value of

each size and then submit button is

active only if we have colors and sizes

and if we have both selected then we und

disable that button. So that's the

visual logic. Now the product selection

as a component on mount we have the

product from the database and then the

default values of selected color and

size are null by default and then we

have get available colors property get

available sizes property where we get

the data from the database get all

colors get all sizes and then the main

so to speak magic of updating sizes for

colors happens on updated. Let me find

it somewhere. Yep, this one. Updated

selected color ID. We reset the selected

size ID to null. And then in the blade,

we have for each of all sizes, but

inside we use is size available, which

is another method in the same component.

Is size available, which works with the

collection of available sizes. I'm kind

of jumping up and down the code, but I

hope you get the idea. The dynamic thing

is about updating the selected color ID

and then refreshing the sizes. And then

as a result, the submit of that is add

to cart. This is where we add cart

product. This is where we log the

activity which I mentioned in the

previous video on this channel. And this

is the second thing I want to show cart

updated dispatch event. From this point

of view, from this livewire component,

we're dispatching the event to anyone

who wants to listen to that event. It

may be any livewire component anywhere

on the page. And in this case on this

page, we have header navigation blade

component. And inside of that, we have

another livewire component, small

component for the card link I've showed

you on the top right. So again, liveware

use case only for small interactions for

specific parts of the page. Inside

nothing really fancy link to cart with

card count as variable and that card

count comes from card counter logic of

livewire component by default zero and

by default we update cart count checking

that from the database from users

current and products. But then the main

thing is the PHP attribute on with the

event name. The same event name which is

called from that product selection

component. This dispatch the name is get

called in on PHP attribute and then

update card count is called again

refreshing the card count and then

rerendering this card with the updated

value. So yeah, two quick examples of

LiveWire. For those of you who haven't

used LiveWire, it may be an example of

where you could use it and how exactly

it works. If you want the full source

code, it's available on Laravel Daily

Comm in project example section. I've

published it here. T-shirt eshop with

LiveWire and also activity log kind of

twoinone project. So I will link that in

the description below. What do you think

about this LiveWire example? Would you

have done something differently or would

you have done it without LiveWire? Maybe

you prefer Vue.js or React or something

else. Let's discuss all of that in the

comments below.