Scrivito und Hubspot

REST-API Zugriffe mit React und Scrivito.

Für einen Kunden habe ich ein Widget entwickelt, welche die Hubspot Blogposts liest und in Scrivito anzeigt.

Ich habe das Scrivito-Widget so programmiert, dass ein Endbenutzer über die Konfiguration angeben kann, welche Felder von Hubspot benutzt werden sollen. Dadurch behält man die Flexibilität von Scrivito, auch bei Daten, die aus externen Quellen kommen. Das funktioniert natürlich auch mit allen anderen Services, die über eine REST-API verfügen.

Ein anderes Widget liest die neuesten Blogposts von Hupspot und generiert daraus eine Teaserliste in Scrivito.

import * as React from 'react';
import * as Scrivito from 'scrivito';
import InPlaceEditingPlaceholder from '../../Components/InPlaceEditingPlaceholder';
import axios from 'axios';


class HubspotRecentPosts extends React.Component {

    constructor(props) {
        super(props);

        this.widget = this.props.widget;
        this.state = {
            article: []
        }
    }


    componentDidMount() {
        const limit = this.widget.get('entries');

        axios.get(`https://www.proxy.de/hubspot-recent-posts.php?limit=${limit}`)
            .then(res => {
                const response = res.data;

                const items = response.objects
                this.setState({ article: items });
            })

    }

    componentWillUnmount() {
        this.setState = '';
    }



    render() {
        if (this.state.article.length === 0) {
            return (
              <InPlaceEditingPlaceholder>
                Provide a Hubspot Blog ID in the widget properties.
              </InPlaceEditingPlaceholder>
            );
          }
        return (
            <div>
                {this.state.article.map((articles, index) =>
                    <div className="row" key={index}>
                        <div className="col cold-md-6" >
                            <img src={`${articles.featured_image}`} />
                        </div>
                        <div className="col cold-md-6">
                            <h2 className="h5">
                                <a href={`/contact/${articles.slug}`}>
                                    {articles.page_title}
                                </a>
                            </h2>
                        </div>
                    </div>
                )}
            </div>
        )
    };
}

Scrivito.provideComponent("HubspotRecentPostsWidget", HubspotRecentPosts);