Templating

How to use Hubspot Connector in Twig templates

Basic example

{# List out all blogs in your Hubspot Portal #}
{% for blog in craft.hubspot.getBlogs() %}
    <a href="{{ blog.root_url }}">
        <h4>{{ blog.id }} - {{ blog.name }}</h4>
    </a>
    {# List out all blog posts in that blog #}
    {% for post in  craft.hubspot.getBlogPosts(blog.id) %}
        <hr>
        <article>
            <h5>
                <a href="{{ post.published_url }}">
                    {{ post.html_title }}
                </a>
            </h5>
            {# The post_summary is HTML, to show it as text only, pass it through the striptags filter #}
            {{ post.post_summary | striptags }}
        </article>
    {% endfor %}
{% endfor %}

Get posts with a certain state (published, draft etc)

{# 
    Only return blog posts whos state is "PUBLISHED",
    valid states are: DRAFT, PUBLISHED, or SCHEDULED.
#}

{% set publishedBlogPosts = craft.hubspot.blogPosts("123123123", {
    state: "PUBLISHED",
}) %}

{% for post in publishedBlogPosts %}
    <article>
        <h5>
            <a href="{{ post.published_url }}">
                {{ post.html_title }}
            </a>
        </h5>
        {{ post.post_summary | striptags }}
    </article>
{% endfor %}

Limit the number of results

{# Only return 7 posts #}
{% set blogPosts = craft.hubspot.blogPosts("123123123", {
    limit: 7,
}) %}

{% for post in blogPosts %}
    <article>
        <h5>
            <a href="{{ post.published_url }}">
                {{ post.html_title }}
            </a>
        </h5>
        {{ post.post_summary | striptags }}
    </article>
{% endfor %}

Fetch blog posts matching search

The Hubspot API's search feature is kind of confusing, here is an example of the most common usage that you'll need, to learn more about searchable/queryable fields and which operators are supported, check the "Optional query string filters & options" section in the API docs

{# Get the search term from the request #}
{% set searchTerm = craft.app.request.getParam("q", null) %}

{# 
    You can search any supported field, each field's supported operator 
    (icontains, exact, range etc) is appended to the field name, 
    so in this example we are searching all posts 
    where the name contains the searchTerm 
#}
{% set blogPosts = craft.hubspot.blogPosts(blogId, {
    state: "PUBLISHED",
    name__icontains: searchTerm
}) %}

{% for post in blogPosts %}
    <article>
        <h5>
            <a href="{{ post.published_url }}">
                {{ post.html_title }}
            </a>
        </h5>
        {{ post.post_summary | striptags }}
    </article>
{% endfor %}

Pagination

Pagination has to be done manually (for now).

{% set blogId = "123123123123" %}
{% set perPage = 6 %}
{% set searchTerm = craft.app.request.getParam("q", null) %}
{% set currentPage = craft.app.request.getParam("page", 1) %}
{% set offset = ((currentPage -1) * perPage) %}


{% set totalPosts = craft.hubspot.totalBlogPosts(blogId, {
    state: "PUBLISHED",
    name__icontains: searchTerm
}) %}
{% set totalPages = ceil(totalPosts / perPage) %}
{% set blogPosts = craft.hubspot.blogPosts(blogId, {
    state: "PUBLISHED",
    limit: perPage,
    offset: currentPage == 1 ? 0 : offset,
    name__icontains: searchTerm
}) %}


<form method="get">
    <div class="input-group input-group-secondary">
        <input type="text" class="form-control" name="q" placeholder="Search?" value="{{ searchTerm }}">
        <div class="input-group-append">
            <button class="btn btn-search" type="button">search</button>
        </div>
    </div>
</form>

<div class="container">
    <div class="row">
        {% if blogPosts %}
            {# Show the list of blog posts that match the query #}
            {% for post in blogPosts %}
            <article>
                <h5>
                    <a href="{{ post.published_url }}">
                        {{ post.html_title }}
                    </a>
                </h5>
                {{ post.post_summary | striptags }}
            </article>
            {% endfor %}
        {% else %}
            {# If there are no matches #}
            <h3>No posts found matching your query</h3>
        {% endif %}
    </div>

    {% if totalPages %}
        {# Bootstrap 4 example of pagination links #}
        <ul class="pagination">
            <li class="page-item {% if currentPage - 1 <= 0 %}disabled{% endif %}">
                <a class="page-link" href="/news?page={{ currentPage - 1 }}">
                    Previous
                </a>
            </li>


            {% for page in range(1, totalPages) %}
                <li class="page-item {{ currentPage == page ? "active" : "" }}">
                    <a class="page-link" href="/news?page={{ page }}">
                        {{ page }}
                    </a>
                </li>
            {% endfor %}


            <li class="page-item {% if currentPage + 1 >= totalPages %}disabled{% endif %}">
                <a class="page-link" href="/news?page={{ currentPage + 1 }}">
                    Next
                </a>
            </li>
        </ul>
    {% endif %}
</div>