@builder.io/plugin-commercelayer 0.0.9-2 → 0.1.1

package/README.md

@@ -11,13 +11,30 @@ Go to [builder.io/account/organization](https://builder.io/account/organization)
 
 ## Features
 
-The plugin provides new field types for your Builder.io models:
+The plugin provides new field types for your Builder.io models and data connection capabilities:
 
 ### Product Fields
 
 - `Commerce Layer Product` - Search and select products from your Commerce Layer catalog
 - `Commerce Layer Product Preview` - Preview product templates with live data
 
+### Connect Data
+
+The plugin also provides a "Connect Data" feature that allows you to fetch live product data directly from your Commerce Layer API:
+
+- **Real-time data access** - Connect to your Commerce Layer products as a data source
+- **Flexible querying** - Search products by name or SKU code with configurable result limits
+- **Full product data** - Access all product attributes including SKU codes, prices, images, and metadata
+- **Dynamic content** - Use live product data in your Builder.io content and templates
+
+To use Connect Data:
+1. In the Builder.io editor, go to the "Connect Data" panel
+2. Click "Add Data" and select "CommerceLayer" from the data sources
+3. Configure your query parameters (search terms, result limits)
+4. Use the returned product data in your content via data bindings
+
+Example: Access product SKU code with `data.attributes.code` or product name with `data.attributes.name`
+
 ### Component Model Fields
 
 Component models can be used to create product page templates. Using the following fields makes previewing the templates straightforward:

package/dist/plugin.system.js

@@ -146881,7 +146881,7 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
       });
 
       var name = "@builder.io/plugin-commercelayer";
-      var version = "0.0.9-1";
+      var version = "0.1.0";
       var description = "Commerce Layer plugin for Builder.io";
       var keywords = [
       ];
@@ -147056,6 +147056,104 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
         return data.data[0];
       };
 
+      const buildCommerceLayerUrl = ({
+        resource,
+        resourceId,
+        query,
+        limit,
+        baseEndpoint,
+        token
+      }) => {
+        let url;
+        if (resourceId) {
+          url = `${baseEndpoint}/api/skus/${resourceId}`;
+        } else {
+          const params = new URLSearchParams();
+          if (query) {
+            params.set("filter[q][name_or_code_cont]", query);
+          }
+          params.set("page[size]", (limit || 25).toString());
+          url = `${baseEndpoint}/api/skus?${params}`;
+        }
+        return {
+          "@type": "@builder.io/core:Request",
+          request: {
+            url,
+            method: "GET",
+            headers: {
+              "Authorization": `Bearer ${token}`,
+              "Accept": "application/vnd.api+json",
+              "Content-Type": "application/vnd.api+json"
+            }
+          },
+          options: {
+            resource,
+            resourceId,
+            pluginId: pkg.name
+          }
+        };
+      };
+      const RESOURCE_TYPES = [
+        {
+          name: "Product",
+          id: "product",
+          description: "All of your Commerce Layer products (SKUs)."
+        }
+      ];
+      const getDataConfig = (service, baseEndpoint, token) => {
+        return {
+          name: "CommerceLayer",
+          icon: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F9893958430eb4c59af7ab616ba868941",
+          getResourceTypes: async () => RESOURCE_TYPES.map(
+            (model) => ({
+              ...model,
+              inputs: () => [
+                {
+                  friendlyName: "Limit",
+                  name: "limit",
+                  type: "number",
+                  defaultValue: 25,
+                  max: 100,
+                  min: 1
+                },
+                {
+                  friendlyName: "Search",
+                  name: "query",
+                  type: "string",
+                  helperText: "Search by product name or SKU code"
+                }
+              ],
+              toUrl: ({ entry, query, limit }) => buildCommerceLayerUrl({
+                query,
+                limit,
+                resource: model.id,
+                resourceId: entry,
+                baseEndpoint,
+                token
+              }),
+              canPickEntries: true
+            })
+          ),
+          getEntriesByResourceType: async (resourceTypeId, options = {}) => {
+            const entry = options.resourceEntryId;
+            if (entry) {
+              const entryObj = await service[resourceTypeId].findById(entry);
+              return [
+                {
+                  id: String(entryObj.id),
+                  name: entryObj.title
+                }
+              ];
+            }
+            const response = await service[resourceTypeId].search(options.searchText || "");
+            return response.map((result) => ({
+              id: String(result.id),
+              name: result.title
+            }));
+          }
+        };
+      };
+
       registerCommercePlugin(
         {
           name: "CommerceLayer",
@@ -147089,7 +147187,7 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
             const scope = settings.get("scope");
             const auth = await authenticateClient({ clientId, clientSecret, scope });
             const { baseEndpoint } = await getOrganizationInfo(auth.accessToken);
-            return {
+            const service = {
               product: {
                 async findById(id) {
                   const token = await getValidToken(clientId, clientSecret, scope);
@@ -147125,6 +147223,8 @@ System.register(['@builder.io/sdk', '@emotion/core', '@material-ui/core', 'react
                 }
               }
             };
+            appState.registerDataPlugin(getDataConfig(service, baseEndpoint, auth.accessToken));
+            return service;
           } catch (error) {
             console.error(error);
             appState.snackBar.show(