import { useNostoProduct } from '@nosto/nosto-react'
function ProductPage({ productId }: { productId: string }) {
useNostoProduct({
product: productId,
placements: ['productpage-nosto-1', 'productpage-nosto-2']
})
return (
<div>
<h1>Product Details</h1>
<div id="productpage-nosto-1" />
<div id="productpage-nosto-2" />
</div>
)
}
import { useNostoProduct } from '@nosto/nosto-react'
function AdvancedProductPage({ product }: { product: Product }) {
useNostoProduct({
product: product.id,
reference: `product-${product.id}`,
tagging: {
product_id: product.id,
name: product.name,
url: product.url,
price: product.price,
list_price: product.listPrice,
image_url: product.imageUrl,
categories: product.categories,
brand: product.brand,
selected_sku_id: product.selectedVariant?.id
},
placements: ['productpage-cross-sell', 'productpage-upsell']
})
return (
<div>
<h1>{product.name}</h1>
<div id="productpage-cross-sell" />
<div id="productpage-upsell" />
</div>
)
}
You can personalise your product pages by using the useNostoProduct hook.