Skip to content

Commit 888eed7

Browse files
w3bdesignw3bdesign
authored
Merge pull request #841 from w3bdesign/develop
Fix price formatting with symbol
2 parents 234a29d + c64ee9b commit 888eed7

File tree

7 files changed

+159
-117
lines changed

7 files changed

+159
-117
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ The current release has been tested and is confirmed working with the following
7474
- Placeholder for products without images
7575
- Apollo Client with GraphQL
7676
- React Hook Form with form validation and error display
77-
- Animations with Framer Motion and Animate.css
77+
- Animations with Framer motion, Styled components and Animate.css
7878
- Loading spinner created with Styled Components
7979
- Shows page load progress with Nprogress during navigation
8080
- Fully responsive design

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useState } from 'react';
44
import { v4 as uuidv4 } from 'uuid';
55

66
import SVGX from 'components/SVG/SVGX.component';
7-
import { getUpdatedItems } from 'utils/functions/functions';
7+
import { getUpdatedItems, paddedPrice } from 'utils/functions/functions';
88

99
const CartItem = ({
1010
item,
@@ -14,6 +14,7 @@ const CartItem = ({
1414
updateCartProcessing,
1515
}) => {
1616
const [productCount, setProductCount] = useState(item.qty);
17+
const totalPrice = paddedPrice(item.totalPrice, 'kr');
1718

1819
/*
1920
* When user changes the quantity, update the cart in localStorage
@@ -68,7 +69,7 @@ const CartItem = ({
6869
</td>
6970
<td className="px-4 py-2 border">{item.name}</td>
7071
<td className="px-4 py-2 border">
71-
kr{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
72+
kr {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
7273
</td>
7374
<td className="px-4 py-2 border">
7475
<input
@@ -81,8 +82,8 @@ const CartItem = ({
8182
</td>
8283
<td className="px-4 py-2 border">
8384
{'string' !== typeof item.totalPrice
84-
? item.totalPrice.toFixed(2)
85-
: item.totalPrice}
85+
? totalPrice.toFixed(2)
86+
: totalPrice}
8687
</td>
8788
</tr>
8889
);

‎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: 100 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,114 @@
11
import Link from 'next/link';
22
import { v4 as uuidv4 } from 'uuid';
33

4-
import { filteredVariantPrice } from 'utils/functions/functions';
4+
import { filteredVariantPrice, paddedPrice } from 'utils/functions/functions';
55

66
/**
77
* Displays all of the products as long as length is defined.
88
* Does a map() over the props array and utilizes uuidv4 for unique key values.
99
* @param {Object} products
1010
*/
11-
const IndexProducts = ({ products }) => (
12-
<section className="container mx-auto bg-white">
13-
<div id="product-container" className="flex flex-wrap items-center">
14-
{products ? (
15-
products.map(
16-
({
17-
databaseId,
18-
name,
19-
price,
20-
regularPrice,
21-
salePrice,
22-
onSale,
23-
slug,
24-
image,
25-
variations,
26-
}) => (
27-
<div key={uuidv4()} className="flex flex-col p-6 md:w-1/2 xl:w-1/4">
28-
<Link
29-
href={`/produkt/${encodeURIComponent(
30-
slug
31-
)}?id=${encodeURIComponent(databaseId)}`}
32-
>
33-
<a>
34-
{image ? (
35-
<img
36-
id="product-image"
37-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
38-
alt={name}
39-
src={image.sourceUrl}
40-
/>
41-
) : (
42-
<img
43-
id="product-image"
44-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
45-
alt={name}
46-
src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
47-
/>
48-
)}
49-
</a>
50-
</Link>
11+
const IndexProducts = ({ products }) => {
12+
return (
13+
<section className="container mx-auto bg-white">
14+
<div id="product-container" className="flex flex-wrap items-center">
15+
{products ? (
16+
products.map(
17+
({
18+
databaseId,
19+
name,
20+
price,
21+
regularPrice,
22+
salePrice,
23+
onSale,
24+
slug,
25+
image,
26+
variations,
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+
}
38+
39+
return (
40+
<div
41+
key={uuidv4()}
42+
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
43+
>
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>
5169

52-
<Link
53-
href={`/produkt/${encodeURIComponent(
54-
slug
55-
)}?id=${encodeURIComponent(databaseId)}`}
56-
>
57-
<a>
58-
<div className="flex justify-center pt-3">
59-
<p className="font-bold text-center cursor-pointer">
60-
{name}
61-
</p>
62-
</div>
63-
</a>
64-
</Link>
65-
{/* Display sale price when on sale */}
66-
{onSale && (
67-
<div className="flex justify-center">
68-
<div className="pt-1 text-gray-900">
69-
{variations && filteredVariantPrice(price)}
70-
{!variations && salePrice}
71-
</div>
72-
<div className="pt-1 ml-2 text-gray-900 line-through">
73-
{variations && filteredVariantPrice(price, 'right')}
74-
{!variations && regularPrice}
75-
</div>
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>
94+
</div>
95+
)}
96+
{/* Display regular price when not on sale */}
97+
{!onSale && (
98+
<p className="pt-1 text-center text-gray-900">{price}</p>
99+
)}
76100
</div>
77-
)}
78-
{/* Display regular price when not on sale */}
79-
{!onSale && (
80-
<p className="pt-1 text-center text-gray-900"> {price}</p>
81-
)}
82-
</div>
101+
);
102+
}
83103
)
84-
)
85-
) : (
86-
<div className="mx-auto text-xl font-bold text-center text-gray-800 no-underline uppercase">
87-
Ingen produkter funnet
88-
</div>
89-
)}
90-
</div>
91-
</section>
92-
);
104+
) : (
105+
<div className="mx-auto text-xl font-bold text-center text-gray-800 no-underline uppercase">
106+
Ingen produkter funnet
107+
</div>
108+
)}
109+
</div>
110+
</section>
111+
);
112+
};
93113

94114
export default IndexProducts;

‎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

‎next.config.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1 @@
1-
module.exports = {
2-
env: {
3-
ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID,
4-
ALGOLIA_PUBLIC_API_KEY: process.env.ALGOLIA_PUBLIC_API_KEY,
5-
},
6-
};
1+
module.exports = { reactStrictMode: true, poweredByHeader: false };

‎utils/functions/functions.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import { v4 as uuidv4 } from 'uuid';
22

3+
/**
4+
* Add empty character after currency symbol
5+
* @param {String} price The price string that we input
6+
* @param {String} symbol Currency symbol to add empty character/padding after
7+
*/
8+
9+
export const paddedPrice = (price, symbol) =>
10+
price.split(symbol).join(`${symbol} `);
11+
312
/**
413
* Shorten inputted string (usually product description) to a maximum of length
514
* @param {String} string The string that we input
@@ -22,6 +31,7 @@ export const filteredVariantPrice = (price, side) => {
2231
if ('right' === side) {
2332
return price.substring(price.length, price.indexOf('-')).replace('-', '');
2433
}
34+
2535
return price.substring(0, price.indexOf('-')).replace('-', '');
2636
};
2737

0 commit comments

Comments
 (0)