Skip to content

Commit 57ddd71

Browse files
w3bdesignw3bdesign
committed
.
1 parent c1a3062 commit 57ddd71

File tree

5 files changed

+108
-141
lines changed

5 files changed

+108
-141
lines changed

‎components/Cart/CartContents.vue

Lines changed: 15 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<template v-if="data.cart?.contents?.nodes?.length">
2+
<div v-if="cartItems.length">
33
<h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
44
<section class="mt-10">
55
<CartItem
6-
v-for="product in data.cart.contents.nodes"
7-
:key="product.id"
6+
v-for="product in cartItems"
7+
:key="product.key"
88
:product="product"
99
@remove="handleRemoveProduct"
1010
/>
1111
</section>
12-
<CommonButton link-to="/checkout" v-if="showCheckoutButton" center-button>
12+
<CommonButton link-to="/checkout" center-button>
1313
CHECKOUT
1414
</CommonButton>
15-
</template>
15+
</div>
1616
<h2 v-else class="mt-64 text-3xl text-center">Cart is currently empty</h2>
1717
</template>
1818

@@ -21,55 +21,28 @@
2121
* Vue.js component for handling the logic of removing a product from the cart and updating the cart state.
2222
*
2323
* @module CartContents
24-
* @param {Object} props - Object containing the component's properties.
25-
* @param {Boolean} props.showCheckoutButton - Determines whether the checkout button should be shown or not.
2624
* @returns {Object} The Vue.js component object.
2725
*/
28-
import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
29-
import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
30-
26+
import { computed } from 'vue';
3127
import { useCart } from "@/store/useCart";
28+
import CommonButton from '@/components/common/CommonButton.vue';
3229
3330
const cart = useCart();
3431
35-
defineProps({
36-
showCheckoutButton: { type: Boolean, required: false, default: false },
37-
});
38-
39-
const { data } = await useAsyncQuery(GET_CART_QUERY);
32+
const cartItems = computed(() => cart.cart);
4033
4134
/**
4235
* Handles the removal of a product.
4336
*
4437
* @param {Object} product - The product to be removed.
4538
*/
46-
const handleRemoveProduct = (product) => {
47-
const updatedItems = [];
48-
49-
const { key } = product;
50-
51-
updatedItems.push({
52-
key,
53-
quantity: 0,
54-
});
55-
56-
const variables = {
57-
input: {
58-
items: updatedItems,
59-
},
60-
};
61-
62-
cart.removeProductFromCart(product);
63-
64-
const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
65-
variables,
66-
});
67-
68-
mutate(variables);
69-
70-
onDone(() => {
71-
document.location = "/cart";
72-
});
39+
const handleRemoveProduct = async (product) => {
40+
try {
41+
await cart.removeProductFromCart(product.key);
42+
} catch (error) {
43+
console.error('Error removing product from cart:', error);
44+
// You might want to show an error message to the user here
45+
}
7346
};
7447
</script>
7548

‎components/Cart/CartItem.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
</div>
1616
<div class="item">
1717
<span class="block mt-2 font-extrabold">Name: <br /></span>
18-
<span class="item-content">{{ product.product.node.name }}</span>
18+
<span class="item-content">{{ product.product.name }}</span>
1919
</div>
2020
<div class="item">
2121
<span class="block mt-2 font-extrabold">Quantity: <br /></span>
@@ -25,7 +25,7 @@
2525
</div>
2626
<div class="item">
2727
<span class="block mt-2 font-extrabold">Subtotal: <br /></span>
28-
<span class="item-content">{{ formatPrice(`${product.total}`) }}</span>
28+
<span class="item-content">{{ formatPrice(product.total) }}</span>
2929
</div>
3030
</div>
3131
</template>
@@ -37,13 +37,15 @@
3737
* @component CartItem
3838
*
3939
* @prop {Object} product - The product object containing information about the product.
40-
* @prop {string} product.name - The name of the product.
40+
* @prop {Object} product.product - The product details.
41+
* @prop {string} product.product.name - The name of the product.
4142
* @prop {number} product.quantity - The quantity of the product.
42-
* @prop {number} product.total - The subtotal of the product.
43+
* @prop {string} product.total - The subtotal of the product.
4344
*
4445
* @emits CartItem#remove - Emitted when the remove button is clicked.
4546
*/
4647
48+
import { ref } from 'vue';
4749
import { formatPrice } from "@/utils/functions";
4850
4951
const isRemoving = ref(false);

‎components/Layout/LayoutCart.vue

Lines changed: 11 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<div v-if="remoteError">
3-
<span class="text-xl text-red-500"
4-
>Error fetching cart. Please refresh the page.</span
5-
>
2+
<div v-if="cart.error">
3+
<span class="text-xl text-red-500">
4+
Error fetching cart. Please refresh the page.
5+
</span>
66
</div>
77
<div v-else class="mt-4 lg:mt-0">
88
<NuxtLink to="/cart">
99
<transition name="cart">
1010
<span
11-
v-if="cartLength && !loading"
11+
v-if="cartLength && !cart.loading"
1212
class="text-xl text-white no-underline lg:text-black is-active"
1313
>
1414
<span class="hidden lg:block">
@@ -29,14 +29,14 @@
2929
</span>
3030
</transition>
3131
<transition name="cart">
32-
<div v-if="cartLength && !loading">
32+
<div v-if="cartLength && !cart.loading">
3333
<span
3434
class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white lg:text-white lg:bg-black rounded-full lg:ml-14"
3535
>
3636
{{ cartLength }}
3737
</span>
3838
<span class="text-white lg:text-black">
39-
Total: {{ formatPrice(`${subTotal}`) }}
39+
Total: {{ formatPrice(cartSubtotal) }}
4040
</span>
4141
</div>
4242
</transition>
@@ -45,62 +45,12 @@
4545
</template>
4646

4747
<script setup>
48-
import { ref, onBeforeMount, computed, watch } from "vue";
49-
50-
import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
51-
import { getCookie } from "@/utils/functions";
48+
import { computed } from "vue";
5249
import { useCart } from "@/store/useCart";
50+
import { formatPrice } from "@/utils/functions";
5351
5452
const cart = useCart();
55-
const cartChanged = ref(false);
56-
const loading = ref(true);
57-
const remoteError = ref(false);
58-
59-
const { data, error, pending, execute } = useAsyncQuery(GET_CART_QUERY, {
60-
fetchPolicy: "cache-and-network",
61-
});
62-
63-
const cartContents = computed(() => data.value?.cart?.contents?.nodes || []);
64-
const cartLength = computed(() =>
65-
cartContents.value.reduce((total, product) => total + product.quantity, 0)
66-
);
67-
const subTotal = computed(() =>
68-
cartContents.value.reduce(
69-
(total, product) => total + Number(product.total.replace(/[^0-9.-]+/g, "")),
70-
0
71-
)
72-
);
73-
74-
// Watch for changes in the cart quantity and set a flag if it changes
75-
watch(cartLength, (newLength, oldLength) => {
76-
if (newLength !== oldLength) {
77-
cartChanged.value = true;
78-
}
79-
});
80-
81-
// Execute the query initially
82-
onBeforeMount(() => {
83-
execute();
84-
});
85-
86-
// When the component is mounted, stop the loading state
87-
loading.value = false;
88-
89-
// Watch for the cartChanged flag and execute the query when it changes
90-
watch(cartChanged, (newValue) => {
91-
if (
92-
newValue &&
93-
process.client &&
94-
!pending.value &&
95-
getCookie("woo-session")
96-
) {
97-
execute();
98-
cartChanged.value = false; // Reset the flag after executing the query
99-
}
100-
});
10153
102-
// Watch for errors from the Apollo query
103-
watch(error, (newError) => {
104-
remoteError.value = !!newError;
105-
});
54+
const cartLength = computed(() => cart.cartQuantity);
55+
const cartSubtotal = computed(() => cart.cartSubtotal);
10656
</script>

‎components/Products/ProductsSingleProduct.vue

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,10 @@
5454
@common-button-click="addProductToCart(data.product)"
5555
:is-loading="isLoading"
5656
>
57-
ADD TO CART</CommonButton
58-
>
57+
ADD TO CART
58+
</CommonButton>
5959
</div>
60+
<p v-if="successMessage" class="mt-4 text-green-600">{{ successMessage }}</p>
6061
</div>
6162
</div>
6263
</div>
@@ -75,10 +76,9 @@
7576
* @prop {string} slug - The slug of the product to display.
7677
*/
7778
78-
import { ref, watch } from "vue";
79+
import { ref, watch, computed } from "vue";
7980
8081
import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
81-
import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
8282
8383
import ProductImage from "@/components/Products/ProductImage.vue";
8484
import ProductPrice from "@/components/Products/ProductPrice.vue";
@@ -92,6 +92,7 @@ const cart = useCart();
9292
const isLoading = computed(() => cart.loading);
9393
9494
const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
95+
const successMessage = ref('');
9596
9697
const props = defineProps({
9798
id: { type: String, required: true },
@@ -119,12 +120,15 @@ watch(
119120
* @return {Promise<void>} A Promise that resolves when the product has been successfully added to the cart.
120121
*/
121122
const addProductToCart = async (product) => {
122-
await cart.addToCart(product);
123-
124-
watchEffect(() => {
125-
if (isLoading.value === false) {
126-
window.location.reload();
127-
}
128-
});
123+
try {
124+
await cart.addToCart(product);
125+
successMessage.value = 'Product added to cart successfully!';
126+
setTimeout(() => {
127+
successMessage.value = '';
128+
}, 3000);
129+
} catch (error) {
130+
console.error('Error adding product to cart:', error);
131+
// You might want to show an error message to the user here
132+
}
129133
};
130134
</script>

0 commit comments

Comments
 (0)