crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Next.js to 12 and switch to npm (#562)

Browse Source 
* Update Commerce to Next.js 12

* Switch to npm

* Removed yarn

* Updated fetch type

* Fixed issue with BC deployment
This commit is contained in:
Luis Alvarez D
2021-11-09 11:12:00 -05:00
committed by GitHub
parent e3471db3eb
commit 582e9257d9
13 changed files with 27349 additions and 7301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/product/ProductCard/ProductCard.tsx
View File

@@ -46,15 +46,17 @@ const ProductCard: FC<Props> = ({
<span>{product.name}</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
<div>
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
</div>
)}
</>
)}
@@ -80,16 +82,18 @@ const ProductCard: FC<Props> = ({
)}
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
@@ -110,16 +114,18 @@ const ProductCard: FC<Props> = ({
/>
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>

9
components/product/ProductSlider/ProductSlider.module.css
View File

@@ -13,9 +13,7 @@
}
.thumb {
@apply transition-transform transition-colors
ease-linear duration-75 overflow-hidden inline-block
cursor-pointer h-full;
@apply overflow-hidden inline-block cursor-pointer h-full;
width: 125px;
width: calc(100% / 3);
}
@@ -48,11 +46,6 @@
@screen md {
.thumb:hover {
transform: scale(1.02);
background-color: rgba(255, 255, 255, 0.08);
}
.thumb.selected {
@apply bg-white;
}
.album {

9
components/product/ProductView/ProductView.module.css
View File

@@ -17,16 +17,15 @@
}
.imageContainer {
@apply text-center;
@apply text-center h-full relative;
}
.imageContainer > div,
.imageContainer > div > div {
@apply h-full;
.imageContainer > span {
height: 100% !important;
}
.sliderContainer .img {
@apply w-full h-auto max-h-full object-cover;
@apply w-full h-full max-h-full object-cover;
}
.button {

6
components/product/ProductView/ProductView.tsx
View File

@@ -58,7 +58,11 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
)}
</div>
<ProductSidebar key={product.id} product={product} className={s.sidebar} />
<ProductSidebar
key={product.id}
product={product}
className={s.sidebar}
/>
</div>
<hr className="mt-7 border-accent-2" />
<section className="py-12 px-6 mb-10">