Show specific products in collection?

[heresyrj]

Sanity sync Shopify collections, but it only provides meta data like GID, ID etc
Is there a way we can get the array/lists of products contained in the collection?

Any help would be really appreciated!

[Moucky]

I'm also looking at how to accomplish this. I'm trying to add Sanity data to a collections page but it seems like Shopify is queried to get the products in a collection so I'm not sure how to combine the Sanity products with the Shopify ones. I'm new to Sanity but I'm thinking perhaps a type of reference to the products is needed on the Sanity collections? Any advice is appreciated!

[Moucky]

I solved my issue with a Sanity query in a child component that uses the Shopify products ID to get the Sanity product.

[heresyrj]

I solved my issue with a Sanity query in a child component that uses the Shopify products ID to get the Sanity product.

Do you mind sharing your code snippet?
I actually created my custom collection type and add Shopify synced product with references, which give me more flexibility to add relevant content.

[Moucky]

That sounds like a more robust approach, I was concerned that changing the Sanity setup may not work well with Sanity Connect so I chose to do it in the frontend. I'm not sure if this is a good approach but there was already a component to display the specific product details so I just added a Sanity query in like this (I've removed some of the unnecessary code):

type Props = {
  storefrontProduct: ProductWithNodes;
};

export default function ProductImageLink({storefrontProduct}: Props) {
  const {data} = useSanityQuery({
    hydrogenQueryOptions: {preload: true},
    query: QUERY_SANITY,
    params: {id: storefrontProduct.id}
  });  

  const hoverImage = data.hoverImage

  return (
        {hoverImage && (
          <SanityImage
            className="hidden group-hover:block ease-in-out"
            style={{ height: '50vh', width: 'auto' }}
            alt={hoverImage?.altText}
            dataset={sanityConfig.dataset}
            projectId={sanityConfig.projectId}
            sizes="100vw"
            src={hoverImage?.asset._ref}
          />
        )}
  );
}

const QUERY_SANITY = groq`
  *[_type == 'product' && store.gid == $id][0]{
    hoverImage
  }
`;

This is my first Sanity/Hydrogen project and I have very little React experience so any advice is welcome!

[heresyrj]

That sounds like a more robust approach, I was concerned that changing the Sanity setup may not work well with Sanity Connect so I chose to do it in the frontend. I'm not sure if this is a good approach but there was already a component to display the specific product details so I just added a Sanity query in like this (I've removed some of the unnecessary code):

type Props = {
  storefrontProduct: ProductWithNodes;
};

export default function ProductImageLink({storefrontProduct}: Props) {
  const {data} = useSanityQuery({
    hydrogenQueryOptions: {preload: true},
    query: QUERY_SANITY,
    params: {id: storefrontProduct.id}
  });  

  const hoverImage = data.hoverImage

  return (
        {hoverImage && (
          <SanityImage
            className="hidden group-hover:block ease-in-out"
            style={{ height: '50vh', width: 'auto' }}
            alt={hoverImage?.altText}
            dataset={sanityConfig.dataset}
            projectId={sanityConfig.projectId}
            sizes="100vw"
            src={hoverImage?.asset._ref}
          />
        )}
  );
}

const QUERY_SANITY = groq`
  *[_type == 'product' && store.gid == $id][0]{
    hoverImage
  }
`;

This is my first Sanity/Hydrogen project and I have very little React experience so any advice is welcome!

Got it. I just try to decouple my frontend code with CMS as much as possible. While in the CMS, I use Shopify as ground truth when it relates to product. But I mainly use Sanity for other content I needed for the website. I actually both added my custom schemas and modified the files provided by the template a lot for the purpose.
I doesn't break Sanity Connect. I think the plugin just build a one-way sync mechanism. As long as you don't delete the core schemas, you should be fine.

[Moucky]

Interesting, thanks for the insight. I hope as time goes on there are more resources online for this particular setup as I look forward to working with it further.