Setting value of a Hubl variable.

Develop, Build & Integrate CMS Development
1

Hello, I am trying to create a dynamic listing of product based on CRM Object and the list can be filtered by user by drop down selection input. I would like to ask if there was any way to set the value Javascript variable as value for another Hubl variable, or set the content of an HTML tag as value for said Hubl variable. Thank you in advance.

2

Hi @HaNguyen,

Here are two other community posts I’d suggest you read through: HUBL in Javascript code, No way to output hubL variables in JavaScript file?

My two prefered methods are by doing this:

{% set myName = "Connor" %}

{% if myName %}
<script type="text/javascript">
 console.log("{{ myName }}")
</script>
{% endif %}

Thanks @cbarley for this example

Or by making a hidden span element with attributes set by HUBL, then grabbing that element by id in the javascript. One thing to note about this second method is to ensure it is set up properly if it done in a custom module, where there could be multiple modules on a single page.

3

Hi @JBeatty

Thank you for your reply. I think what I am trying to achieve is a bit different. If you could take a look at these lines of code, I want to set a conditional for calling specific CRM Object (the second parameter of the function crm_objects) and wonder if the condition could take a value from a HTML element or Javascript Variable:

{% set products = crm_objects('PRODUCT')%}
<label>SKU-Value</label>
<select name="sku" id="sku">
{% for object in products.results %}
{% set sku = crm_object('PRODUCT',object.id,"hs_sku") %} 
 <option value="{{sku.hs_sku}}">{{sku.hs_sku}}</option>
{% endfor %}
</select>
<button type="button" onclick="getInputValue();">Get Product</button>
<script>
 function getInputValue(){
 var inputVal = document.getElementById("sku").value;
 document.getElementById('message').innerHTML = inputVal;

 }
</script>
<p id='message'></p>
{% set choice = %}
<li>{{choice}}</li>
{% set results = crm_objects('PRODUCT',"hs_sku={{choice}}") %}
4

Hi @HaNguyen,

I see what you mean now. This is not possible, HUBL is a templating lanugage, which means by the time the code reached your browser it is already rendered into HTML and Javascript, and there is no HUBL left.
A possible workaround would be to set information in either cookies, or URL query paramters and then refresh (or redirect) to a page that can read those with the conditional in HUBL. You can see more about the HUBL HTTP request variables here.
Alternatively, I see you are using the search HUBL function, so you might be able to grab all the options then in your <option> tag specify some class that can be used to filter selectively from the java script, with all options there, just hidden.

5

Hello @JBeatty ,
Has this subject evolved since 2021 ?
I want to create a custom testimonials module (fields : name, job, image and quote) and add a <select> above with jobs options to filter the testimonials.
Is it possible to get the selected value to change the for loop like that ?

{% for item in module.card|selectattr("jobs","equalto", job ) %}

I hope my question is explained correctly
Thank you in advance