Refactor single product

Author: w3bdesign

.env.example

@@ -1,5 +1,5 @@
 PUBLIC_GRAPHQL_URL = "change me"
-PLACEHOLDER_SMALL_IMAGE_URL = "change me"
+PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL = "https://via.placeholder.com/500"
 ALGOLIA_APPLICATION_ID = "change me"
 ALGOLIA_API_KEY = "change me"
 ALGOLIA_INDEX_NAME = "change me"

components/Products/ProductsSingleProduct.vue

@@ -1,51 +1,51 @@
 <template>
-  <div v-if="product">
+  <div v-if="data.product">
     <section>
       <div class="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
         <div
           class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
         >
           <img
-            v-if="product.image !== undefined"
+            v-if="data.product.image !== undefined"
             id="product-image"
             class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
-            :alt="product.name"
-            :src="product.image.sourceUrl"
+            :alt="data.product.name"
+            :src="data.product.image.sourceUrl"
           />
           <img
             v-else
             id="product-image"
             class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-95"
-            :alt="product.name"
-            :src="process.env.placeholderSmallImage"
+            :alt="data.product.name"
+            :src="config.placeholderImage"
           />
           <div class="ml-8">
             <p class="text-3xl font-bold text-left">
-              {{ product.name }}
+              {{ data.product.name }}
             </p>
-            <div v-if="product.onSale" class="flex">
+            <div v-if="data.product.onSale" class="flex">
               <p class="pt-1 mt-4 text-3xl text-gray-900">
-                <span v-if="product.variations">
-                  {{ filteredVariantPrice(product.price) }}</span
+                <span v-if="data.productvariations">
+                  {{ filteredVariantPrice(data.product.price) }}</span
                 >
-                <span v-else>{{ product.salePrice }}</span>
+                <span v-else>{{ data.product.salePrice }}</span>
               </p>
               <p class="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
-                <span v-if="product.variations">
-                  {{ filteredVariantPrice(product.price, "right") }}</span
+                <span v-if="data.productvariations">
+                  {{ filteredVariantPrice(data.product.price, "right") }}</span
                 >
-                <span v-else>{{ product.regularPrice }}</span>
+                <span v-else>{{ data.product.regularPrice }}</span>
               </p>
             </div>
             <p v-else class="pt-1 mt-4 text-2xl text-gray-900">
-              {{ product.price }}
+              {{ data.product.price }}
             </p>
             <br />
             <p class="pt-1 mt-4 text-2xl text-gray-900">
-              {{ stripHTML(product.description) }}
+              {{ stripHTML(data.product.description) }}
             </p>
             <p
-              v-if="product.variations"
+              v-if="data.product.variations"
               class="pt-1 mt-4 text-xl text-gray-900"
             >
               <span class="py-2">Varianter</span>
@@ -55,7 +55,7 @@
                 class="block w-64 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
               >
                 <option
-                  v-for="(variation, index) in product.variations.nodes"
+                  v-for="(variation, index) in data.product.variations.nodes"
                   :key="variation.databaseId"
                   :value="variation.databaseId"
                   :selected="index === 0"
@@ -65,7 +65,7 @@
               </select>
             </p>
             <div class="pt-1 mt-2">
-              <CartAddToCartButton :product="product" />
+              <CartAddToCartButton :product="data.product" />
             </div>
           </div>
         </div>
@@ -75,12 +75,17 @@
 </template>
 
 <script setup>
+import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
+
 import { stripHTML, filteredVariantPrice } from "@/utils/functions";
 
-defineProps({
-  product: {
-    type: [Object],
-    required: true,
-  },
+const config = useRuntimeConfig();
+
+const props = defineProps({
+  id: { type: String, required: true },
+  slug: { type: String, required: true },
 });
+
+const variables = { id: props.id, slug: props.slug };
+const { data } = await useAsyncQuery(GET_SINGLE_PRODUCT_QUERY, variables);
 </script>

nuxt.config.ts

@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     "@nuxtjs/algolia",
   ],
   plugins: ["~/plugins/apollo"],
-  runtimeConfig: { public: { graphqlURL: process.env.PUBLIC_GRAPHQL_URL } },
+  runtimeConfig: { public: { graphqlURL: process.env.PUBLIC_GRAPHQL_URL, placeholderImage: process.env.PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL } },
   postcss: {
     plugins: {
       tailwindcss: {},

pages/product/[product].vue

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