crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Correct related products section into product view, now it is called latest products

Browse Source
This commit is contained in:
Daniele Pancottini 2023-05-14 10:10:51 +02:00
parent 71b02bbf7d
commit 29d39db1cc
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/components/product/ProductView/ProductView.tsx
View File

@ -12,7 +12,7 @@ import ProductSidebar from '../ProductSidebar'
import ProductTag from '../ProductTag' import ProductTag from '../ProductTag'
import ProductModel from '../ProductModel/ProductModel' import ProductModel from '../ProductModel/ProductModel'
import Lightbox from 'yet-another-react-lightbox' import Lightbox from 'yet-another-react-lightbox'
import Zoom from "yet-another-react-lightbox/plugins/zoom"; import Zoom from 'yet-another-react-lightbox/plugins/zoom'
import 'yet-another-react-lightbox/styles.css' import 'yet-another-react-lightbox/styles.css'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import random from 'lodash.random' import random from 'lodash.random'
@ -30,10 +30,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
}) })
const listPrice = usePrice({ const listPrice = usePrice({
amount: (product.variants[0].listPrice) ? product.variants[0].listPrice : -1, amount: product.variants[0].listPrice ? product.variants[0].listPrice : -1,
currencyCode: product.price.currencyCode!, currencyCode: product.price.currencyCode!,
}).price }).price
const model3dPath = product.media const model3dPath = product.media
.map((media) => { .map((media) => {
return media.sources return media.sources
@ -48,8 +48,10 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
const { locale = 'it' } = useRouter() const { locale = 'it' } = useRouter()
const colors = [random(255), random(255), random(255)] const colors = [random(255), random(255), random(255)]
const darkerColor = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", 1)" const darkerColor =
const lighterColor = "rgba(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ", 0.8)" 'rgba(' + colors[0] + ', ' + colors[1] + ', ' + colors[2] + ', 1)'
const lighterColor =
'rgba(' + colors[0] + ', ' + colors[1] + ', ' + colors[2] + ', 0.8)'
return ( return (
<> <>
@ -59,11 +61,15 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
<ProductTag <ProductTag
name={product.name} name={product.name}
price={`${price}`} price={`${price}`}
listPrice={listPrice.includes("-") ? "" : listPrice} listPrice={listPrice.includes('-') ? '' : listPrice}
fontSize={28} fontSize={28}
/> />
<div className={s.sliderContainer}> <div className={s.sliderContainer}>
<ProductSlider darkerColor={darkerColor} lighterColor={lighterColor} key={product.id}> <ProductSlider
darkerColor={darkerColor}
lighterColor={lighterColor}
key={product.id}
>
{product.images.map((image, i) => ( {product.images.map((image, i) => (
<div key={image.url} className={s.imageContainer}> <div key={image.url} className={s.imageContainer}>
<Image <Image
@ -117,7 +123,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
<hr className="mt-7 border-accent-2" /> <hr className="mt-7 border-accent-2" />
<section className="py-12 px-6 mb-10"> <section className="py-12 px-6 mb-10">
<Text variant="sectionHeading"> <Text variant="sectionHeading">
{locale === 'en' ? 'Related Products' : 'Prodotti Correlati'} {locale === 'en' ? 'Latest Products' : 'Prodotti Recenti'}
</Text> </Text>
<div className={s.relatedProductsGrid}> <div className={s.relatedProductsGrid}>
{relatedProducts.map((p) => ( {relatedProducts.map((p) => (