cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Fix image sizes & category filters (#939)

Browse Source 
* Fix image height & missing query string

* Update ProductView.tsx

* Update ProductView.tsx

* Update index.tsx

* Remove unused path
This commit is contained in:
Catalin Pinte 2023-01-26 16:19:19 +02:00 committed by GitHub
parent e66cd12f4c
commit 252355717d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/commerce/src/api/utils/index.ts
View File

@ -28,7 +28,7 @@ export const getInput = (req: NextRequest) => req.json().catch(() => ({}))
* @param req NextApiRequest * @param req NextApiRequest
* @param path string * @param path string
*/ */
export const transformRequest = (req: NextApiRequest, path: string) => { export const transformRequest = (req: NextApiRequest) => {
const headers = new Headers() const headers = new Headers()
let body let body
@ -44,7 +44,10 @@ export const transformRequest = (req: NextApiRequest, path: string) => {
body = JSON.stringify(req.body) body = JSON.stringify(req.body)
} }
return new NextRequest(`https://${req.headers.host}/api/commerce/${path}`, { // Get the url path & query string
const url = new URL(req.url || '/', `https://${req.headers.host}`)
return new NextRequest(url, {
headers, headers,
method: req.method, method: req.method,
body, body,

2
packages/commerce/src/api/utils/node-handler.ts
View File

@ -44,7 +44,7 @@ export default function nodeHandler<P extends APIProvider>(
) )
} }
const output = await handlers[path](transformRequest(req, path)) const output = await handlers[path](transformRequest(req))
const { status, errors, data, redirectTo, headers } = output const { status, errors, data, redirectTo, headers } = output
setHeaders(res, headers) setHeaders(res, headers)

2
site/components/product/ProductCard/ProductCard.module.css
View File

@ -73,7 +73,7 @@
} }
.imageContainer .productImage { .imageContainer .productImage {
@apply transform transition-transform duration-500 object-cover w-auto h-full; @apply transform transition-transform duration-500 object-cover;
} }
.root .wishlistButton { .root .wishlistButton {

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

@ -69,10 +69,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
<Text variant="sectionHeading">Related Products</Text> <Text variant="sectionHeading">Related Products</Text>
<div className={s.relatedProductsGrid}> <div className={s.relatedProductsGrid}>
{relatedProducts.map((p) => ( {relatedProducts.map((p) => (
<div <div key={p.path} className="bg-accent-0 border border-accent-2">
key={p.path}
className="animated fadeIn bg-accent-0 border border-accent-2"
>
<ProductCard <ProductCard
noNameTag noNameTag
product={p} product={p}
@ -81,8 +78,7 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
className="animated fadeIn" className="animated fadeIn"
imgProps={{ imgProps={{
alt: p.name, alt: p.name,
width: 300, className: 'w-full h-full object-cover',
height: 300,
}} }}
/> />
</div> </div>

4
site/pages/index.tsx
View File

@ -70,8 +70,8 @@ export default function Home({
product={product} product={product}
imgProps={{ imgProps={{
alt: product.name, alt: product.name,
width: i === 0 ? 1080 : 540, width: i === 1 ? 1080 : 540,
height: i === 0 ? 1080 : 540, height: i === 1 ? 1080 : 540,
}} }}
/> />
))} ))}