CMS Development

rnoon-d22
Member | Diamond Partner
Member | Diamond Partner

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.

 

Any help on this would be greatly appreciated,

 

Ryan

 

 

0 Upvotes
2 Replies 2
Jon_McLaren
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Remove filter functionality from HS Real Estate Tutorial

simply remove the html and hubl for the select field

Then remove 

```

{% 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 %}

```

Change the last piece of that to

{% 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 %}

 

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
rnoon-d22
Member | Diamond Partner
Member | Diamond Partner

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.

 

Ryan

 

0 Upvotes