Skip to content

Commit 1fa34d4

Browse files
w3bdesignw3bdesign
committed
Add price symbol padding
1 parent 463f7b2 commit 1fa34d4

File tree

3 files changed

+102
-87
lines changed

3 files changed

+102
-87
lines changed

‎components/Product/IndexProducts.component.jsx

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,103 @@
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)}`}
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+
<div
29+
key={uuidv4()}
30+
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
3231
>
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>
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>
5157

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}
58+
<Link
59+
href={`/produkt/${encodeURIComponent(
60+
slug
61+
)}?id=${encodeURIComponent(databaseId)}`}
62+
>
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 && filteredVariantPrice(price)}
76+
{!variations && paddedPrice(salePrice)}
77+
</div>
78+
<div className="pt-1 ml-2 text-gray-900 line-through">
79+
{variations && filteredVariantPrice(price, 'right')}
80+
{!variations && paddedPrice(regularPrice)}
81+
</div>
7582
</div>
76-
</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>
83+
)}
84+
{/* Display regular price when not on sale */}
85+
{!onSale && (
86+
<p className="pt-1 text-center text-gray-900">
87+
{paddedPrice(price)}
88+
</p>
89+
)}
90+
</div>
91+
)
8392
)
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-
);
93+
) : (
94+
<div className="mx-auto text-xl font-bold text-center text-gray-800 no-underline uppercase">
95+
Ingen produkter funnet
96+
</div>
97+
)}
98+
</div>
99+
</section>
100+
);
101+
};
93102

94103
export default IndexProducts;

‎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: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
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+
*/
7+
8+
export const paddedPrice = (price) => price.split('kr').join('kr ');
9+
310
/**
411
* Shorten inputted string (usually product description) to a maximum of length
512
* @param {String} string The string that we input
@@ -20,9 +27,13 @@ export const trimmedStringToLength = (string, length) => {
2027
*/
2128
export const filteredVariantPrice = (price, side) => {
2229
if ('right' === side) {
23-
return price.substring(price.length, price.indexOf('-')).replace('-', '');
30+
return paddedPrice(price)
31+
.substring(paddedPrice(price).length, paddedPrice(price).indexOf('-'))
32+
.replace('-', '');
33+
//return price.substring(price.length, price.indexOf('-')).replace('-', '');
2434
}
25-
return price.substring(0, price.indexOf('-')).replace('-', '');
35+
36+
return paddedPrice(price).substring(0, price.indexOf('-')).replace('-', '');
2637
};
2738

2839
/**

0 commit comments

Comments
 (0)