By
Viewed
1,468
Please choose the correct answer for each question below:
Questions: 0/131
Correct: 0
Translate:
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.
Related Songs