Homepage Product Preview

[00:00:00]
>> We have our homepage. Right now, the homepage consists of a hero button and a call to action. We've got our About page set up, it's powered by Markdown. And we have our shop, our shop is loading products from a third-party API. And we have a cart, the Add to Cart button is powered by React.

[00:00:15]
The cart itself is powered by Solid, and we're sharing state between those using Nano Stores. So this is probably a fairly dynamic setup. You could see going further with this, we could start looking at user accounts, we could start looking at storing the cart somewhere, and rehydrating that as you come back in.

[00:00:34]
All of which is possible, but is a little out of the scope of what we wanna do, cuz I wanna show a little bit more. So looking at how can we reuse some of these Astro components, so we're gonna look at putting a preview of products on our homepage.

[00:00:46]
Then we're gonna look at Astro content collections, we're going to figure out how to run a blog in Astro, we're gonna power it with Markdown. Because we've already looked at how to load from an API, so we could use any headless CMS that we wanted, whether that's WordPress in headless mode or Contentful or Sanity or any of the other ones out there.

[00:01:06]
But we're gonna use Markdown so that we can look at how we can make our Markdown frontmatter type safe. And also how we can take advantage of some of these built-in features of content collections that make building a blog powered by Markdown really straightforward. We're also going to set up an RSS feed, and then we'll start looking into doing some dynamic stuff.

[00:01:25]
We'll get ourselves a newsletter form that will work powered completely by Astro, with Javascript disabled using server rendering. So first, why don't we go ahead and add our sandwich kit preview on the homepage? So we wanna add a new section below our hero that shows a few of the products and gives people a nudge to go check them out.

[00:01:49]
Because again, point of the website is to try to get people to try out these sandwich kits. And we want them to go check out the store, so that is our big focus here. So the first thing that we need to do is I want this preview to only show three of the products.

[00:02:07]
And the way that the shop items component is built right now is it shows all of the products. So I wanna add the ability to modify the output of the shop items component using some props. So we're gonna do that by adding some props to our component. And the way that those work in Astro is if we want some types, we set up an interface called Props, and then we can add whatever we want to be in here.

[00:02:35]
So I wanna include a count, that's gonna be a number. And the question mark makes it optional so that we don't want to have to send through a count. And then we want to decide whether or not we're gonna show the Add to Cart button. Now, because of the way that this is built, where the cart lives on the shop page, we're not gonna have the ability to add to cart from the homepage.

[00:02:56]
We're only gonna have the ability to go through to the shop page and look at the cart there. So we want that to basically be toggleable, we wanna say like, don't show the Add to Cart buttons when we're showing the preview. Next, we're gonna actually use these props.

[00:03:12]
And the way that you access props in Astro is you get a component or a global called Astro, and then you can grab props out of it, and then you destructure those, and those will map to your count here. And because we've defined the type, that's the wrong button.

[00:03:29]
So [LAUGH] If I start typing count, you can see here that it has the count, and then if I do addToCart, I get my addToCart. And that needs to be props, that's probably a lot of what just went wrong. So now I've got my count and it knows it's a number, and it's got my addToCart and it knows that it's Boolean or undefined, great.

[00:03:49]
So I'm going to set a default on this one, we'll make it true if it's not declared, because we wanna show the addToCart. And then the count, we're gonna set to be infinity, because by default, we wanna show all of the items if we don't pass that prop.

[00:04:08]
To actually use this, we can, before we map over the items, we'll just run a slice. This is a JavaScript thing, so we'll start at the first item in the array, the 0, and then we just finish at the count. So we want the first count items. And then we're going to add a little conditional check here, where we say if addToCart is true, show this addToCart component, otherwise render null.

[00:04:40]
So with that addition, we've now added props to an Astro component. These will work functionally when we actually call the component. In the same way as any React or Solid or Svelte component works, you just add the name of the prop equals and a value. And we can now show a limited number of our products and we can decide whether or not we wanna show the cart.

[00:05:03]
So to actually do this, we will head over to our index, and we're gonna import, Oops, shopItems from components and shop-items. And then down here, underneath this section, we're gonna add a new one. And this section is going to have a class of, we're gonna use that block again and we'll give it a name of products.

[00:05:33]
And inside, we're going to add in our shop items, we want three of them, and we don't wanna show the Add to Cart button. And then, so that people can get over to the shop, we're going to add a class of shop-link and display a link, and that is gonna head over to the shop.

[00:05:59]
And we'll say Shop All Sandwich, if I can spell it, Sandwich Kits. And then we're gonna use an HTML entity to show an arrow. And I picked this up a long time ago before emoji were really well supported and I still use it all the time. These HTML entities are great.

[00:06:21]
There's a lot of flexibility and it doesn't require any dependencies or any other stuff. So save that, head out here, and look at it go, we've got products displayed on the homepage, takes you through to the sandwich kits. What a time to be alive, how great is that that we can do that that quickly?

[00:06:44]
And this is really like, again, what I love about this framework is that it just lets you build stuff, I'm not having to go add configure options. I'm not having to go check the docs, I just, hey, I need some props, great, I've got some props, now I can go do some stuff.

[00:06:58]
It just uses the knowledge I already have from working with other frameworks. Now, if I need the docs, the docs are great and they will fill any gap. So if you haven't worked with a component-based framework before, some of that knowledge might not be there, you might not be able to call on it from having worked with React or Solid.

[00:07:14]
But it's still, grab the documentation, it's gonna walk you right through it and you're building features instead of wrestling with your tools. And I really, really do treasure that when I find a tool that makes that possible.