Refactor and fix variations bug

Author: w3bdesign

components/Layout/LayoutNavItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <li
+    class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
+  >
+    <NuxtLink :to="to">
+      <span class="text-xl text-white no-underline lg:text-black">
+        {{ label }}
+      </span>
+    </NuxtLink>
+  </li>
+</template>
+
+<script setup>
+const props = defineProps({
+  to: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+</script>

components/Layout/LayoutNavbar.vue

@@ -30,46 +30,10 @@
               <ul
                 class="items-center justify-end flex-1 pr-4 -mr-4 list-reset lg:flex"
               >
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                    >
-                      Home
-                    </span>
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/products">
-                    <span class="text-xl text-white no-underline lg:text-black"
-                      >Products</span
-                    >
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/categories">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                      >Categories</span
-                    >
-                  </NuxtLink>
-                </li>
-                <li
-                  class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
-                >
-                  <NuxtLink to="/search">
-                    <span
-                      class="text-xl text-white no-underline lg:text-black is-active"
-                      >Search</span
-                    >
-                  </NuxtLink>
-                </li>
+                <NavItem to="/" label="Home" />
+                <NavItem to="/products" label="Products" />
+                <NavItem to="/categories" label="Categories" />
+                <NavItem to="/search" label="Search" />
                 <li
                   class="inline-block py-2 text-xl font-semibold no-underline lg:text-base lg:px-4"
                 >
@@ -90,6 +54,7 @@
  * Vue.js template for a header section of a web page.
  *
  */
+import NavItem from "@/components/Layout/LayoutNavItem.vue";
 </script>
 
 <style scoped>

components/Products/ProductsSingleProduct.vue

@@ -78,8 +78,8 @@ const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
 watch(
   () => data.value,
   (dataValue) => {
-    if (dataValue && dataValue.product.variations.nodes.length > 0) {
-      selectedVariation.value = dataValue.product.variations.nodes[0].databaseId;
+    if (dataValue && dataValue.product?.variations?.nodes?.length > 0) {
+      selectedVariation.value = dataValue.product?.variations?.nodes[0].databaseId;
     }
   },
   { immediate: true }

layouts/default.vue

@@ -1,10 +1,12 @@
 <template>
+  <div>
   <LayoutNavbar />
   <div class="container mx-auto max-w-[84.375rem]">
     <slot />
   </div>
   <LayoutFooter />
   <LayoutStickyFooter />
+  </div>
 </template>
 
 <style>