Skip to content

Commit 5259c33

Browse files
w3bdesignw3bdesign
committed
Fix price padding
1 parent 11011f3 commit 5259c33

File tree

4 files changed

+116
-91
lines changed

4 files changed

+116
-91
lines changed

‎components/Cart/CartPage/CartItem.component.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const CartItem = ({
6868
</td>
6969
<td className="px-4 py-2 border">{item.name}</td>
7070
<td className="px-4 py-2 border">
71-
kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
71+
kr {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
7272
</td>
7373
<td className="px-4 py-2 border">
7474
<input

‎components/Checkout/OrderDetailsCartItem.component.jsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
1-
const OrderDetailsCartItem = ({ item }) => (
2-
<tr className="bg-gray-100">
3-
<td className="px-0 py-2 border sm:px-4 md:px-4 lg:px-4 xl:px-4">
4-
<img
5-
className="hidden sm:block md:block lg:block xl:block"
6-
width="64"
7-
src={item.image.sourceUrl}
8-
srcSet={item.image.srcSet}
9-
alt={item.image.title}
10-
/>
11-
</td>
1+
import { paddedPrice } from 'utils/functions/functions';
122

13-
<td className="px-4 py-2 border">{item.name}</td>
3+
const OrderDetailsCartItem = ({ item }) => {
4+
const totalPrice = paddedPrice(item.totalPrice, 'kr');
5+
return (
6+
<tr className="bg-gray-100">
7+
<td className="px-0 py-2 border sm:px-4 md:px-4 lg:px-4 xl:px-4">
8+
<img
9+
className="hidden sm:block md:block lg:block xl:block"
10+
width="64"
11+
src={item.image.sourceUrl}
12+
srcSet={item.image.srcSet}
13+
alt={item.image.title}
14+
/>
15+
</td>
1416

15-
<td className="px-4 py-2 border">
16-
kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
17-
</td>
17+
<td className="px-4 py-2 border">{item.name}</td>
1818

19-
<td className="px-4 py-2 border">{item.qty}</td>
19+
<td className="px-4 py-2 border">
20+
kr {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
21+
</td>
2022

21-
<td className="px-4 py-2 border">
22-
{'string' !== typeof item.totalPrice
23-
? item.totalPrice.toFixed(2)
24-
: item.totalPrice}
25-
</td>
26-
</tr>
27-
);
23+
<td className="px-4 py-2 border">{item.qty}</td>
24+
25+
<td className="px-4 py-2 border">
26+
{'string' !== typeof item.totalPrice
27+
? totalPrice.toFixed(2)
28+
: totalPrice}
29+
</td>
30+
</tr>
31+
);
32+
};
2833

2934
export default OrderDetailsCartItem;

‎components/Product/IndexProducts.component.jsx‎

Lines changed: 73 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -24,73 +24,82 @@ const IndexProducts = ({ products }) => {
2424
slug,
2525
image,
2626
variations,
27-
}) => (
28-
<div
29-
key={uuidv4()}
30-
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
31-
>
32-
<Link
33-
href={`/produkt/${encodeURIComponent(
34-
slug
35-
)}?id=${encodeURIComponent(databaseId)}`}
36-
>
37-
<a>
38-
{image ? (
39-
<img
40-
id="product-image"
41-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
42-
alt={name}
43-
src={image.sourceUrl}
44-
/>
45-
) : (
46-
<img
47-
id="product-image"
48-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
49-
alt={name}
50-
src={
51-
process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
52-
}
53-
/>
54-
)}
55-
</a>
56-
</Link>
27+
}) => {
28+
// Add padding/empty character after currency symbol here
29+
if (price) {
30+
price = paddedPrice(price, 'kr');
31+
}
32+
if (regularPrice) {
33+
regularPrice = paddedPrice(regularPrice, 'kr');
34+
}
35+
if (salePrice) {
36+
salePrice = paddedPrice(salePrice, 'kr');
37+
}
5738

58-
<Link
59-
href={`/produkt/${encodeURIComponent(
60-
slug
61-
)}?id=${encodeURIComponent(databaseId)}`}
39+
return (
40+
<div
41+
key={uuidv4()}
42+
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
6243
>
63-
<a>
64-
<div className="flex justify-center pt-3">
65-
<p className="font-bold text-center cursor-pointer">
66-
{name}
67-
</p>
68-
</div>
69-
</a>
70-
</Link>
71-
{/* Display sale price when on sale */}
72-
{onSale && (
73-
<div className="flex justify-center">
74-
<div className="pt-1 text-gray-900">
75-
{variations &&
76-
filteredVariantPrice(paddedPrice(price, 'kr'))}
77-
{!variations && paddedPrice(salePrice, 'kr')}
78-
</div>
79-
<div className="pt-1 ml-2 text-gray-900 line-through">
80-
{variations &&
81-
filteredVariantPrice(paddedPrice(price, 'kr'), 'right')}
82-
{!variations && paddedPrice(regularPrice, 'kr')}
44+
<Link
45+
href={`/produkt/${encodeURIComponent(
46+
slug
47+
)}?id=${encodeURIComponent(databaseId)}`}
48+
>
49+
<a>
50+
{image ? (
51+
<img
52+
id="product-image"
53+
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
54+
alt={name}
55+
src={image.sourceUrl}
56+
/>
57+
) : (
58+
<img
59+
id="product-image"
60+
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
61+
alt={name}
62+
src={
63+
process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
64+
}
65+
/>
66+
)}
67+
</a>
68+
</Link>
69+
70+
<Link
71+
href={`/produkt/${encodeURIComponent(
72+
slug
73+
)}?id=${encodeURIComponent(databaseId)}`}
74+
>
75+
<a>
76+
<div className="flex justify-center pt-3">
77+
<p className="font-bold text-center cursor-pointer">
78+
{name}
79+
</p>
80+
</div>
81+
</a>
82+
</Link>
83+
{/* Display sale price when on sale */}
84+
{onSale && (
85+
<div className="flex justify-center">
86+
<div className="pt-1 text-gray-900">
87+
{variations && filteredVariantPrice(price)}
88+
{!variations && salePrice}
89+
</div>
90+
<div className="pt-1 ml-2 text-gray-900 line-through">
91+
{variations && filteredVariantPrice(price, 'right')}
92+
{!variations && regularPrice}
93+
</div>
8394
</div>
84-
</div>
85-
)}
86-
{/* Display regular price when not on sale */}
87-
{!onSale && (
88-
<p className="pt-1 text-center text-gray-900">
89-
{paddedPrice(price, 'kr')}
90-
</p>
91-
)}
92-
</div>
93-
)
95+
)}
96+
{/* Display regular price when not on sale */}
97+
{!onSale && (
98+
<p className="pt-1 text-center text-gray-900">{price}</p>
99+
)}
100+
</div>
101+
);
102+
}
94103
)
95104
) : (
96105
<div className="mx-auto text-xl font-bold text-center text-gray-800 no-underline uppercase">

‎components/Product/SingleProduct.component.jsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
33
import AddToCartButton from 'components/Cart/AddToCartButton.component';
44
import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
55

6-
import { filteredVariantPrice } from 'utils/functions/functions';
6+
import { filteredVariantPrice, paddedPrice } from 'utils/functions/functions';
77

88
/**
99
* Shows a single product with an Add To Cart button.
@@ -20,11 +20,22 @@ const SingleProduct = ({ product }) => {
2020
const firstVariant = product.variations.nodes[0].databaseId;
2121
setselectedVariation(firstVariant);
2222
}
23-
}, []);
23+
}, [product.variations]);
2424

25-
const { description, image, name, onSale, price, regularPrice, salePrice } =
25+
let { description, image, name, onSale, price, regularPrice, salePrice } =
2626
product;
2727

28+
// Add padding/empty character after currency symbol here
29+
if (price) {
30+
price = paddedPrice(price, 'kr');
31+
}
32+
if (regularPrice) {
33+
regularPrice = paddedPrice(regularPrice, 'kr');
34+
}
35+
if (salePrice) {
36+
salePrice = paddedPrice(salePrice, 'kr');
37+
}
38+
2839
// Strip out HTML from description
2940
const DESCRIPTION_WITHOUT_HTML = description.replace(/(<([^>]+)>)/gi, '');
3041

0 commit comments

Comments
 (0)