Recreating Dynamic Team Member Page with queryparam variable

[SonjaElena]

Hi guys,

I'm trying to recreate the Dynamic Team Members Page explained in this tutorial:

https://designers.hubspot.com/docs/tutorials/how-to-build-a-dynamic-team-member-page-with-hubdb

I've tried it using the provided csv file, css and code AND I also tried it using my own data. Both times, creating the general Team Members Page worked fine. But when trying to filter the team members using the queryparam variable I get a 404. So, basically when I try adding "/location/ma" or similar to the url to filter the results.

At first I thought I had a mistake in my customized code so I tried using the data in the tutorial and doing it exactly as they describe - but then I also got a 404 doing that. Now I'm stumped. Maybe someone has an idea where I'm going wrong?

I'm using this tutorial:
https://designers.hubspot.com/docs/tutorials/how-to-build-a-dynamic-team-member-page-with-hubdb

...the csv file listed there for the HubDB:

... the css listed there and the following code:

{# Load Card Stylesheet #}
{{ require_css(module.css) }}

{# sets the different query parameters using request path for hubdb query #}
{% set queryparam = "" %}
{% if request.path == "/dynamic-test/location/ma" %}
    {% set queryparam = queryparam ~ "&location=1" %}
{% endif %}
{% if request.path == "/dynamic-test/location/nh" %}
    {% set queryparam = queryparam ~ "&location=2" %}
{% endif %}
{% if request.path == "/dynamic-test/location/pa" %}
    {% set queryparam = queryparam ~ "&location=3" %}
{% endif %}


{# Get Team Members from HubDB #}
{% set table = hubdb_table_rows(2691516, queryparam)%}

{% if table == [] %}
    <p class='align-center'>Sorry, no one found for that Search. Try changing your filter and search again.</p>
{% else %}
  {% for row in table %}
<div class="team-member-card-container {{ widget.cards_in_row }}">
    <div class="team-member-card">
        <div class="image-container">
            <img src="{{ row.image.url }}" width="500" {% if row.image.width > row.image.height  %}class="landscape"{% endif %} alt="{{ row.name }} Headshot">
        </div>
        <div class="team-member-info">
            <h3>{{ row.name }}</h3>
            <h4>{{ row.title }}</h4>
            <p>{{ row.description }}</p>
       </div>
    </div>
</div>
{% endfor %}
{% endif %}

 
My test site is: http://gramm-medical-6269990.hs-sites.com/dynamic-test
And I get the 404 with this: http://gramm-medical-6269990.hs-sites.com/dynamic-test/location/ma

As you can see on the HubDB photo I've tried replacing the "MA" in the Location column in one line with a "1" because I thought it was strange that the code said "&location=1" but in the table it had "MA... etc" listed - but that didn't do anything either, so....

Thanks in advance! 🙂

[stefen · Accepted solution]

@SonjaElena you'll need to create pages at those URLs in order for those not to register as 404s. As long as you use the same template, once you do that it should work.

[SonjaElena]

Hi Stefen,

ohhh! Okay, that makes sense 😄 I guess I thought it would work as a filter automatically.

I did that and now it works perfectly.

Thanks!! 🙂