To make truly modern, maintainable, and scalable websites, you have to use things like custom post
types and custom fields. In this video, we’re going to take a look at Etch’s loops, logic,
and dynamic data capabilities so that you can see how fast and simple this is and how quickly
the builder renders dynamic data as you’re working. So I’m going to go ahead and share my screen.
Let’s make sure we’re good to go. We are. I’m going to just go through one very simple example
and then I will do a follow-up video because a lot of people have been asking about WooCommerce
and they probably think there’s Etch’s, they haven’t even started working on WooCommerce
functionality. There’s no possible way they could potentially create a product card and loop
through the products and have the dynamic data all populate with the regular price, the sale price,
the product description, the product image, all of that. Well, that is already possible in Etch.
And I will do a follow-up video for that. I’m going to start out with a non-e-commerce example,
something that probably people will build on every single website just to show you how quick
and easy this is. So I’m going to go to ACF and you’re going to notice that I have some custom
post types, one being team. Well, actually this is post types right here, my team, and then field
groups. I have some custom fields assigned to the team for their title and their bio. Of course,
if we go to team and we look at some of these team members, we’re going to see,
I put their name in the post title field. Then they have this team member title, which is actually
a select box to choose what their title is, like sales or human resources or marketing or whatever.
You could put it, you could say department, like whatever you wanted to do. And then I put in their
bio and then we have their featured image and the featured image spot. And what I need to do is I need
to make a grid for our team members. And this is going to require a loop and it’s going to require
pulling this data dynamically into the card that I create inside of that loop. And I wanted to just
start with a simple example because I do want to go slow and make sure that nobody is left behind.
Okay. So I’m going to go pages. I’m going to go home. We’re going to edit with etch. We have a blank
slate. I’m going to start with a section inside that section. I’m going to drop in a heading and that’s
just going to say, meet our team. I’m going to drop in another container below. This is going to be my
grid. Now I do want to pause here and say in the near future, you will be able to create custom post
types and custom fields, do conditional field logic, and even do things like bi-directional relationships
with custom fields natively in etch. You will not need advanced custom fields. You will not need
meta box. You will not need any add-ons to manage this. This will be native functionality inside of
etch for all plan levels. This is part of our commitment to building what we call a unified
visual development environment. You should not have to leave etch to go create a custom post type.
That is a critical part of the workflow. You should not have to leave etch to go create custom fields.
That is a critical part of the workflow. You will be able to make those things in line,
in the interface while you’re doing all of your other work. You never have to context switch.
You never have to go to a magic area. All of this happens inside of etch. But for right now,
we do have ACF installed so that we can get something going, right? And this shows the integration
with third-party tools that is already happening. Okay. So what we’re going to do is we’re going to
call this the team grid. I’m going to go ahead and add a flex div here. This is going to be my team card.
And I’m going to make a really simple card. We’re going to do an image. We’re going to do a heading.
That’s going to be their name, then their title, and then their bio. So I’m going to call this title.
I’m going to call this bio. I’m going to call this name. I’m going to call this avatar. And then I have
my team card right here. Now I am going to right-click create BEM classes. This is going to create the
styling classes for all of these elements automatically based on their name. I’ve shown
this in the past videos. Okay. Next thing I’m going to do is we’ll just add some simple styling. Okay.
So like for the title right here, I want this to be smaller text. So I’m going to say text that. So I’m
going to copy that to my clipboard so I can do the same thing for bio as well. And then this heading,
I want this to actually reference my H4 font size, even though it’s going to stay, actually,
I want that to be an H3. So I’m going to just change the tag really quick right there.
All right. So that is all fine and dandy. What I’m going to do is grab my team card. We’re going to set
this to display flex and flex direction of column. My gap is going to be a card gap. You’ll see the CSS
auto authoring itself down here with the bi-directional sync. I’m just kind of pointing
out things. If you haven’t watched every single video, you may not know exactly what’s going on.
I’m going to use a placeholder, just static placeholder for right now. And this will be the
person’s name. This will be their title and this will be their bio. I am not focusing on design in
this video. Okay. I’m not going to do a bunch of fancy little details. I am focusing on functionality
of loops and dynamic data. That is our mission in this video. Okay. I have four team members. So
what I need is a four column grid. So I’m going to grab my grid right here. I’m going to add a class
called team grid to this. We’ll display this as a grid. And I want to say grid auto four. Okay. Grid
auto four. If I can type properly. Now you’re not going to see it turn into a four column grid because
auto grids, they auto fill. And so if there’s only one thing, it’ll take up all the space. But as I add
more, it will then put them in their grid slots. It’s very dynamic. This is great for like, if you
have a four, but it might be three, but it might be a, you know, you might need two rows, whatever.
It’s just going to fill itself out nice and evenly. Okay. So the next thing, and that’s just something
from ACSS. We don’t even have to focus on those details. You can make a grid. However, you want to make a
grid and edge. This is just the way that I do it. Cause it’s very fast. It’s very easy and it’s
very effective. All right. So the thing we’re going to do is we’re going to turn this into a component
because I know people are wondering, well, okay, you can loop static stuff. Like, but can you loop a
component? That would be even cooler if you could loop a component? Well, yes, yes, we can loop a
component. So let’s make a component. We’re going to right click, create component. I now have a team
card component. What is the first step class on creating a component? Well, after you right click and create
component, you have to create the props. We need an, we need a text prop, a text prop, a text prop.
That’s three. And we need an image prop. Okay. So we’re going to go one, two, three, and image.
This is going to be called name. This is going to be called title. I’m just doing this name, title, bio.
Okay. This is going to be called bio. If you haven’t watched my components video, you should go watch it.
Components are very, very, very powerful. This is going to be called avatar. I’m going to choose
my default avatar right here. And then I’m going to click, click, and that’s going to map that to that
prop area. Okay. Bio goes here. Title goes here. Name goes here. It’s that easy. I’m going to hit save.
There’s my card. There’s my component. It’s all propped up and it’s ready to go. All right. Next
thing we’re going to do is we are going to get our loop going because I need to pull in. I can’t just
have one card here. I have to have four cards, but I can’t duplicate this card and just make four of
them. That’s static. That’s not what I want to do. I want to be dynamic. I want to loop through all of
our team members. And in the future, if we add more team members, this grid, this page will populate
itself. It will keep itself up to date. As I delete people from the backend, as I add new people in the
backend, I will never have to touch this again. It will just manage itself. That’s the beauty of dynamic
data. All right. So what I’m going to do is I’m going to click on team grid. And for the very first
time you are going to see the loop in action. So I’m going to come down here. I’m going to click this
little thing that looks in fact, quite like a loop. Okay. I’m going to click it. It’s going to add a loop
element to the page. I’m going to drag my team card inside of it. And now I have my loop and I can name
this right here. I can say team members. Okay. Just whatever. It’s just, it’s, that doesn’t,
it doesn’t affect anything. It’s just for you for organization purposes. Okay. Notice,
right away that it’s looping and it’s like turned into three things because we have some default
loops going on down here. And this is our V1 loop editor, which gives you access to the PHP
arguments, which is fantastic for advanced people, but I know it scares beginners to absolute death.
So I want to pause here and I want to say for beginners, we are going to have a level two loop
editor that is a nice, super friendly, easy to use UI. And you’ll just click, click, click, click,
click and configure your loop. And it’ll, it’ll make total sense to you. However, everybody else may love
using this because it’s so fast and it’s so powerful and it has no limitations. And you can even ask Grok
to write these arguments for you or Claude or your favorite LLM, um, you know, friend, right?
Okay. So what I want to do is I want to loop through my team. Oh, look at that. It turned into
four because there’s four team members instantly. I want you to notice the instant rendering as I go
through this. Okay. It is very fast. There is no lag, nothing to slow you down, nothing to get in your
way. I want to change this to eight, even though we don’t have eight, but you know, if we added more
in the future, it would expand to at least eight here before it starts to page an eight or, uh,
some other method of handling extra people. And that’s really all we need to do. Now. What I,
what I have to do next is instead of statically putting content in here, like Jake, okay. Which
is clearly going to write Jake four times. Well, I don’t want to do that. I need dynamic data. I got
to reach into those custom fields that I created an ACF. I got to reach into them and I got to somehow
pull out their data. Now I’ll pause right here and say that what you are about to watch me do
is not the proposed workflow. This is V1 of dynamic data, V1.1 of dynamic, like very soon,
very, very soon. There’s going to be icons on these inputs. You click them. It’s going to show
you the keys that are available. And then you just click, click, click, and it maps it and you’re done.
Okay. You don’t have to do what I’m about to do, but we’re not there yet. I’m treating you guys right
now the way we have treated our customers in the development process. We don’t wait until
everything is picture perfect. Every single week we release what is available and you get to look at
the new things, the new capabilities. You’re not seeing the final end game of everything, but you’re
getting to touch, feel, play with exactly what is available new that week. And that is really,
really fun. And it gets us feedback very quickly and it allows us to iterate very quickly.
And obviously it’s been a very successful process up to this point. Okay. So let’s just get some
dynamic data. I’m going to do this dot title just to show you how easy that is. Still not hard. It’s
still not hard. I want to explain the word this in just a minute, but I’m going to go in and I’m going
to keep going. So I want this dot, Ooh, this is the person. So this was the post title. This is the
person’s actual title. And if we go back here, I just want to show you this as a reference. I go to
field groups. I go to team, these keys that ACF makes. Those are the keys you’re going to reference.
So team member title, that’s all I have to do is reference that, but I have to have one extra step.
This dot meta, because ACF puts this stuff in meta fields. And what is it? Team member title. Look at
that. There’s the team member title right here. Now I can copy that and paste it down here and just change
title to bio. And now the bio’s in and guys, we have made some awesome team member cards. We are looping.
We are doing dynamic. Oh, we don’t have their images. Silly me. Okay. I’m going to come down here.
This dot featured image. Now we have all of their images just like that instant rendering. I’m going to show
you on the front end too, so that you can be extra impressed. I want you to notice this. First of all, my team
grid, double click. Now an unordered list team card. I want to edit component. I want to come in here. I want to
make these list items. Okay. I’m going to save my component. I’m going to save this. I’m going to go to the front
end. Oh, it looks like our team grid needs a gap. Okay. Let’s go to gap and grid gap just like that. All right.
Let’s save. Let’s go to the front end and let’s take a little look. See, okay. Right click inspect and exactly
what you would expect to see. It is clean as an absolute whistle. Guys, this is loops,
looping components. What evidence, let me ask you a question. What evidence is there that this is a loop?
What evidence is there that these are components being looped? Do you see a single extra wrapper?
Do you see a single piece of extra code that would let you know that any of that is happening? Or do you
only see the bare minimum that you actually need to see to properly render this page? Etch output is as
clean as a whistle. Okay. So let’s go back in. I want to explain one thing to you real quick. And that is
the word this. And I also want to point you to etchwp.com slash blog. I would highly recommend you
click this and read about the perfect loop architecture. Okay. And this site is not built
with etch, by the way. All right. I saw a problem we’re having with our table of contents element.
Apparently this is built in bricks. So don’t pay attention to that. Read the actual content because
that’s what you came for. That’s the important part. This content over here on the left-hand side.
It’s very important to understand how some methods of looping are better than other methods of looping.
We’re going to have nested loops. You can use condition if blocks inside of loops. You can
check the condition of dynamic data. You can check the condition of props. You can, it is so insanely
powerful. And this is only level one. Okay. Let me explain the, this thing. Okay. This dot title,
this dot meta, this dot meta, this dot featured image. When you click the loop. Okay. The default.
So I’m going to click on this loop right here. The default says loop recent posts as this. Okay. Oh,
did I not, I didn’t even show you guys why this says recent posts. We need to change this. I totally
forgot about this. You save this as your team loop. All you got to do is double click that and change it
to team and you’re done. And you can look, you can create as many of these queries as you want. You can
delete them from here. Super simple, super easy. But now I have saved my team loop just like this.
And notice it’s saying loop team as this. Okay. I, if you’re doing a simple one layer loop,
I would just leave the word this in there and just do this dot everything, this dot title,
this dot, dah, dah, dah, dah, dah. But if you’re going to do nested loops, you want a little bit more
flexibility. You want a little bit more organization. You want it to make a little bit more sense.
So what you do is you grab the loop and you say loop team as whatever you want. It can be team,
loop team as member, loop team as person. Like I can say loop team as person. Okay. Now all of that
dynamic data is going to go away. Why? Because we’re saying this dot title, this dot meta, but now I can
come in and say person. Okay. Person dot meta person, person dot featured image. All my dynamic data comes
back. And then if I was going to have a nested loop, I could loop that as whatever it needed to be looped
by. And I can have, I can have unique keys for those loops so that everything stays nice and organized.
There’s no collisions of dynamic data or anything like that. Once again, another layer to how powerful
these loops are going to be. And, uh, that’s it. I want to, I want to cut this video short. I didn’t
want to spend too much time. We’re at the 17 minute mark. That’s about right. Uh, like I said,
I will do a followup video to this where I show you that we are already able to create product cards
from WooCommerce products. We are already to put, already able to put the dynamic data in for those.
You can have the sale price. You can have the regular price. You can have all the fields that
are available. Uh, you can use conditional logic to say, Hey, if it has a sale price, I only want to show
products that are on sale. I don’t want to show products that are not on sale. So I could, I could
create a grid that is products on sale, only show products that are on sale with our conditional logic.
That is all possible and working right now inside of etch. I’ll do a followup video. If you love this,
and I’m so sorry if I lost you, I feel like I’m talking fast. I really hope if you’re a beginner
that I didn’t lose you along the way. I want to reiterate that I will be doing a page building 101.
I already did this course once, but I’m going to redo it for everybody. I’m going to make it, um,
even more granular and modular, which means the episodes are going to be even shorter.
It’s all going to be redone in etch. And I am going to guide you through all of these fundamentals
step-by-step at a slow pace that you can follow along with. You are, we are, all we do is elevate
people’s game. That’s what we do. We give you better tools. We give you better education.
And along the way you get better pricing. You get more money. You get more success.
Good things happen to you. When you stick around us, good things happen to you. Okay. Uh, like the
video, comment on the video, make sure you’ve got a copy of etch. I mean, it’s ridiculous that, that,
that if you’re still on the fence, I mean, after all of this, you’ve seen all of this, you’re still
on the fence. Uh, I don’t know what to tell you. All, all I can say is in September, it’s probably
going to be more expensive. The LTDs might not even be there in September. We don’t know yet.
We don’t know yet. Now is the time to get in. Okay. Now is the time to get, you gotta get,
you gotta get off the fence. If, if, if what you’re seeing, you’re not connecting the dots on this stuff.
Again, I don’t know what to tell you, but we’ll be back more stuff to look at more education to be had.
I love you guys. Thanks for the support. Share this around. Peace.
Thanks.
