Skip to content

Commit b1af793

Browse files
w3bdesignw3bdesign
authored
Merge pull request #1074 from w3bdesign/1001-refactor-code
1001 refactor code
2 parents e667f5a + ada6b78 commit b1af793

File tree

10 files changed

+160
-162
lines changed

10 files changed

+160
-162
lines changed

‎.github/dependabot.yml‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎components/Checkout/CheckoutForm.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,20 @@ import { BILLING_FIELDS, BILLING_SCHEMA } from "./constants/BILLING_FIELDS";
4141
4242
import CHECKOUT_MUTATION from "@/apollo/mutations/CHECKOUT_MUTATION.gql";
4343
44+
/**
45+
* Returns an input string with its first character capitalized.
46+
*
47+
* @param {string} input - The string to capitalize the first character of.
48+
* @return {string} The input string with the first character capitalized.
49+
*/
4450
const upperCaseFirstChar = (input) =>
4551
input.charAt(0).toUpperCase() + input.slice(1);
4652
4753
const paymentMethod = "cod";
4854
55+
/**
56+
* Handles the submission of a checkout form with the provided user information.
57+
*/
4958
const handleSubmit = ({
5059
firstName,
5160
lastName,

‎components/Layout/LayoutNavItem.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<ul>
3+
<li class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4">
4+
<NuxtLink :to="to">
5+
<span class="text-xl text-white no-underline lg:text-black">
6+
{{ label }}
7+
</span>
8+
</NuxtLink>
9+
</li>
10+
</ul>
11+
</template>
12+
13+
<script setup>
14+
const props = defineProps({
15+
to: {
16+
type: String,
17+
required: true,
18+
},
19+
label: {
20+
type: String,
21+
required: true,
22+
},
23+
});
24+
</script>

‎components/Layout/LayoutNavbar.vue‎

Lines changed: 50 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,62 @@
11
<template>
2-
<div>
3-
<header
4-
role="banner"
5-
class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
6-
>
7-
<div class="flex flex-wrap lg:px-4">
8-
<div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
9-
<div class="ml-4 lg:ml-0">
10-
<img
11-
alt="Logo"
12-
class="h-20 lg:h-24"
13-
aria-label="Nettbutikk logo"
14-
src="~/assets/svg/Logo.svg"
15-
/>
16-
</div>
2+
<header
3+
role="banner"
4+
class="container flex flex-col justify-center px-0 pt-6 mx-auto mb-6"
5+
>
6+
<div class="flex flex-wrap lg:px-4">
7+
<div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
8+
<div class="ml-4 lg:ml-0">
9+
<img
10+
alt="Logo"
11+
class="h-20 lg:h-24"
12+
aria-label="Nettbutikk logo"
13+
src="~/assets/svg/Logo.svg"
14+
/>
1715
</div>
18-
<LayoutMobileMenu />
19-
<div class="hidden lg:w-1/12 lg:block" />
20-
<div
21-
id="nav-content"
22-
class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
23-
>
24-
<div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
25-
<div>
26-
<nav
27-
id="block-main"
28-
role="navigation"
29-
aria-labelledby="block-main-menu"
16+
</div>
17+
<LayoutMobileMenu />
18+
<div class="hidden lg:w-1/12 lg:block" />
19+
<div
20+
id="nav-content"
21+
class="hidden w-full mt-4 bg-black lg:w-8/12 lg:block lg:bg-white lg:mt-0 lg:text-right"
22+
>
23+
<div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
24+
<div>
25+
<nav
26+
id="block-main"
27+
role="navigation"
28+
aria-labelledby="block-main-menu"
29+
>
30+
<ul
31+
class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
3032
>
31-
<ul
32-
class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
33+
<NavItem to="/" label="Home" />
34+
<NavItem to="/products" label="Products" />
35+
<NavItem to="/categories" label="Categories" />
36+
<NavItem to="/search" label="Search" />
37+
<li
38+
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
3339
>
34-
<li
35-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
36-
>
37-
<NuxtLink to="/">
38-
<span
39-
class="text-xl text-white no-underline lg:text-black is-active"
40-
>
41-
Home
42-
</span>
43-
</NuxtLink>
44-
</li>
45-
<li
46-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
47-
>
48-
<NuxtLink to="/products">
49-
<span
50-
class="text-xl text-white no-underline lg:text-black"
51-
>Products</span
52-
>
53-
</NuxtLink>
54-
</li>
55-
<li
56-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
57-
>
58-
<NuxtLink to="/categories">
59-
<span
60-
class="text-xl text-white no-underline lg:text-black is-active"
61-
>Categories</span
62-
>
63-
</NuxtLink>
64-
</li>
65-
<li
66-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
67-
>
68-
<NuxtLink to="/search">
69-
<span
70-
class="text-xl text-white no-underline lg:text-black is-active"
71-
>Search</span
72-
>
73-
</NuxtLink>
74-
</li>
75-
<li
76-
class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
77-
>
78-
<LayoutCart />
79-
</li>
80-
</ul>
81-
</nav>
82-
</div>
40+
<LayoutCart />
41+
</li>
42+
</ul>
43+
</nav>
8344
</div>
8445
</div>
8546
</div>
86-
</header>
87-
</div>
47+
</div>
48+
</header>
8849
</template>
8950

51+
<script setup>
52+
/**
53+
*
54+
* Vue.js template for a header section of a web page.
55+
*
56+
*/
57+
import NavItem from "@/components/Layout/LayoutNavItem.vue";
58+
</script>
59+
9060
<style scoped>
9161
header {
9262
max-width: 1400px;

‎components/Products/ProductImage.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,17 @@
1010
</template>
1111

1212
<script setup>
13+
/**
14+
* Vue.js component for displaying an image with configurable properties.
15+
*
16+
* @param {Object} props - Object containing the component's properties.
17+
* @param {String} props.alt - The alt text for the image (required).
18+
* @param {String} props.src - The source URL for the image (required).
19+
* @param {String} [props.width] - The width of the image.
20+
* @param {String} [props.height] - The height of the image.
21+
* @returns {Object} The Vue.js component object.
22+
*/
23+
1324
import { computed } from "vue";
1425
1526
const props = defineProps({

‎components/Products/ProductPrice.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@
2626
</template>
2727

2828
<script setup>
29+
/**
30+
* Displays the price of a product, with support for sale prices and variations.
31+
*
32+
* @param {Object} props - The component props.
33+
* @param {Object} props.product - The product to display the price for.
34+
* @param {string} [props.priceFontSize="normal"] - The font size for the price display.
35+
* @param {boolean} [props.shouldCenterPrice=false] - Whether to center the price display.
36+
*/
2937
import { computed } from "vue";
3038
import {
3139
formatPrice,

‎components/Products/ProductsShowAll.vue‎

Lines changed: 47 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,25 @@
11
<template>
2-
<template v-if="allCategoryProducts?.productCategory?.products?.nodes">
3-
<section>
4-
<div id="product-container" class="flex flex-wrap items-center">
5-
<template
6-
v-for="product in allCategoryProducts.productCategory.products.nodes"
2+
<div id="product-container" class="flex flex-wrap items-center">
3+
<template v-for="product in products" :key="product.id">
4+
<div class="flex flex-col mt-6 sm:w-1/2 md:w-1/3 lg:w-1/4 lg:mr-4">
5+
<NuxtLink
6+
class="text-black cursor-pointer hover:underline"
7+
:to="productLink(product)"
78
>
8-
<div
9-
v-if="product.slug"
10-
:key="product.id"
11-
class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
12-
>
13-
<NuxtLink
14-
class="text-black cursor-pointer hover:underline"
15-
:to="{
16-
path: '/product/' + product.slug,
17-
query: { id: product.databaseId },
18-
}"
19-
>
20-
<ProductImage :alt="product.name" :src="productImage(product)" />
21-
22-
<div class="flex justify-center pt-3">
23-
<p class="text-2xl font-bold text-center cursor-pointer">
24-
{{ product.name }}
25-
</p>
26-
</div>
27-
</NuxtLink>
28-
<ProductPrice
29-
:product="product"
30-
priceFontSize="normal"
31-
:shouldCenterPrice="true"
32-
/>
33-
</div>
34-
</template>
35-
</div>
36-
</section>
37-
</template>
38-
<div v-else>
39-
<section>
40-
<div id="product-container" class="flex flex-wrap items-center">
41-
<template v-for="product in allProducts.products.nodes">
42-
<div
43-
v-if="product.slug"
44-
:key="product.id"
45-
class="flex flex-col mt-6 sm:w1/2 md:w-1/3 lg:w-1/4 lg:mr-4"
46-
>
47-
<NuxtLink
48-
class="text-black cursor-pointer hover:underline"
49-
:to="{
50-
path: '/product/' + product.slug,
51-
query: { id: product.databaseId },
52-
}"
53-
>
54-
<ProductImage :alt="product.name" :src="productImage(product)" />
55-
<div class="flex justify-center pt-3">
56-
<p class="text-2xl font-bold text-center cursor-pointer">
57-
{{ product.name }}
58-
</p>
59-
</div>
60-
</NuxtLink>
61-
<ProductPrice
62-
:product="product"
63-
priceFontSize="normal"
64-
:shouldCenterPrice="true"
65-
/>
9+
<ProductImage :alt="product.name" :src="productImage(product)" />
10+
<div class="flex justify-center pt-3">
11+
<p class="text-2xl font-bold text-center cursor-pointer">
12+
{{ product.name }}
13+
</p>
6614
</div>
67-
</template>
15+
</NuxtLink>
16+
<ProductPrice
17+
:product="product"
18+
priceFontSize="normal"
19+
:shouldCenterPrice="true"
20+
/>
6821
</div>
69-
</section>
22+
</template>
7023
</div>
7124
</template>
7225

@@ -84,6 +37,35 @@ const props = defineProps({
8437
8538
const config = useRuntimeConfig();
8639
40+
const products = computed(() => {
41+
return (
42+
allCategoryProducts.value?.productCategory?.products?.nodes ||
43+
allProducts.value?.products?.nodes ||
44+
[]
45+
);
46+
});
47+
48+
/**
49+
* Returns the path and query parameters for a product link.
50+
*
51+
* @param {Object} product - Object containing product information.
52+
* @param {string} product.slug - The product's URL slug.
53+
* @param {number} product.databaseId - The product's database ID.
54+
* @return {Object} An object containing the product's path and query parameters.
55+
*/
56+
const productLink = (product) => {
57+
return {
58+
path: "/product/" + product.slug,
59+
query: { id: product.databaseId },
60+
};
61+
};
62+
63+
/**
64+
* Returns the source URL of a product image or a placeholder image if the product does not have an image.
65+
*
66+
* @param {Object} product - The product object containing the image source URL.
67+
* @return {string} The source URL of the product image or a placeholder image if the product does not have an image.
68+
*/
8769
const productImage = (product) =>
8870
product.image ? product.image.sourceUrl : config.public.placeholderImage;
8971

‎components/Products/ProductsSingleProduct.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
7878
watch(
7979
() => data.value,
8080
(dataValue) => {
81-
if (dataValue && dataValue.product.variations.nodes.length > 0) {
82-
selectedVariation.value = dataValue.product.variations.nodes[0].databaseId;
81+
if (dataValue && dataValue.product?.variations?.nodes?.length > 0) {
82+
selectedVariation.value = dataValue.product?.variations?.nodes[0].databaseId;
8383
}
8484
},
8585
{ immediate: true }

0 commit comments

Comments
 (0)