Remove filter functionality from HS Real Estate Tutorial
Hey all,
Our client has a huge database of stores that their product is sold in, and I'm trying to find a way to re-write the Real Estate Tutorial Example provided by Hubspot in order to not use the filter, just the search. I'm reluctant to go into the huge database and manually add a new column and select options in for each one just to replicate the example shown here: https://designers.hubspot.com/docs/tutorials/how-to-build-a-real-estate-listing-with-hubdb
<!-- Set the filter by drop down, search bar, and submit button -->
<div>
<form id="form_id" method="get">
<div>
<h4>Filter by Listing Type: </h4>
<select name="type" form="form_id" onChange="this.form.submit()">
<option value="show-all">Show All</option>
{% set types = hubdb_table_column(1029685, "type").options %}
{% for choice in types %}
{% set type_list = type_list~choice.id|list %}
{% if choice.id == request.query_dict.type %}
<option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
{% else %}
<option value="{{ choice.id }}">{{ choice.name }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- Search field -->
<div>
<input name="listing_address" type="text" id="search-by" class="autocomplete" placeholder="Search by City or Zip Code...">
</div>
<input id="submit-button" type="submit" value="search">
</form>
</div>
<!-- Set the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.listing_address == "" %}
{% set queryparam = queryparam ~ "&type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type in ["1", "2", "3", "4"] and request.query_dict.listing_address != "" %}
{% set queryparam = queryparam~"&type="~request.query_dict.type|urlencode~"&listing_address__icontains="~request.query_dict.listing_address|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" and request.query_dict.listing_address != "" %}
{% set queryparam = queryparam~"&listing_address__icontains="~request.query_dict.listing_address|urlencode %}
{% endif %}
<!-- Render Listing database -->
{% set table = hubdb_table_rows(1029685, queryparam) %}
{% 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 %}
<div>
<div class="{{ row["type"].name }}">
<div><img src="{{ row["listing_image"].url }}"></div>
<div>
<h2>{{ row["listing_price"] }}</h2>
<h3>{{ row["listing_address"] }}</h3>
<h4>{{ row["type"].name }}</h4>
<div>
<ul>
<li><span>{{ row["listing_bedrooms"] }}</span><br>bd</li>
<li><span>{{ row["listing_baths"] }}</span><br>ba</li>
<li><span>{{ row["listing_sq_ft"] }}</span><br>sq ft</li>
<li><span>{{ row["listing_acres"] }}</span><br>acres</li>
</ul>
</div>
<div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
My code is exactly like the example so far, however, my HubL and programming skills are very limited at the moment, and I can't quite figure out what everything means. Which parts do I need to remove from my code above in order for just the Search part be available not the filter.
Remove filter functionality from HS Real Estate Tutorial
Hi Jon,
Thanks for your feedback on this. Apologies for the delay in getting back to you, been away for the holidays.
I amended what you recommended, however, the search just returned what was already displayed on the page, rather not just the item I searched for. Example can be found here: https://www.chameleonartproducts.com/store-locator-sandbox
My amended code is as follows:
<!-- Set the filter by drop down, search bar, and submit button -->
<div>
<form id="form_id" method="get">
<!-- Search field -->
<div>
<input name="listing_address" type="text" id="search-by" class="autocomplete" placeholder="Search by City or Zip Code...">
</div>
<input id="submit-button" type="submit" value="search">
</form>
</div>
<!-- Set the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.type == "show-all" and request.query_dict.listing_address != "" %}
{% set queryparam = "listing_address__icontains="~request.query_dict.listing_address|urlencode %}
{% endif %}
<!-- Render Listing database -->
{% set table = hubdb_table_rows(1029685, queryparam) %}
{% 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 %}
<div>
<div class="{{ row["type"].name }}">
<div><img src="{{ row["listing_image"].url }}"></div>
<div>
<h2>{{ row["listing_price"] }}</h2>
<h3>{{ row["listing_address"] }}</h3>
<h4>{{ row["type"].name }}</h4>
<div>
<ul>
<li><span>{{ row["listing_bedrooms"] }}</span><br>bd</li>
<li><span>{{ row["listing_baths"] }}</span><br>ba</li>
<li><span>{{ row["listing_sq_ft"] }}</span><br>sq ft</li>
<li><span>{{ row["listing_acres"] }}</span><br>acres</li>
</ul>
</div>
<div class="button"><a href="{{ row["listing_url"] }}">Details</a></div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Thanks again for your feedback on this, greatly appreciated.