Merge pull request #992 from w3bdesign/991-refactor-more-code

991 refactor more code

Author: w3bdesign

components/Cart/CartCheckoutButton.vue

@@ -45,9 +45,11 @@
     >
       Cart is currently empty
     </h2>
-    <CartCheckoutButton
+    <CommonButton
+      link-to="/checkout"
       v-if="showCheckoutButton && data.cart?.contents?.nodes?.length"
-    />
+      >CHECKOUT</CommonButton
+    >
   </div>
 </template>
 

components/Cart/CartContents.vue

@@ -55,13 +55,33 @@
 
 <script setup>
 import FETCH_ALL_PRODUCTS_QUERY from "@/apollo/queries/FETCH_ALL_PRODUCTS_QUERY.gql";
+import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
+
 import { filteredVariantPrice } from "@/utils/functions";
 
+const props = defineProps({
+  categoryId: { type: String, required: false },
+  categorySlug: { type: String, required: false },
+});
+
+const config = useRuntimeConfig();
+
 const productImage = (product) =>
-  product.image ? product.image.sourceUrl : process.env.placeholderSmallImage;
+  product.image ? product.image.sourceUrl : config.placeholderImage;
 
-const variables = { limit: 99 };
-const { data } = await useAsyncQuery(FETCH_ALL_PRODUCTS_QUERY, variables);
+const productVariables = { limit: 99 };
+const { data } = await useAsyncQuery(
+  FETCH_ALL_PRODUCTS_QUERY,
+  productVariables
+);
+
+if (props.id) {
+  const categoryVariables = { id: props.categoryId, slug: props.categorySlug };
+  const { data } = await useAsyncQuery(
+    GET_PRODUCTS_FROM_CATEGORY_QUERY,
+    categoryVariables
+  );
+}
 </script>
 
 <style scoped>

components/Category/CategoryShowProducts.vue

@@ -1,7 +1,32 @@
 <template>
-  <div>
+  <div v-if="linkTo" class="flex justify-center">
+    <NuxtLink :to="linkTo" class="button-link">
+      <button
+        :class="{ disabled: isLoading }"
+        @click="$emit('CommonButtonClick')"
+      >
+        <slot />
+        <svg
+          v-if="isLoading"
+          class="absolute -mt-6 -ml-2 animate-spin"
+          width="25"
+          height="25"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM4.14355 13.5165C4.85219 17.2096 8.10023 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.0886 4 4.83283 6.80704 4.13728 10.5165L6.72824 10.5071C7.37819 8.20738 9.49236 6.52222 12.0001 6.52222C15.0254 6.52222 17.4779 8.9747 17.4779 12C17.4779 15.0253 15.0254 17.4778 12.0001 17.4778C9.49752 17.4778 7.3869 15.7995 6.73228 13.5071L4.14355 13.5165ZM9.52234 12C9.52234 13.3684 10.6317 14.4778 12.0001 14.4778C13.3685 14.4778 14.4779 13.3684 14.4779 12C14.4779 10.6316 13.3685 9.52222 12.0001 9.52222C10.6317 9.52222 9.52234 10.6316 9.52234 12Z"
+            fill="white"
+          />
+        </svg>
+      </button>
+    </NuxtLink>
+  </div>
+  <div v-else class="flex justify-center">
     <button
-      class="relative w-48 h-12 px-4 py-2 mt-4 transition ease-in-out delay-75 duration-300 font-bold text-white bg-blue-500 rounded hover:bg-blue-800"
       :class="{ disabled: isLoading }"
       @click="$emit('CommonButtonClick')"
     >
@@ -27,8 +52,9 @@
 </template>
 
 <script setup>
-/* Usage:
- * <CommonButton @common-button-click="function name" isLoading="true">Common button</CommonButton>
+/*
+ * Usage:
+ * <CommonButton @common-button-click="functionName" isLoading="true">Common button</CommonButton>
  */
 
 defineEmits(["CommonButtonClick"]);
@@ -39,11 +65,24 @@ defineProps({
     required: false,
     default: false,
   },
+  linkTo: {
+    type: String,
+    required: false,
+    default: "",
+  },
 });
 </script>
 
 <style scoped>
 .disabled {
   @apply bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed;
 }
+
+button {
+  @apply relative w-48 h-12 px-4 py-2 mt-4 transition ease-in-out delay-75 duration-300 font-bold text-white bg-blue-500 rounded hover:bg-blue-800;
+}
+
+.button-link {
+  border-bottom: none;
+}
 </style>

components/Products/ProductsShowAll.vue

@@ -16,6 +16,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,
+      indexName: process.env.PUBLIC_ALGOLIA_INDEX_NAME,
       placeholderImage: process.env.PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL,
     },
   },

components/common/CommonButton.vue

@@ -1,23 +1,13 @@
 <template>
-  <div v-if="data?.productCategory">
-    <CategoryShowProducts :products="data.productCategory" />
-  </div>
-  <div v-else>
-    <SpinnerLoading />
-  </div>
+  <ProductsShowAll
+    :category-id="route.query.id"
+    :category-slug="route.params.product"
+  />
 </template>
 
 <script setup>
-import GET_PRODUCTS_FROM_CATEGORY_QUERY from "@/apollo/queries/GET_PRODUCTS_FROM_CATEGORY_QUERY.gql";
-
 const route = useRoute();
 
-const variables = { id: route.query.id, slug: route.params.category };
-const { data } = await useAsyncQuery(
-  GET_PRODUCTS_FROM_CATEGORY_QUERY,
-  variables
-);
-
 useHead({
   title: route.params.category,
   titleTemplate: "%s - Nuxt 3 Woocommerce",

nuxt.config.ts

@@ -42,7 +42,9 @@ import {
   AisHits,
 } from "vue-instantsearch/vue3/es/index.js";
 
-const indexName = "dfweb";
+const config = useRuntimeConfig();
+
+const indexName = config.indexName;
 const algolia = useAlgoliaRef();
 
 const convertProductNameToSlug = (productName) =>

pages/category/[category].vue

@@ -5,6 +5,22 @@
   </div>
 </template>
 
+<script setup>
+useHead({
+  title: "Order placed",
+  titleTemplate: "%s - Nuxt 3 Woocommerce",
+  meta: [
+    { name: "viewport", content: "width=device-width, initial-scale=1" },
+    {
+      hid: "description",
+      name: "description",
+      content: "Nuxt 3 Woocommerce",
+    },
+  ],
+  link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+});
+</script>
+
 <style scoped>
 h1 {
   @apply h-10 p-6 text-3xl font-bold text-center;