Skip to content

Commit e667f5a

Browse files
w3bdesignw3bdesign
authored
Merge pull request #1073 from w3bdesign/1001-refactor-code
1001 refactor code
2 parents 308a91c + 5c4490a commit e667f5a

11 files changed

+616
-497
lines changed

‎.env.example

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
PUBLIC_GRAPHQL_URL = "change me"
22
PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL = "https://via.placeholder.com/500"
3-
PUBLIC_CURRENCY_SYMBOL = "kr"
3+
PUBLIC_CURRENCY = "NOK"
4+
PUBLIC_CURRENCY_LOCALE = "nb-NO"
45
ALGOLIA_APPLICATION_ID = "change me"
56
ALGOLIA_API_KEY = "change me"
67
ALGOLIA_INDEX_NAME = "change me"

‎components/Layout/LayoutCart.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{{ cartLength }}
3838
</span>
3939
<span class="text-white lg:text-black"
40-
>Total: {{ config.currencySymbol }} {{ subTotal }}</span
40+
>Total: {{ config.public.currencySymbol }} {{ subTotal }}</span
4141
>
4242
</div>
4343
</transition>

‎components/Products/ProductImage.vue

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<img
3+
id="product-image"
4+
class="h-auto p-8 transition duration-500 ease-in-out transform md:p-0 hover:shadow-lg hover:scale-95"
5+
:alt="alt"
6+
:src="displayedImage"
7+
:width="width"
8+
:height="height"
9+
/>
10+
</template>
11+
12+
<script setup>
13+
import { computed } from "vue";
14+
15+
const props = defineProps({
16+
alt: { type: String, required: true },
17+
src: { type: String, required: true },
18+
width: { type: String, required: false },
19+
height: { type: String, required: false },
20+
});
21+
22+
const config = useRuntimeConfig();
23+
24+
const displayedImage = computed(() => {
25+
return props.src || config.public.placeholderImage;
26+
});
27+
</script>

‎components/Products/ProductPrice.vue

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div>
3+
<div
4+
v-if="onSale"
5+
class="flex"
6+
:class="shouldCenterPrice ? 'justify-center' : ''"
7+
>
8+
<p class="pt-1 mt-4 text-gray-900" :class="getFontSizeClass">
9+
{{ formatPrice(displayPrice) }}
10+
</p>
11+
<p
12+
class="pt-1 pl-4 mt-4 text-gray-900 line-through"
13+
:class="getSaleFontSizeClass"
14+
>
15+
{{ formatPrice(basePrice) }}
16+
</p>
17+
</div>
18+
<p
19+
v-else
20+
class="flex pt-1 mt-4 text-2xl text-gray-900"
21+
:class="shouldCenterPrice ? 'justify-center' : ''"
22+
>
23+
{{ formatPrice(displayPrice) }}
24+
</p>
25+
</div>
26+
</template>
27+
28+
<script setup>
29+
import { computed } from "vue";
30+
import {
31+
formatPrice,
32+
filteredVariantPrice,
33+
hasVariations,
34+
} from "@/utils/functions";
35+
36+
const props = defineProps({
37+
product: Object,
38+
priceFontSize: String,
39+
shouldCenterPrice: Boolean,
40+
});
41+
42+
const onSale = computed(() => props.product.onSale);
43+
44+
const productHasVariations = computed(() => hasVariations(props.product));
45+
46+
const basePrice = computed(() => {
47+
if (productHasVariations.value) {
48+
return filteredVariantPrice(props.product.price);
49+
} else {
50+
return props.product.regularPrice;
51+
}
52+
});
53+
54+
const displayPrice = computed(() => {
55+
if (onSale.value) {
56+
return productHasVariations.value
57+
? filteredVariantPrice(props.product.price)
58+
: props.product.salePrice;
59+
} else {
60+
return props.product.price;
61+
}
62+
});
63+
64+
const getFontSizeClass = computed(() => {
65+
switch (props.priceFontSize) {
66+
case "small":
67+
return "text-lg";
68+
case "normal":
69+
return "text-2xl";
70+
case "big":
71+
return "text-2xl";
72+
default:
73+
return "text-xl";
74+
}
75+
});
76+
77+
const getSaleFontSizeClass = computed(() => {
78+
switch (props.priceFontSize) {
79+
case "small":
80+
return "text-lg";
81+
case "normal":
82+
return "text-xl";
83+
case "big":
84+
return "text-xl";
85+
default:
86+
return "text-xl";
87+
}
88+
});
89+
</script>

‎components/Products/ProductsShowAll.vue

+18-54
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div v-if="allCategoryProducts?.productCategory?.products?.nodes">
2+
<template v-if="allCategoryProducts?.productCategory?.products?.nodes">
33
<section>
44
<div id="product-container" class="flex flex-wrap items-center">
55
<template
@@ -17,42 +17,24 @@
1717
query: { id: product.databaseId },
1818
}"
1919
>
20-
<img
21-
id="product-image"
22-
class="p-8 border mx-auto w-4/5 border-gray-200 rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:ml-0 lg:w-full lg:p-2 hover:scale-95"
23-
:alt="product.name"
24-
:src="productImage(product)"
25-
/>
20+
<ProductImage :alt="product.name" :src="productImage(product)" />
21+
2622
<div class="flex justify-center pt-3">
2723
<p class="text-2xl font-bold text-center cursor-pointer">
2824
{{ product.name }}
2925
</p>
3026
</div>
3127
</NuxtLink>
32-
<div v-if="product.onSale" class="flex justify-center mt-2">
33-
<div class="text-lg text-gray-900 line-through">
34-
<span v-if="product.variations">
35-
{{ filteredVariantPrice(product.price, "right") }}</span
36-
>
37-
<span v-else>{{ product.regularPrice }}</span>
38-
</div>
39-
<div class="ml-4 text-xl text-gray-900">
40-
<span v-if="product.variations">
41-
{{ filteredVariantPrice(product.price) }}</span
42-
>
43-
<span v-else>{{ product.salePrice }}</span>
44-
</div>
45-
</div>
46-
<div v-else>
47-
<p class="mt-2 text-xl text-center text-gray-900">
48-
{{ product.price }}
49-
</p>
50-
</div>
28+
<ProductPrice
29+
:product="product"
30+
priceFontSize="normal"
31+
:shouldCenterPrice="true"
32+
/>
5133
</div>
5234
</template>
5335
</div>
5436
</section>
55-
</div>
37+
</template>
5638
<div v-else>
5739
<section>
5840
<div id="product-container" class="flex flex-wrap items-center">
@@ -69,37 +51,18 @@
6951
query: { id: product.databaseId },
7052
}"
7153
>
72-
<img
73-
id="product-image"
74-
class="p-8 border mx-auto w-4/5 border-gray-200 rounded drop-shadow-lg transition duration-500 ease-in-out transform cursor-pointer lg:ml-0 lg:w-full lg:p-2 hover:scale-95"
75-
:alt="product.name"
76-
:src="productImage(product)"
77-
/>
54+
<ProductImage :alt="product.name" :src="productImage(product)" />
7855
<div class="flex justify-center pt-3">
7956
<p class="text-2xl font-bold text-center cursor-pointer">
8057
{{ product.name }}
8158
</p>
8259
</div>
8360
</NuxtLink>
84-
<div v-if="product.onSale" class="flex justify-center mt-2">
85-
<div class="text-lg text-gray-900 line-through">
86-
<span v-if="product.variations">
87-
{{ filteredVariantPrice(product.price, "right") }}</span
88-
>
89-
<span v-else>{{ product.regularPrice }}</span>
90-
</div>
91-
<div class="ml-4 text-xl text-gray-900">
92-
<span v-if="product.variations">
93-
{{ filteredVariantPrice(product.price) }}</span
94-
>
95-
<span v-else>{{ product.salePrice }}</span>
96-
</div>
97-
</div>
98-
<div v-else>
99-
<p class="mt-2 text-xl text-center text-gray-900">
100-
{{ product.price }}
101-
</p>
102-
</div>
61+
<ProductPrice
62+
:product="product"
63+
priceFontSize="normal"
64+
:shouldCenterPrice="true"
65+
/>
10366
</div>
10467
</template>
10568
</div>
@@ -111,7 +74,8 @@
11174
import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
11275
import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
11376
114-
import { filteredVariantPrice } from "@/utils/functions";
77+
import ProductImage from "@/components/Products/ProductImage.vue";
78+
import ProductPrice from "@/components/Products/ProductPrice.vue";
11579
11680
const props = defineProps({
11781
categoryId: { type: String, required: false },
@@ -121,7 +85,7 @@ const props = defineProps({
12185
const config = useRuntimeConfig();
12286
12387
const productImage = (product) =>
124-
product.image ? product.image.sourceUrl : config.placeholderImage;
88+
product.image ? product.image.sourceUrl : config.public.placeholderImage;
12589
12690
const productVariables = { limit: 99 };
12791
const { data: allProducts } = await useAsyncQuery(

0 commit comments

Comments
 (0)