I am using hubspot’s product object to record different real estate projects and properties. A custom property was created for the product object, with internal value asset_type, and field type Dropdown select. Same for bedrooms, and bathrooms.
A module has been created to display, with the ability of filtering, properties listings - a card-type list of properties, dependent on filters, containing information about those properties. For the time being, I am trying to make just a few filters work, before moving on to add filters.
I managed to make the minimum and maximum price work as filters, i.e.: when they are set, both of them together or independently of one another, and the filter button is hit, what is then displayed are only the correct properties.
However, I am stuck with the other ones. What is displayed as an option in all the lists is simply ‘All’, but for each of those lists what I want displayed are the existing dropdown options found in the product object’s properties. I do not want to hard-code the drop-down options (apartment, house, studio, etc; 1, 2, 3, etc). That is suboptimal, as those options may change at any time, which means they got to be hard-coded again; plus, more filters will be added for this module and others later on, and each time those options could change also. I want to pull the dropdown options directly from the property itself, as set within properties settings of the product object.
I understand this is possible with HubDB (https://community.hubspot.com/t5/APIs-Integrations/How-to-get-all-options-from-a-select-field-from-HubDB-from/m-p/674328), and I see no reason why it cannot be possible with CRM Objects also.
Here’s the module:
module.html
{% set asset_type_options = crm_object("product", "asset_type", 200) %}
{% set bedrooms_options = crm_object("product", "bedrooms", 200) %}
{% set bathrooms_options = crm_object("product", "bathrooms", 200) %}
<!-- Debug Information -->
{% for options in asset_type_options %}
<p>Asset Type Options Raw Data: {{ option|pprint }}</p>
{% endfor %}
<p>Asset Type Options Raw Data: {{ asset_type_options|pprint }}</p>
<p>Bedrooms Options Raw Data: {{ bedrooms_options|pprint }}</p>
<p>Bathrooms Options Raw Data: {{ bathrooms_options|pprint }}</p>
{% if dynamic_page_crm_object_type_fqn %}
{# Fetch the products with the limit of 200 #}
{% set products = crm_objects("product", "limit=200", "hs_sku, price, cover_photo, address, asset_type, bedrooms, bathrooms") %}
<p>Total products fetched: {{ products.results|length }}</p>
{# Debug the first product's data #}
<pre>{{ products.results[0]|pprint }}</pre>
<div class="product__listing">
{% for product in products.results %}
<div class="product__card">
<a href="{{ request.path }}/{{ product.hs_sku }}">
<div class="product__cover_photo">
{% if product.cover_photo %}
<img src="{{product.cover_photo}}" alt="{{product.hs_sku}} {{product.price}} {{product.asset_type}}">
{% else %}
<img src="https://f.hubspotusercontent20.net/hubfs/9307273/Imported%20images/plchldr255.png" alt="Picture coming soon">
{% endif %}
</div>
<div class="product__details">
<div class="product__price">
Price: {{product.price |format_currency("en-US")}}
</div>
<div class="product__asset_type">
Type: {{ product.asset_type}}
</div>
<div class="product__bedrooms">
Bedrooms: {{product.bedrooms}}
</div>
<div class="product__bathrooms">
Bathrooms: {{product.bathrooms}}
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% elif dynamic_page_crm_object %}
<p>This is a dynamic page detail view. The listing is hidden.</p>
{% else %}
{# Default product listing when not in a dynamic page context #}
{% set object_type = dynamic_page_crm_object_type_fqn | default("product") %}
{% set products = crm_objects("product", "limit=5", "hs_sku, price, cover_photo, address, asset_type, bedrooms, bathrooms") %}
<p>Total products fetched: {{ products.results|length }}</p>
{# Debug the first product's data #}
<pre>{{ products.results[0]|pprint }}</pre>
<section aria-labelledby="product-listing-heading">
<h3 id="product-listing-heading">
Available Properties
</h3>
<ul>
{% for product in products.results %}
<li><a href="/product/{{ product.sku }}">{{ product.asset_type }} ({{ product.price }}) in {{ product.address }}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
module.js
document.addEventListener("DOMContentLoaded", function() {
const accessToken = '******';
function fetchPropertyOptions(propertyName, dropdownId) {
fetch(`https://api.hubapi.com/crm/v3/properties/${propertyName}?archived=false`, {
headers: {
'Authorization': `Bearer ${accessToken}`,
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
const dropdown = document.getElementById(dropdownId);
dropdown.innerHTML = `<option value="">All</option>`; // Default option
data.options.forEach(option => {
dropdown.innerHTML += `<option value="${option.value}">${option.label}</option>`;
});
})
.catch(error => console.error('Error fetching property options:', error));
}
// Fetch and populate dropdowns
fetchPropertyOptions('asset_type', 'asset_type_dropdown');
fetchPropertyOptions('bedrooms', 'bedrooms_dropdown');
fetchPropertyOptions('bathrooms', 'bathrooms_dropdown');
});