How can all dropdown options from a product's property be passed in a filtering list?

[DrAS]

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-H...), 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');
});

[SteveHTM]

@DrAS - From a property related API call, you can retrieve all possible options for a dropdown list (as you have found) as an array. Applying this array (or subsets of the array) to a search API filter can be done with an IN filter type and values array.

Note these API calls can't be made from client side JS (only HubDB APIs are permitted in this context) - so it seems likely that the HubL option offered in this thread is going to be the best option for the display you want.

Good luck!

Steve

[DanielPicklo · Accepted solution]

Good morning!

So the function you are looking for would be the crm_property_definitions hubl function which you can read more about here: https://developers.hubspot.com/docs/cms/hubl/functions#crm-property-definitions

This will return a dynamic list of all available options in the properties you designate when declaring it and will update as the dropdown options change.

Let me know if you have any further questions!

Dan