89 lines
1.9 KiB
JavaScript
89 lines
1.9 KiB
JavaScript
"use client"
|
|
import React, { useEffect } from 'react'
|
|
import graphql from 'src/utils/graphql'
|
|
import ProductCarousel from '../Carousel/ProductCarousel'
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
const gql = `
|
|
query Products_connection(
|
|
$categoryId: ID
|
|
$brandId: ID
|
|
$locale: I18NLocaleCode
|
|
) {
|
|
products_connection(
|
|
filters: {
|
|
or: [
|
|
{ category: { documentId: { eqi: $categoryId } } }
|
|
{ brand: { documentId: { eqi: $brandId } } }
|
|
]
|
|
}
|
|
sort: ["createdAt:desc"]
|
|
locale: $locale
|
|
) {
|
|
nodes {
|
|
documentId
|
|
title
|
|
price
|
|
slug
|
|
discount
|
|
showPrice
|
|
images {
|
|
documentId
|
|
alternativeText
|
|
url
|
|
}
|
|
brand {
|
|
title
|
|
documentId
|
|
image {
|
|
documentId
|
|
alternativeText
|
|
url
|
|
}
|
|
slug
|
|
}
|
|
category {
|
|
documentId
|
|
title
|
|
slug
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
`
|
|
|
|
const ProductRelated = ({ category, brand }) => {
|
|
const [products, setProducts] = React.useState(null)
|
|
|
|
const fetchProducts = async () => {
|
|
const { products_connection: { nodes } } = await graphql(gql, {
|
|
categoryId: brand?.documentId ? "" : category?.documentId,
|
|
brandId: brand?.documentId ? brand?.documentId : "",
|
|
locale: "en"
|
|
})
|
|
|
|
setProducts(nodes)
|
|
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchProducts()
|
|
}, [])
|
|
|
|
|
|
const t = useTranslations("PDP")
|
|
return (
|
|
|
|
<div>
|
|
|
|
{
|
|
products && products.length > 0 && (
|
|
<ProductCarousel products={products} title={t("productRelated")} showMoreLink={`/products/${brand?.slug ?? category?.slug}`} />
|
|
)
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProductRelated |