How to Display Multiple Products on the Homepage

10 replies
Last updated: May 19, 2022
Hi guys,
I have 2 type of products shown in the screenshot below. How do I project both of them in the homepage? This is how I project my first product:

const Home = ({product}) => {
  console.log(product)
  return (
    <div className={styles.card}>
      <h1>{product.name}</h1>
      <h1>{product.sku}</h1>
      <h1>{product.finish}</h1>
      <img src={urlFor(product.image).width(200)}/>
      <PortableText value={product.info} />
      <a href={product.installatiesheet}>Installatiesheet</a>
    </div>
  )
}

export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
      "installatiesheet":installatiesheet.asset->url,
    }[0]`)

  return {
      props: {
        product,
      },
    }
}

export default Home
May 19, 2022, 9:34 AM
user F
do you have a suggestion on how to approache this ?"
May 19, 2022, 11:02 AM
Your query picks only the first product due to
[0]
. If you want to display multiple products, you need to remove that selector, and then use a loop or uses
products[0]
and
products[1]
or something like this. Basically, query your products (plural), and display them.
May 19, 2022, 11:04 AM
like this?
<h1>{product[1].name}</h1>
and I changed the range to

 }[0...100]`)

May 19, 2022, 11:10 AM
If you remove the range entirely, that will query all of them. But yes. πŸ™‚
May 19, 2022, 11:10 AM
Then you have an array of products.
May 19, 2022, 11:10 AM
And you can loop over that array to display info for each of them.
May 19, 2022, 11:11 AM
if i remove the range I get an error : Error: Unable to resolve image URL from source (undefined)
May 19, 2022, 11:11 AM
oh nvm my last message this works
May 19, 2022, 11:13 AM
thanks again Kitty you really help me alot today πŸ‘
May 19, 2022, 11:13 AM
πŸ‘
May 19, 2022, 11:14 AM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.