Create Jumplinks with HubDB data

[unicorndev]

Hello there! I have a list of local representatives organized by State and would like to create jump links like how it is on this site: https://screenprinting.iccink.com/distributor-locator/

Once you click on the link with the appropriate state, it jumps to the representative associated with that link

I can just do this with regular HTML but can’t seem to wrap my head around the logic working with HubDB.

Here is my code:

{{ hubdb_table_column(5440613,state).options }}
{% set rows = hubdb_table_column(5440613,state).options %}

{% set rows = hubdb_table_column(5440613,state).options %}

<nav class="navigation">
 {% set rows = hubdb_table_column(5440613,state).options %}
 {% for row in rows %}
 <a href="/{{row.name|lower|replace(' ','-')}}">{{ row.name }}</a>
 {% endfor %}
</nav>

<nav class="navigation">
 <a href="/georgia">georgia</a>
 <a href="/california">california</a>
 <a href="/massachusetts">massachusetts</a>

</nav>

{% set int_state_ID = 1 %}

<!-- set the filter -->
<div>
<form id="form_id" method="get">
 <div>
 <h2>FILTER BY STATE: </h2>
 <select name="state" form="form_id" onChange="this.form.submit()">
 <option value="show-all">Show All</option>
 {% set states = hubdb_table_column(5440613, "state").options %}
 {% for choice in states %}
 {% set state_list = state_list~choice.id|list%}
 {% if choice.id == request.query_dict.state%}
 <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
 {% else %}
 <option value="{{ choice.id }}">{{ choice.name }}</option>
 {% endif %}
 {% endfor %}
 </select>
 {#<input name="name" type="text" id="search-by" class="autocomplete" placeholder="Search by name...">#}

 </div>

 {# <div>
 <input name="name" type="text" id="search-by" class="autocomplete" placeholder="Search by name...">
 </div> #}
 <div class="button button-decor" input id="submit-button" type="submit" value="Search">Search</div>

 {# <div class="button button-decor"><input type="button" onclick="location.href='http://21908587.hs-sites.com/uson-local-support';" value="Show All" /></div>
 <div class="button button-decor"><input type="button" onclick="location.href='http://21908587.hs-sites.com/uson-local-support-0';" value="View International Consultants" /></div> #}

 <div class="button button-decor" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-4607eaf4-a4fe-47d9-a519-8a741855d7b7?hs_preview=ARqCKTBc-79035301504';">Show All</div>
 <div class="button button-decor-2" onclick="location.href='http://uson-21034480.hs-sites.com/-temporary-slug-75374ff0-aecd-4940-935b-3b424bf6fe39?hs_preview=liXjChqW-79037877539';">View International Consultants</div>
</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name == "" %}
 {% set queryparam = queryparam ~ "&state=__contains"~request.query_dict.state|urlencode %}

{% endif %}

{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name != "" %}
 {% set queryparam = queryparam~"&state="~request.query_dict.state|urlencode~"&zip__icontains="~request.query_dict.zip|urlencode %}
{% endif %}
{% if request.query_dict.state == "show-all" and request.query_dict.name != "" %}
{% endif %}

{% set table = hubdb_table_rows(5440613, queryparam) %}

<!-- Check if table exists, set sort by state -->
{% if table == [] %}
 <p class='align-center'>Sorry, no listings found for that search. Try changing your filter and search again.</p>
{% else %}
 {% for row in table|sort(False, False, 'state') %}

<div class="consultant-listing">
 <h2>{{ row["name"] }}</h2>

 <div class="information">

{% for state in row.state %}
<div class="fac_state">{{state.name }}
</div>
{% endfor %}

The beginning code I got from this site: Using HubDB To Create Dynamic Navigation

don’t know if I’m in the right direction though…

This is a snippet of my HubDB:

And a snippet of my page:

Thank you!

[Anton]

Hi @unicorndev,

quick question: Do you want jumpmarks for “scroll-to-section” animations or a filter? Just asking because your code is for filtering through the entries - not scrolling.

For anchor/jumpmarksyou should use ‘#’ instead of ‘/’ like this:

{{ hubdb_table_column(5440613,state).options }}
{% set rows = hubdb_table_column(5440613,state).options %}

{% set rows = hubdb_table_column(5440613,state).options %}

<nav class="navigation">
 {% set rows = hubdb_table_column(5440613,state).options %}
 {% for row in rows %}
 <a href="#{{row.name|lower|replace(' ','-')}}">{{ row.name }}</a>
 {% endfor %}
</nav>
...

{% for row in rows %}
<div class="contentClass" id="{{row.name|lower|replace(' ','-')}}">
{# Content layout goes here #}
</div>
{% endfor %}

best,

Anton

[unicorndev]

Oh, I want the scroll animation like on the website I provided.

I don’t know if it’s possible to do it dynamically through HubDB?

[Anton]

Hey @unicorndev,

thanks for clearification.

TL;DR: yes it’s possible

Long version: You have several approaches you can go.

• If you’re building the complete page with one HubDB you could create it with the code from my previous post
• If you’re building it with seperated modules/layouts you could
  • a) create a socalled anchor module which will have either a text(not rich-text) field where you have to put in manually the same value as you’re using in the navigation or grab them from HubDB(this will be a lot harder)
  • b) add an anchor function(text-field) to your module you want to navigate to.

Here’s an example for such a text custom module

<div class="anchor" id="{{ module.anchor_name|lower|replace(' ', '-')}}"></div>

The only thing left to do is to drop it above the module you’d like to scroll to, put in the exact same name as your “navigation” item in the HubDB. Done

best,

Anton

[unicorndev]

I’m a little bit confused in the first example. I attempted to use that in my code but it’s not showing. In the hubDB table I provided, I want to grab the states information. So would it be {{row.state}}?

https://screenprinting.iccink.com/distributor-locator/

Much like this^^

I can’t seem to wrap my head around the logic of this and to have it scroll to the right state since my table is being dynamically generated

Sorry, just having difficulty understanding

[Anton]

Hi @unicorndev,

your code from above is almost correct. It needs just slight alignments.

You’re writing it like this

{{ hubdb_table_column(5440613,state).options }}
{% set rows = hubdb_table_column(5440613,state).options %}

{% set rows = hubdb_table_column(5440613,state).options %} 
{# You don't need the same information multiple times. You can delete this two "set rows" lines. #}

<nav class="navigation">
 {% set rows = hubdb_table_column(5440613,state).options %}
 {% for row in rows %}
 <a href="/{{row.name|lower|replace(' ','-')}}">{{ row.name }}</a>
 {% endfor %}
</nav>

<nav class="navigation">
 <a href="/georgia">georgia</a>
 <a href="/california">california</a>
 <a href="/massachusetts">massachusetts</a>

</nav>

the correct way would be

{{ hubdb_table_column(5440613,state).options }}
{% set rows = hubdb_table_column(5440613,state).options %}

<nav class="navigation">
 {% for row in rows %}
 <a href="#{{row.name|lower|replace(' ','-')}}">{{ row.name }}</a>
 {% endfor %}
</nav>

For the listing it’s like this

<div class="consultant-listing">
 <h2>{{ row["name"] }}</h2>

 <div class="information">

{% for state in row.state %}
<div class="fac_state">{{state.name }}</div>
{% endfor %}

but should be:

<div class="consultant-listing">
 <h2>{{ row["name"] }}</h2>

 <div class="information">

{% for state in row.state %}
<div class="fac_state" id="{{ row["name"] }}">{{ state.name }}</div>
{% endfor %}
</div>
</div>

best,

Anton