diff --git a/src/components/Product/DisplayProducts.component.tsx b/src/components/Product/DisplayProducts.component.tsx index 50cc5b977..d6b75eef1 100644 --- a/src/components/Product/DisplayProducts.component.tsx +++ b/src/components/Product/DisplayProducts.component.tsx @@ -108,7 +108,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => ( >
-

+

{name}

@@ -117,17 +117,17 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
{onSale ? (
- + {variations && filteredVariantPrice(price, '')} {!variations && salePrice} - + {variations && filteredVariantPrice(price, 'right')} {!variations && regularPrice}
) : ( - + {price} )} diff --git a/src/components/Product/ProductCard.component.tsx b/src/components/Product/ProductCard.component.tsx index 1635ea597..77f535b57 100644 --- a/src/components/Product/ProductCard.component.tsx +++ b/src/components/Product/ProductCard.component.tsx @@ -1,10 +1,14 @@ import Link from 'next/link'; import Image from 'next/image'; +import { paddedPrice } from '@/utils/functions/functions'; interface ProductCardProps { databaseId: number; name: string; price: string; + regularPrice: string; + salePrice?: string; + onSale: boolean; slug: string; image?: { sourceUrl?: string; @@ -15,9 +19,17 @@ const ProductCard = ({ databaseId, name, price, + regularPrice, + salePrice, + onSale, slug, image, }: ProductCardProps) => { + // Add padding/empty character after currency symbol + const formattedPrice = price ? paddedPrice(price, 'kr') : price; + const formattedRegularPrice = regularPrice ? paddedPrice(regularPrice, 'kr') : regularPrice; + const formattedSalePrice = salePrice ? paddedPrice(salePrice, 'kr') : salePrice; + return (
@@ -41,13 +53,20 @@ const ProductCard = ({
-

+

{name}

- {price} + {onSale ? ( +
+ {formattedSalePrice} + {formattedRegularPrice} +
+ ) : ( + {formattedPrice} + )}
); diff --git a/src/components/Product/ProductList.component.tsx b/src/components/Product/ProductList.component.tsx index f2e04a849..836d1e37e 100644 --- a/src/components/Product/ProductList.component.tsx +++ b/src/components/Product/ProductList.component.tsx @@ -71,6 +71,9 @@ const ProductList = ({ products, title }: ProductListProps) => { databaseId={product.databaseId} name={product.name} price={product.price} + regularPrice={product.regularPrice} + salePrice={product.salePrice} + onSale={product.onSale} slug={product.slug} image={product.image} /> diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx index 964ad5320..5d1368b88 100644 --- a/src/components/Product/SingleProduct.component.tsx +++ b/src/components/Product/SingleProduct.component.tsx @@ -83,7 +83,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
{onSale ? (
-

+

{product.variations ? filteredVariantPrice(price, '') : salePrice}