Skip to content

Commit

Permalink
Merge pull request #28 from contentstack/feature/product-detail-page-ui
Browse files Browse the repository at this point in the history 
Feature/product detail page UI
  • Loading branch information
@sankartn
sankartn authored Apr 2, 2024
2 parents c213349 + 0f35a5c commit 7bc2e8d
Show file tree
Hide file tree
Showing 10 changed files with 1,020 additions and 464 deletions.
31 changes: 21 additions & 10 deletions app/routes/($locale)._index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,9 @@ function RecommendedProducts({
rel="noreferrer"
target={button?.open_in_new_tab ? '_blank' : '_self'}
className="banner-repo-cta"
style={{
margin: '10px',
}}
>
{button?.cta_title?.title}
</a>
Expand Down Expand Up @@ -250,16 +253,24 @@ function RecommendedProducts({
}
/>
) : null}
<s>
<Money
className="comparePrice"
data={
product?.compareAtPriceRange
?.minVariantPrice
}
/>
</s>
{priceOff ? (
{product?.priceRange?.minVariantPrice
?.amount <
product?.compareAtPriceRange?.minVariantPrice
?.amount ? (
<s>
<Money
className="comparePrice"
data={
product?.compareAtPriceRange
?.minVariantPrice
}
/>
</s>
) : (
''
)}

{priceOff > 0 ? (
<p className="comparePrice">
(${priceOff.toFixed(2)} OFF)
</p>
Expand Down
87 changes: 54 additions & 33 deletions app/routes/($locale).collections.$handle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,32 +40,47 @@ export async function loader({request, params, context}: LoaderFunctionArgs) {
export default function Collection() {
const {collection} = useLoaderData<typeof loader>();
return (
<div className="collection container">
<h1>{collection?.title}</h1>
<p className="collection-description">{collection?.description}</p>
<Pagination connection={collection?.products}>
{({nodes, isLoading, PreviousLink, NextLink}) => (
<>
<PreviousLink>
{isLoading ? 'Loading...' : <span>↑ Load previous</span>}
</PreviousLink>
<ProductsGrid products={nodes} />
<br />
<NextLink className="load-more">
{isLoading ? (
'Loading...'
) : (
<div className="center">
<span className="view-all-products load-more">
Load more ↓
</span>
</div>
)}
</NextLink>
</>
)}
</Pagination>
</div>
<>
<div className="breadcrumbs" style={{minWidth: '1600px'}}>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/collections">Collections</a>
</li>
<li>
<a>{collection.title}</a>
</li>
</ul>
</div>
<div className="collection container">
<h1>{collection?.title}</h1>
<p className="collection-description">{collection?.description}</p>
<Pagination connection={collection?.products}>
{({nodes, isLoading, PreviousLink, NextLink}) => (
<>
<PreviousLink>
{isLoading ? 'Loading...' : <span>↑ Load previous</span>}
</PreviousLink>
<ProductsGrid products={nodes} />
<br />
<NextLink className="load-more">
{isLoading ? (
'Loading...'
) : (
<div className="center">
<span className="view-all-products load-more">
Load more ↓
</span>
</div>
)}
</NextLink>
</>
)}
</Pagination>
</div>
</>
);
}

Expand Down Expand Up @@ -111,6 +126,7 @@ function ProductItem({
key={product?.id}
prefetch="intent"
to={variantUrl}
state={{previousTabUrl: '/variantUrl'}}
>
{product?.featuredImage && (
<Image
Expand All @@ -130,12 +146,18 @@ function ProductItem({
data={product?.priceRange?.minVariantPrice}
/>
) : null}
<s>
<Money
className="comparePrice"
data={product?.compareAtPriceRange?.minVariantPrice}
/>
</s>
{product?.priceRange?.minVariantPrice?.amount <
product?.compareAtPriceRange?.minVariantPrice?.amount ? (
<s>
<Money
className="comparePrice"
data={product?.compareAtPriceRange?.minVariantPrice}
/>
</s>
) : (
''
)}

{priceOff ? (
<p className="comparePrice">(${priceOff.toFixed(2)} OFF)</p>
) : (
Expand Down Expand Up @@ -189,7 +211,6 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
}
` as const;

// NOTE: https://shopify.dev/docs/api/storefront/2022-04/objects/collection
const COLLECTION_QUERY = `#graphql
${PRODUCT_ITEM_FRAGMENT}
query Collection(
Expand Down
164 changes: 93 additions & 71 deletions app/routes/($locale).collections.all.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,78 +81,100 @@ function RecommendedProducts({
cmsData: any;
}) {
return (
<Suspense fallback={<div>Loading...</div>}>
<div className="featured-wrapper container">
<div className="featured-content">
<h2 className="product-css">{cmsData?.product_title}</h2>
</div>
<div className="feature-products-grid">
{products?.map((product: any) => {
const originalPrice = parseFloat(
product?.compareAtPriceRange?.minVariantPrice?.amount,
);
const discountedPrice = parseFloat(
product?.priceRange?.minVariantPrice?.amount,
);
let priceOff;
if (
originalPrice &&
discountedPrice &&
discountedPrice < originalPrice
) {
priceOff = originalPrice - discountedPrice;
}
return (
<Fragment key={product?.id}>
<Link
className="feature-product"
to={`/products/${product?.handle}`}
>
{product?.images?.nodes[0] ? (
<Image
data={product?.images?.nodes[0]}
aspectRatio="1/1"
sizes="(min-width: 45em) 20vw, 50vw"
/>
) : (
// eslint-disable-next-line jsx-a11y/img-redundant-alt
<img
src={NoImg}
alt="No Image"
style={{height: '85% !important'}}
/>
)}
<p className="product-cta">{product?.title}</p>
<small>
<div className="product-price-on-sale">
{product?.priceRange ? (
<Money
className="price"
data={product?.priceRange?.minVariantPrice}
/>
) : null}
<s>
<Money
className="comparePrice"
data={product?.compareAtPriceRange?.minVariantPrice}
/>
</s>
{priceOff ? (
<p className="comparePrice">
(${priceOff.toFixed(2)} OFF)
</p>
) : (
''
)}
</div>
</small>
</Link>
</Fragment>
);
})}
</div>
<>
<div className="breadcrumbs" style={{minWidth: '1600px'}}>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/collections/all">Featured Products</a>
</li>
</ul>
</div>
</Suspense>
<div></div>

<Suspense fallback={<div>Loading...</div>}>
<div className="featured-wrapper container">
<div className="featured-content">
<h2 className="product-css">{cmsData?.product_title}</h2>
</div>
<div className="feature-products-grid">
{products?.map((product: any) => {
const originalPrice = parseFloat(
product?.compareAtPriceRange?.minVariantPrice?.amount,
);
const discountedPrice = parseFloat(
product?.priceRange?.minVariantPrice?.amount,
);
let priceOff;
if (
originalPrice &&
discountedPrice &&
discountedPrice < originalPrice
) {
priceOff = originalPrice - discountedPrice;
}
return (
<Fragment key={product?.id}>
<Link
className="feature-product"
to={`/products/${product?.handle}`}
>
{product?.images?.nodes[0] ? (
<Image
data={product?.images?.nodes[0]}
aspectRatio="1/1"
sizes="(min-width: 45em) 20vw, 50vw"
/>
) : (
// eslint-disable-next-line jsx-a11y/img-redundant-alt
<img
src={NoImg}
alt="No Image"
style={{height: '85% !important'}}
/>
)}
<p className="product-cta">{product?.title}</p>
<small>
<div className="product-price-on-sale">
{product?.priceRange ? (
<Money
className="price"
data={product?.priceRange?.minVariantPrice}
/>
) : null}
{product?.priceRange?.minVariantPrice?.amount <
product?.compareAtPriceRange?.minVariantPrice
?.amount ? (
<s>
<Money
className="comparePrice"
data={
product?.compareAtPriceRange?.minVariantPrice
}
/>
</s>
) : (
''
)}
{priceOff >0? (
<p className="comparePrice">
(${priceOff.toFixed(2)} OFF)
</p>
) : (
''
)}
</div>
</small>
</Link>
</Fragment>
);
})}
</div>
</div>
</Suspense>
</>
);
}

Expand Down
Loading

0 comments on commit 7bc2e8d

Please sign in to comment.