Updated

frontend/pages/product/[id].vue

@@ -6,13 +6,6 @@ import ChatButton from "~/components/product/ChatBox/ChatButton.vue";
 import useGetProduct from "~/composables/api/product/useGetProduct";
 import useGetComments from "~/composables/api/product/useGetComments";
 
-// type
-
-export type ProductVariantProvideType = {
-    selectedVariant: Ref<ProductVariant>,
-    changeSelectedVariant: (value: ProductVariant) => void
-}
-
 // state
 
 const route = useRoute();
@@ -20,11 +13,18 @@ const route = useRoute();
 const id = route.params.id as string | undefined;
 const page = ref(1);
 
-const { suspense: suspenseProduct } = useGetProduct(id);
+const { suspense: suspenseProduct, data: product } = useGetProduct(id);
 const { suspense: suspenseComments } = useGetComments(id, page);
 
 const selectedVariant = ref<ProductVariant>();
 
+// type
+
+export type ProductVariantProvideType = {
+    selectedVariant: typeof selectedVariant,
+    changeSelectedVariant: (value: ProductVariant) => void
+}
+
 // provide / inject
 
 provide("productVariant", {
@@ -52,7 +52,10 @@ if (productResponse.isError || commentsResponse.isError) {
         <ProductVideo />
         <ProductComments />
         <ProductDetails />
-        <!--        <ProductsSlider title="محصولات مشابه" />-->
+        <ProductsGrid
+            title="محصولات مشابه"
+            :products="product!.related_products"
+        />
         <ChatButton />
     </div>
 </template>