How to get Webflow product SKUs into XANO

Hi there! In this guide, we'll walk through the steps to retrieve product information, including SKUs (Stock Keeping Units), from your Webflow e-commerce site using Xano. Let's get started!

Step 1: Get Your Webflow API Key

First things first, you'll need to obtain your Webflow API key. Here's how:

1. Log in to your Xano account and navigate to the project settings.
2. Click on "Integrations" and generate a new API key.
3. Copy the generated API key to your clipboard.

Step 2: Store the API Key as an Environment Variable

To keep your API key secure and easily accessible, it's recommended to store it as an environment variable in Xano. Here's how:

1. In Xano, click on "Manage" in the left sidebar.
2. Click on "Environment Variables" and create a new variable called "Webflow API Key."
3. Paste the API key you copied earlier as the value for this variable.
4. Click "Save" to store the environment variable.

Step 3: Create a New API Endpoint

Now, let's create a new API endpoint in Xano to interact with the Webflow API:

1. In Xano, navigate to the "API" section and click on the "+" button to create a new endpoint.
2. Give your endpoint a descriptive name, such as "Get Product Info."
3. Click "Save" to create the new endpoint.

Step 4: Get Your Webflow Site ID

To retrieve product information from Webflow, you'll need your Webflow site ID. Unfortunately, Webflow doesn't make this straightforward, so we'll need to retrieve it using their API:

1. Open the Webflow developer documentation for the "List Sites" endpoint.
2. Copy the provided cURL command for listing sites associated with your account.
3. In Xano, create a new function by clicking the "+" button in the "Functions" section.
4. Import the cURL command you copied in the previous step.
5. Replace the dummy bearer token with your Webflow API key by using the `%s` placeholder and the `sprintF` filter, referencing the "Webflow API Key" environment variable you created earlier.
6. Run the function, and locate your site ID in the response.
7. Copy the site ID to your clipboard.

Step 5: Get the Product ID

Next, you'll need the ID of the specific product you want to retrieve information for:

1. In your Webflow project, navigate to the product you want to access.
2. Copy the product's item ID from the URL or product details.

Step 6: Retrieve Product Information from Webflow

With your site ID and product ID, you can now make the API call to retrieve the product information:

1. In Xano, go back to the API endpoint you created in Step 3.
2. Copy the cURL command from the Webflow documentation for the "Get a Single Product and SKUs" endpoint.
3. Import the cURL command as a new external API request in your endpoint.
4. Replace the bearer token with your Webflow API key using the `%s` placeholder and the `sprintF` filter, referencing the "Webflow API Key" environment variable.
5. Replace the site ID and product ID placeholders in the cURL command with your actual site ID and product ID using the `%s` placeholder and the `sprintF` filter.
6. Run the endpoint, and you should see the product information, including SKUs, in the response.

Step 7: (Optional) Filter the Response to Only Include SKUs

If you only need the SKU information and want to exclude other product details, you can filter the response using Xano's data manipulation capabilities:

1. Copy the response from the previous step.
2. Create a new variable called "Refined Response" using the "Data Manipulation" feature in Xano.
3. Within the "Refined Response" variable, create a new sub-variable called "SKU" by navigating through the response object and selecting the array of SKUs.
4. Run the endpoint again, and instead of returning the original response, return the "SKU" variable to see only the SKU information.

And there you have it! You've successfully retrieved product and SKU information from your Webflow e-commerce site using Xano. From here, you can further process or integrate this data with other services as needed.

If you have any questions or need further assistance, feel free to reach out to our community or support team. Happy building!