Hi, is there a way to integrate a product feed from either Google Shopping Feed or Channable? Or will it be possible in the future?
Thanks in advance!
Daniel
Hi Daniel,
Thank you for contacting Builder.io Support!
Integrating a product feed from Google Shopping Feed or Channable into Builder.io can indeed be achieved, although built-in integration may not be available yet. You can still manage it through custom code and the usage of APIs provided by these services.
Integrating Google Shopping Feed
To integrate data from a Google Shopping feed, you can parse the XML feed provided by Google Shopping, transform it to a format usable by your application, and then render it using Builder.io custom components.
- Fetch and Parse the Feed:
You can set up a server-side function to fetch the XML feed and parse it:
import fetch from 'node-fetch';import { parseStringPromise } from 'xml2js'; const fetchGoogleShoppingFeed = async (feedUrl) => { const response = await fetch(feedUrl); const xml = await response.text(); const parsed = await parseStringPromise(xml); return parsed;}
- Register a Custom Component:
Register a custom component in Builder.io that can take the parsed data and display it. Here’s an example:
import React, { useState, useEffect } from 'react'; import { Builder } from '@builder.io/react'; const GoogleShoppingFeed = ({ feedUrl }) => { const [items, setItems] = useState([]); useEffect(() => { async function fetchData() { const data = await fetchGoogleShoppingFeed(feedUrl); setItems(data.rss.channel[0].item); } fetchData(); }, [feedUrl]); return ( <div> {items.map((item, index) => ( <div key={index}> <h3>{item.title[0]}</h3> <p>{item.description[0]}</p> <img src={item.g:image_link[0]} alt={item.title[0]} /> </div> ))} </div> ); }; Builder.registerComponent(GoogleShoppingFeed, { name: 'GoogleShoppingFeed', inputs: [{ name: 'feedUrl', type: 'string', required: true }], });
- Usage in Builder:
Now, you can use the GoogleShoppingFeed component in Builder and pass the feed URL as input.
Integrating Channable
Similarly, you can integrate data from Channable using their API. Here’s a basic outline:
- Fetch Channable Data:
const fetchChannableFeed = async (apiUrl, apiToken) => { const response = await fetch(apiUrl, { headers: { `'Authorization':Bearer ${apiToken}`, }, }); const data = await response.json(); return data;};
- Register Custom Component:
import React, { useState, useEffect } from 'react'; import { Builder } from '@builder.io/react'; const ChannableFeed = ({ apiUrl, apiToken }) => { const [items, setItems] = useState([]); useEffect(() => { async function fetchData() { const data = await fetchChannableFeed(apiUrl, apiToken); setItems(data.items); } fetchData(); }, [apiUrl, apiToken]); return ( <div> {items.map((item, index) => ( <div key={index}> <h3>{item.title}</h3> <p>{item.description}</p> <img src={item.image_link} alt={item.title} /> </div> ))} </div> ); }; Builder.registerComponent(ChannableFeed, { name: 'ChannableFeed', inputs: [ { name: 'apiUrl', type: 'string', required: true }, { name: 'apiToken', type: 'string', required: true }, ], });
- Usage in Builder:
Use the ChannableFeed component in Builder, providing the required API URL and token as inputs.
Future Possibility
If built-in integrations with Google Shopping Feed or Channable become available in the future, it will further simplify the process. For now, using custom components and the APIs provided by these services, you can integrate and visualize the product feeds in Builder.io effectively.
For more information on using custom components and integrating third-party APIs, you can refer to:
Thank you,
Hi Daniel,
Since there has been no further communication, I’m going to close this request out on my end. For any new issues in the future, please open a new request and we will be happy to help. If you require additional assistance related to this particular issue , feel free to reply with further details to this thread.