top of page

Templates : Write Custom Formatting Functions

When you need more functionality and control over the formatting of elements on your template, you can build custom javascript formatting functions that you can apply to the template at render time


You can register your custom formatting functions in the code editor.


To open the code editor, click on the "Canvas" tab and then the "Code Editor" button. In the code editor, click on the "JS" tab.



In teh code editor, we will register our custom formatting function using the registerDesignerFunction function.


This function accepts 3 arguments

  • A function name

  • A callback that accepts a single parameter that represents the element that you are applying this formatting to

  • A selector to match elements that you wish to apply this function to


Here is an example function that will make the price text red in color, if the price is less than 30,000



Let's break this down


makeCheapVehiclesRed

This is the name or id of this function. Other than being used to identify this function later, it does not require special naming rules (like custom field functions do)


(el) => {

This is the callback. el represents the element that this function is being applied to. The element will be one or more elements matching your selector


const price = parseFloat(el.getAttribute("data-value"));

    if( price < 30000 ){
      el.innerHTML = '<span style="color:red">' + el.innerHTML + "</span>";
    }

Dynamic values are stored in the data-value attribute of their containing div. We get this value here


Then we test if it is less than 30000, and if so, we wrap the current innerHTML in span tag with the color red


'[x-objectcode="item_price"]'


This is the selector. Here we are selecting all elements that have an x-objectcode of "item_price"


Add this code into your code editor, and it should look like this



Now, check different vehicles to see the function applied and our prices under 30,000 are now RED!




Because the formatting functions have full control over the element. They can add any kind of markup to it. Add styles, and even remove all innerHTML to make the item disappear











Yorumlar


Yorumlara kapatıldı.
bottom of page