Blog

The plugin comes with a lot of configurable settings but you might want to do something more specific and would like to change the behavior of the fields manually. For that, you can use the API.

Important: To use the API is strongly advisable to have knowledge of javascript.

There are two types of API, the backend API, and front-end API.

The back-end API is used to load admin information. For example, you could query the options selected in an order.

The Front end API is used to manipulate the extra options while the user is filling them. For example, you could use the front-end API to fill a text field, check a box or hide a field when the user clicks somewhere.

In this tutorial, we are going to focus on the front-end API.

Accessing the front-end API

Once the page is loaded you can access the API of each displayed product using the variable RNProducts. So for example, if only one product was loaded by the page this code will give you access to the API of that product

RNProducts[0]

Accessing the fields

Once you have access to the API, you can get any field of the product using the method “GetFieldById”, for example, the code below would get the field with the id of 1

RNProducts[0].GetFieldById(1)

You can find the id of each field in the product designer

Manipulating a field

Lastly, once you have access to a field you can use its methods to manipulate it, each field has different methods (explained in another tutorial). For example, you could fill a text field with this code:

RNProducts[0].GetFieldById(1).SetText('My text')

Or you could check a box in a checkbox field with this code

RNProducts[0].GetFieldById(1).SetSelection([1])

Conclusion

Using the API is a very powerful tool to perfectly tune your product configuration. This API is more oriented for developers though so if you are not familiar with coding it would be advisable to check if what you want to do is already possible using the field settings.