feat: added color variable and description to product page

Author: zackha

components/ProductCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article v-for="product in products">
-    <NuxtLink :to="`/product/${product.slug}`" class="group">
+    <NuxtLink :to="`/product/${product.slug}-${product.sku.split('-')[0]}`" class="group">
       <div
         class="cursor-pointer rounded-2xl dark:bg-secondary-bg-d hover:dark:bg-[#222222] px-4 pt-4 pb-3 transition ease-[ease] duration-300 dark:border-[#222222] hover:dark:border-[#303030] border">
         <div class="relative mb-4 pb-[133%] dark:shadow-[0_8px_24px_rgba(0,0,0,.5)] rounded-lg overflow-hidden">

gql/queries/getProduct.gql

@@ -1,13 +1,27 @@
-query getProduct($slug: ID!) {
+query getProduct($slug: ID!, $sku: String!) {
   product(id: $slug, idType: SLUG) {
     ... on VariableProduct {
+      sku
       slug
       name
       regularPrice
       salePrice
+      description
       image {
         sourceUrl(size: WOOCOMMERCE_SINGLE)
       }
+      productTypes {
+        nodes {
+          products(where: { sku: $sku }) {
+            nodes {
+              slug
+              image {
+                sourceUrl(size: THUMBNAIL)
+              }
+            }
+          }
+        }
+      }
       variations(where: { orderby: { field: NAME, order: DESC } }) {
         nodes {
           id

gql/queries/getProducts.gql

@@ -3,6 +3,7 @@ query getProducts($after: String, $search: String, $category: String, $order: Or
     nodes {
       ... on VariableProduct {
         id
+        sku
         slug
         name
         regularPrice

pages/product/[slug].vue

@@ -22,6 +22,11 @@
             <p class="text-sm ml-1 line-through" v-html="product.regularPrice"></p>
             <p class="text-sm ml-1">{{ calculateDiscountPercentage }}%</p>
           </div>
+          <div v-for="(variation, i) in product.productTypes.nodes" :key="variation.id">
+            <div v-for="(vars, i) in variation.products.nodes" :key="vars.id">
+              <NuxtLink :to="`/product/${vars.slug}-${product.sku.split('-')[0]}`"><NuxtImg :src="vars.image.sourceUrl" /></NuxtLink>
+            </div>
+          </div>
           <div>Size: {{ selectedVariation }}</div>
           <div class="flex gap-2 mt-3 flex-wrap">
             <label v-for="(variation, i) in product.variations.nodes" :key="variation.id" :class="[variation.stockStatus === 'OUT_OF_STOCK' ? 'disabled' : '']">
@@ -36,17 +41,22 @@
               <span class="py-1.5 px-2 border rounded leading-[10px] h-6">{{ variation.attributes.nodes.map((attr) => attr.value).toString() }}</span>
             </label>
           </div>
+          <div v-html="product.description"></div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-const route = useRoute();
+const route = useRoute().params.slug;
+const parts = route.split('-');
+const sku = parts.pop();
+const slug = parts.join('-');
+
 import { getProduct } from '~/gql/queries/getProduct.gql';
 
-const { result: productResult, loading } = useQuery(getProduct, () => ({ slug: route.params.slug }));
+const { result: productResult, loading } = useQuery(getProduct, () => ({ slug: slug, sku: sku }));
 const product = computed(() => productResult.value?.product);
 
 let selectedVariation = ref(null);