Cli test

extension-section/src/components/ProductCard.jsx

@@ -4,7 +4,7 @@ import styles from '../styles/style.css';
 export function ProductCard({ product }) {
     return (
         <div className={styles.product}>
-            {product.medias.map((media) => (
+            {product.media?.map((media) => (
                 <img src={media.url} alt={media.alt} />
             ))}
             <h1>{product.name}</h1>

extension-section/src/sections/product-list.jsx

@@ -1,45 +1,107 @@
 import React, { useEffect } from "react";
+import { useGlobalStore, useFPI } from "fdk-core/utils";  // Importing hooks from fdk-core utilities
+import { Helmet } from "react-helmet-async";  // Importing Helmet for managing changes to the document head
+import styles from "../styles/style.css";  // Importing CSS styles
+import { ProductCard } from "../components/ProductCard";  // Importing the ProductCard component
 
-import { useGlobalStore, useFPI } from "fdk-core/utils";
-import { Helmet } from "react-helmet-async";
-import styles from "../styles/style.css";
-import { ProductCard } from "../components/ProductCard";
+// GraphQL query as a template literal string to fetch products with dynamic variables
+const PLP_PRODUCTS = `query products(
+  $first: Int
+  $pageNo: Int
+  $after: String
+  $pageType: String
+) {
+  products(
+    first: $first
+    pageNo: $pageNo
+    after: $after
+    pageType: $pageType
+  ) {
+    page {
+      current
+      next_id
+      has_previous
+      has_next
+      item_total
+      type
+      size
+    }
+    items {
+        price {
+            effective {
+                currency_code
+                currency_symbol
+                max
+                min
+            }
+        }
+        media {
+            alt
+            type
+            url
+        }
+        slug
+        name
+    }
+  }
+}
+`;
 
-export function Component({ props }) {
-  const fpi = useFPI();
-  const products = useGlobalStore(fpi.getters.PRODUCTS);
+// Functional component definition using destructuring to access props
+export function Component({ title = 'Extension Title Default' }) {
+  const fpi = useFPI();  // Using a custom hook to access functional programming interface
+  const products = useGlobalStore(fpi.getters.PRODUCTS);  // Accessing global store to retrieve products
+  const productItems = products?.items ?? [];  // Nullish coalescing operator to handle undefined products
 
-  const productItems = products?.data?.items ?? [];
+  // useEffect to perform side effects, in this case, data fetching
   useEffect(() => {
+    // Checking if productItems is empty and then executing GraphQL query
     if (!productItems.length) {
-      fpi.catalog.getProducts({});
+      const payload = {
+        enableFilter: true,  // Enabling filter option in the query
+        first: 12,           // Number of products to fetch
+        pageNo: 1,           // Initial page number
+        pageType: "number",  // Type of pagination
+      };
+      fpi.executeGQL(PLP_PRODUCTS, payload);
     }
-  }, []);
+  }, [productItems.length, fpi]);  // Dependency array to limit the execution of useEffect
 
-  const title = props?.title?.value ?? 'Extension Title Default'
+  // Conditionally rendering based on the availability of product items
+  if (!productItems.length) {
+    return <h2>No Products Found</h2>;  // Display message when no products are found
+  }
 
   return (
     <div>
       <Helmet>
-        <title>{ title }</title>
+        <title>{title}</title>  // Setting the title of the page using Helmet
       </Helmet>
       <h1>Products List</h1>
-
-      {!productItems.length ? (
-        <h2>No Products</h2>
-      ) : (
-        <div class={styles.container}>
-          {productItems.map((product) => (
-            <ProductCard product={product} key={product.slug} />
-          ))}
-        </div>
-      )}
+      <div className={styles.container}>
+        {productItems.map((product) => (
+          <ProductCard product={product} key={product.slug} />  // Rendering ProductCard components for each product
+        ))}
+      </div>
     </div>
   );
 }
 
-Component.serverFetch = ({ fpi }) => fpi.catalog.getProducts({});
+// Server-side fetching logic for server-side rendering (SSR)
+Component.serverFetch = ({ fpi }) => {
+  const payload = {
+    enableFilter: true,
+    first: 12,
+    pageNo: 1,
+    pageType: "number",
+  };
+
+  fpi.custom.setValue("test-extension", true);  // Custom settings for the server-side execution context
+
+  return fpi.executeGQL(PLP_PRODUCTS, payload);  // Executing GraphQL query on the server
+};
 
+// Exporting component settings for potential dynamic UI management or configuration panels
 export const settings = {
   label: "Product List",
   name: "product-list",
@@ -49,7 +111,7 @@ export const settings = {
       label: "Page Title",
       type: "text",
       default: "Extension Title",
-      info: "Page Title",
+      info: "Set the page title for the product list."  // Description for the property
     },
   ],
   blocks: [],

extension-section/src/styles/style.css

@@ -1,7 +1,49 @@
+/* General styles for the product grid */
 .product {
-    color: red;
-    border: 1px solid red
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px; /* Adjust width as necessary */
+    padding: 20px;
+    margin: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    background-color: #fff;
+    transition: transform 0.3s ease-in-out;
+}
+
+.product img {
+    width: 100%; /* Makes images responsive */
+    height: auto;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.product h1 {
+    font-size: 18px;
+    color: #333;
+    margin: 10px 0;
+}
+
+.product h2 {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+/* Hover effect for product card */
+.product:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
 }
+
+/* Container for horizontal product layout */
 .container {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
 }

extension.context.json

@@ -0,0 +1 @@
+{}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gofynd/fdk-cli",
-  "version": "7.0.0",
+  "version": "7.0.1-beta.4",
   "main": "index.js",
   "license": "MIT",
   "bin": {
@@ -27,7 +27,7 @@
     "build": "npm run clean && tsc && npm run copy-files",
     "copy-files": "copyfiles -u 1 src/**/*.html dist/",
     "watch": "tsc --watch",
-    "test": "jest --runInBand",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest --runInBand",
     "pretty": "prettier --config ./.prettierrc --write './src/**/*.*'",
     "localInstall": "sh scripts/localInstall.sh"
   },